Content Card

Mixins

root

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

  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(178px);
  display: flex;
  justify-content: center;
  overflow: hidden;
 }
Description

Content card bottom container

Parameters

None.

Requires