.woocommerce-marketing-recommended-extensions-card {
.components-card__body {
padding: $gap-small;
}
&__items {
display: flex;
flex-wrap: wrap;
@include breakpoint( ">600px" ) {
> a,
> .is-loading.woocommerce-marketing-recommended-extensions-item {
width: 50%;
@include breakpoint( ">960px" ) {
width: 33.3%;
&--count-1 > a,
&--count-1 > .is-loading.woocommerce-marketing-recommended-extensions-item {
width: 100%;
&--count-2 > a,
&--count-2 > .is-loading.woocommerce-marketing-recommended-extensions-item {
&--count-4 > a,
&--count-4 > .is-loading.woocommerce-marketing-recommended-extensions-item {
width: 25%;
.woocommerce-marketing-recommended-extensions-item {
display: block;
padding: 12px;
text-decoration: none;
position: relative;
h4 {
color: $gray-900;
margin: -2px 0 ( $gap-smallest - 1 );
font-size: 16px;
line-height: 1.3;
transition: color 0.2s ease;
p {
color: $gray-700;
margin: 0;
&:hover {
color: var(--wp-admin-theme-color);
&__text {
padding-left: 46px;
.woocommerce-admin-marketing-product-icon {
position: absolute;
top: 12px;
left: 12px;
.woocommerce-marketing-recommended-extensions-item.is-loading {
.is-placeholder {
@include placeholder();
display: inline-block;
min-height: 16px;
width: 80%;
p :last-child {
width: 60%;