Most Brand Card customization is achieved through this container component.

For more details on layout, see: Flex Container.

Defaults

Brand cards will default to vertical display.

Customization

The container node controls the display of its child cards. The following classes are available for customization:

.brand-card--horizontal

This class is breakpoint targetable.

.brand-card--flipped

Supports horizontal cards with flipped content. Markup must be appropriated flipped.

.brand-card--uneven

Supports horizontal cards with 55% : 45% content ratio.

.brand-card--bias-left

Supports horizontal cards with 66% : 33% content ratio.

.brand-card--bias-right

Supports horizontal cards with 33% : 66% content ratio.

.brand-card--contained

Supports brand cards within article content. Example

Markup

<!-- Brand Card Container -->
<div class="flex__container brand-card__container brand-card--horizontal@md media__ratio--square media__ratio--wide@lg">
    <!-- Brand Cards -->
</div>