<div id="example-card" class="cwf-card cwf-card--reversed">
    <div class="cwf-card__container">
        <div class="cwf-card__body">
            This is an example of a reversed card with an image. Instead of showing the image to the right of the body, it shows it to the left.
        </div>
        <div class="cwf-card__media">
            <img src="https://picsum.photos/200/200/" class="cwf-card__background" role="presentation" />
            <img src="https://picsum.photos/200/200/" alt="A randomized, square image from Picsum" class="cwf-card__image" />
        </div>
    </div>
</div>
{%- 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 }}
        </div>
        {%- if image is defined and image != false -%}
            <div class="cwf-card__media">
                <img src="{{ image.src }}"
                    class="cwf-card__background"
                    role="presentation" />
                <img src="{{ image.src }}"
                    alt="{{ image.alt }}"
                    class="cwf-card__image" />
            </div>
        {%- endif -%}
    </div>
</div>
{
  "id": "example-card",
  "content": "This is an example of a reversed card with an image. Instead of showing the image to the right of the body, it shows it to the left.",
  "image": {
    "alt": "A randomized, square image from Picsum",
    "src": "https://picsum.photos/200/200/"
  },
  "reversed": true
}
  • 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(
        style__color(white-dark),
        5%
    ) !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),
        17%
    ) !default;
    $card--themed__button--active--color: style__color(gray-dark) !default;
    $card--themed__button--hover-focus--background-color: style__color(
        gold
    ) !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-background-color:
            $card--themed__button--hover-focus--background-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-background-color
                );
                $button-active-color: map-get($button, active-color);
                $button-hover-focus-background-color: map-get(
                    $button,
                    hover-focus-background-color
                );
                $button-hover-focus-color: map-get($button, hover-focus-color);
    
                & .cwf-card__body {
                    .t4_button,
                    .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(
            $colors,
            (
                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 & {
            @content;
        }
    }
    
    @mixin card__reversed {
        .cwf-card--reversed & {
            @content;
        }
    }
    
    .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} {
            &.t4_text-primary,
            &.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

Card

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.

Variations

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.

Behavior

  • .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.

Style

  • .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).