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.

Layouts

• .cwf-card--image - Indicates a card has an image and allows other image-dependent modifiers to work properly. This layout is automatically applied when an image is used.
• .cwf-card--stacked - Stacks a card's image above its body content. This layout is automatically applied when the card is within a grid component.
• .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--borderless - Removes a card's border and reduces its internal padding. This only works on non-themed cards.

Themes

• .cwf-card--gold - Alters the card's style to have a gold background and black text.
• .cwf-card--black - Alters the card's style to have a black background and white text.
• .cwf-card--gray - Alters the card's style to have a gray background.

Accented

By adding a .cwf-card--accent class to a card, it adds a thin pseudo-border to the top of the card using the configured accent color as its background color. This adds a pop of theme color to your cards without being too visually overbearing.

Labeled

By adding a data-label="$" attribute to a card, where $ is the label message, a prominent label will be added to the top-left of the card to better highlight important content. Labels should be short/succinct, as lengthy labels will most likely break card styles in certain instances.

T4 implementation

Cards are implemented in T4 as the "Card" plugin, meaning its classes are .plugin- prefixed instead of .cwf- prefixed.

When using the card content type in the sidebar/sub-nav area of a T4 website, the stacked layout and accent theme 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).

Areas

The "Card" plugin can be moved to different areas on the page using the area:{$} injector in the "Injectors" field, where $ is one of the following keywords:

• feature - Moves the card to the feature area of the page (below the main navigation, above the sidebars and main content).
• sidebar - Moves the card to the sidebar area of the page (right of the main content).
• footer - Moves the card to the footer area of the page (above the footer, below the sidebars and main content).

This plugin can also be used within the global "Site-Feature", "Site-Sidebar", and "Site-Footer" sections to have it displayed globally within the feature, sidebar, and footer areas respectively.

Injectors

In the "Injectors" field of the "Card" plugin, the following injectors can be used:

• area:{feature|sidebar|footer} - Changes the area on the page the card is displayed.
• id:{custom_id} - Overrides the default, T4 ID of the card with a custom ID.
• theme:{accent|gray,grey} - Sets the theme of the card.
• stacked:{true|false} - Enables/disables the stacked layout of the card.
• reversed:{true} - Enables the reversed layout of the card.
• borderless:{true} - Enables the borderless layout of the card.
• label:{label_text} - Adds a label to the card.
• class:{custom_classes} - Adds custom classes to the card.
• style:{custom_styles} - Adds custom styles to a style attribute of the card.
• before:{custom_html} - Adds custom HTML before the card.
• after:{custom_html} - Adds custom HTML after the card.

Examples

Image card

This is an example of a card with an image. Images are placed to the right of the body content by default, and automatically adjust regardless of the image aspect ratio used.

Reversed card

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.

Stacked card

This is an example of a stacked card with an image. The image is now above the body content. This style should be used when in the sidebar, and is automically applied when in a grid.

Borderless card

This is an example of a borderless card with an image. This style removes the border , reduces the internal padding of the card, and only works on non-themed (or default) cards.