<div id="example-card" class="cwf-card">
    <div class="cwf-card__container">
        <div class="cwf-card__body">
                H1 header
                Cards provide a way to visually distinguish key elements of the page from the rest of the content. By default, a card will have a white background with a gray border surrounding it. Any WYSIWYG content can be added to its body, including buttons and images.
{%- set classes = ['cwf-card'] -%}
{%- if theme -%}
    {% set classes = classes|merge(['cwf-card--' ~ theme]) %}
{%- endif -%}
{%- if stacked -%}
    {% set classes = classes|merge(['cwf-card--stacked']) %}
{%- endif -%}
{%- if reversed -%}
    {% set classes = classes|merge(['cwf-card--reversed']) %}
{%- endif -%}
<div id="{{ id ?? 'cwf-card' }}" class="{{ classes|join(' ') }}">
    <div class="cwf-card__container">
        <div class="cwf-card__body">
            {{ content }}
        {%- if image is defined and image != false -%}
            <div class="cwf-card__media">
                <img src="{{ image.src }}"
                    role="presentation" />
                <img src="{{ image.src }}"
                    alt="{{ image.alt }}"
                    class="cwf-card__image" />
        {%- endif -%}
  "id": "example-card",
  "content": "<h1>\n    H1 header\n</h1>\n<p>\n    Cards provide a way to visually distinguish key elements of the page from the rest of the content. By default, a card will have a white background with a gray border surrounding it. Any WYSIWYG content can be added to its body, including buttons and images.\n</p>"
  • Content:
    // Card component styles
    @import "../../shared/media";
    @import "../../shared/reset";
    @import "../../shared/style";
    @import "../../shared/theme";
    // Card colors
    $card--background-color: style__color(white) !default;
    $card--border-color: rgba(style__color(black), 0.125) !default; // #ddd
    $card--foreground-color: style__color(gray-dark) !default;
    $card--marker-color: style__color(gold) !default;
    $card--link-color: style__color(blue, accent) !default;
    .cwf-card {
        @include style__spacing;
        border: 1px solid var(--cwf-card--border-color);
        background-color: var(--cwf-card--background-color);
        --cwf-card--background-color: #{$card--background-color};
        --cwf-card--border-color: #{$card--border-color};
        --cwf-card--foreground-color: #{$card--foreground-color};
        --cwf-card--marker-color: #{$card--marker-color};
        --cwf-card--link-color: #{$card--link-color};
    // Card accent colors
    $card--accent--background-color: theme__accent--background() !default;
    $card--accent--foreground-color: theme__accent--foreground() !default;
    $card--accent--marker-color: style__color(gold) !default;
    $card--accent--link-color: theme__accent--foreground() !default;
    // Card gray colors
    $card--gray--background-color: darken(
    ) !default; // #e5e5e5
    $card--gray--foreground-color: style__color(gray-dark) !default;
    $card--gray--marker-color: style__color(gold) !default;
    $card--gray--link-color: style__color(blue, accent) !default;
    // Card themed button colors
    $card--themed__button--background-color: style__color(white) !default;
    $card--themed__button--border-color: style__color(gray-lightest) !default;
    $card--themed__button--color: style__color(blue, accent) !default;
    $card--themed__button--active--background-color: lighten(
        style__color(blue, accent),
    ) !default;
    $card--themed__button--active--color: style__color(gray-dark) !default;
    $card--themed__button--hover-focus--background-color: style__color(
    ) !default;
    $card--themed__button--hover-focus--color: style__color(gray-dark) !default;
    $card--themed__button: (
        background-color: $card--themed__button--background-color,
        border-color: $card--themed__button--border-color,
        color: $card--themed__button--color,
        active-background-color: $card--themed__button--active--background-color,
        active-color: $card--themed__button--active--color,
        hover-focus-color: $card--themed__button--hover-focus--color
    // Card themes
    $card__themes: (
        "accent": (
            background-color: $card--accent--background-color,
            foreground-color: $card--accent--foreground-color,
            marker-color: $card--accent--marker-color,
            link-color: $card--accent--link-color,
            button: $card--themed__button
        "gray": (
            background-color: $card--gray--background-color,
            foreground-color: $card--gray--foreground-color,
            marker-color: $card--gray--marker-color,
            link-color: $card--gray--link-color,
            button: $card--themed__button
    @mixin card__theme($instructions) {
        $theme: map-get($instructions, theme);
        $background-color: map-get($instructions, background-color);
        $foreground-color: map-get($instructions, foreground-color);
        $marker-color: map-get($instructions, marker-color);
        $link-color: map-get($instructions, link-color);
        $button: map-get($instructions, button);
        .cwf-card--#{$theme} {
            --cwf-card--background-color: #{$background-color};
            --cwf-card--foreground-color: #{$foreground-color};
            --cwf-card--marker-color: #{$marker-color};
            --cwf-card--link-color: #{$link-color};
            @if $button {
                $button-background-color: map-get($button, background-color);
                $button-border-color: map-get($button, border-color);
                $button-color: map-get($button, color);
                $button-active-background-color: map-get(
                $button-active-color: map-get($button, active-color);
                $button-hover-focus-background-color: map-get(
                $button-hover-focus-color: map-get($button, hover-focus-color);
                & .cwf-card__body {
                    .cwf-button {
                        --cwf-button--background-color: #{$button-background-color};
                        --cwf-button--border-color: #{$button-border-color};
                        --cwf-button--color: #{$button-color};
                        --cwf-button--active--background-color: #{$button-active-background-color};
                        --cwf-button--active--color: #{$button-active-color};
                        --cwf-button--hover-focus--background-color: #{$button-hover-focus-background-color};
                        --cwf-button--hover-focus--color: #{$button-hover-focus-color};
    @mixin card__theme--official($theme) {
        $colors: map-get($card__themes, $theme);
        $instructions: map-merge(
                theme: $theme
        @include card__theme($instructions);
    @each $theme, $colors in $card__themes {
        @include card__theme--official($theme);
    // Container
    @mixin card__stacked {
        .cwf-card--stacked &,
        .cwf-grid > .cwf-card & {
    @mixin card__reversed {
        .cwf-card--reversed & {
    .cwf-card__container {
        display: flex;
        flex-direction: column-reverse;
        @include theme__contain;
        @include media__breakpoint {
            flex-direction: row;
            @include card__reversed {
                flex-direction: row-reverse;
            @include card__stacked {
                flex-direction: column-reverse;
    // Media
    .cwf-card__media {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: style__color(black);
        overflow: hidden;
        @include media__breakpoint {
            width: 25%;
            @include card__stacked {
                width: 100%;
    .cwf-card__background {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) scale(2);
        filter: blur(2rem);
        backface-visibility: hidden;
        opacity: 1;
    .cwf-card__image {
        position: relative;
    // Body
    .cwf-card__body {
        flex: 1;
        padding: 1.5rem;
        color: var(--cwf-card--foreground-color);
        @include style__children;
        a {
            font-weight: 700;
            --cwf-link--color: var(--cwf-card--link-color);
            --cwf-link--active--color: var(--cwf-card--link-color);
        @include reset__headings--reduce;
        #{$reset__headings--selectors--lg} {
            &.cwf-marker {
                --cwf-marker--background-color: var(--cwf-card--marker-color);
  • URL: /components/raw/card/_index.scss
  • Filesystem Path: components/card/_index.scss
  • Size: 7.1 KB


The card component should be used to highlight key elements on the page that you want to visually distinguish from the rest of your content. While any WYSIWYG content can be added inside this component, it is recommended to keep the content in this element concise to ensure the integrity and original intent of the component.


By default, a card will be styled with a white background and a darkened border. If an image is used, it will appear next to the body content on viewports larger than a standard mobile device. These defaults can be overridden with the following modifier classes.


  • .cwf-card--stacked - Stacks a card’s image above its body content.
  • .cwf-card--reversed - Reverses a card’s image and body order, showing the image to the left of the body instead of the right.


  • .cwf-card--accent - Alters the card’s style to use the theme’s accent color for the background (blue by default).
  • .cwf-card--gray - Alters the card’s style to have a gray background.

T4 implementation

When using the card content type in the sidebar/sub-nav area of a T4 website, the .cwf-card--stacked and cwf-card--accent modifier classes will automatically be applied, rendering the card with its image (if provided) above its body content and with an accent background color (blue by default).