Category: Cards, Mixins

Back to Docs

Navigation

Card Container Mixin

The Card Container Mixin is used for applying container query styles to any card in the Card Framework.

Example

.your-card {
  @include card-container("inline-size > 767px") {
      // Your styles here
  }
}
Code language: PHP (php)

Make sure the following are true in order for this mixin to work:

  1. The Card Framework is turned on.
  2. Auto Container Query support for Cards is turned on.
  3. The range syntax is expressed in quotes.
  4. The selector you’re targeting (.your-card) has enough specificity to override the non-container query styles.

If you run into specificity issues that are causing your container query styles to not work, you can use the double selector trick to increase the specificity:

.your-card.your-card {
  @include card-container("inline-size > 767px") {
      // Your styles here
  }
}
Code language: PHP (php)

In many page builder scenarios, it might be better to use the Card Container Recipe instead of this mixin, since you’ll be able to keep all your CSS attached to the actual card element.