Content Card

Mixins

root

@mixin root() { ... }@mixin root() { 
  @include mixins.card-container;

  container-type: inline-size;
  height: 100%;
  border-radius: border.get('br02');
  padding: spacing.get('s4');
  background-color: #{color.get('ui-bg', '21')};
  display: flex;
  flex-direction: column;
 }
Description

Content card root container styles

Parameters

None.

Requires

media-container

@mixin media-container() { ... }@mixin media-container() { 
  @include mixins.media-container;

  margin-bottom: spacing.get('s4');
  border-radius: border.get('br02');
 }
Description

Content card media container

Parameters

None.

Requires

media

@mixin media() { ... }@mixin media() { 
  height: 100%;
  width: 100%;
 }
Description

Content card media

Parameters

None.

body

@mixin body() { ... }@mixin body() { 
  @include typography.style-as('editorial-text-1');

  color: color.get('text', 'display');
 }
Description

Content card body container

Parameters

None.

Requires

bottom

@mixin bottom() { ... }@mixin bottom() { 
  margin-top: auto;
  padding-top: spacing.get('s2');
  max-height: unit.rem(210px);
  display: flex;
  justify-content: center;
  overflow: hidden;

  @container (max-width: 264px) {
    max-height: unit.rem(178px);
  }
 }
Description

Content card bottom container

Parameters

None.

Requires