Skip to content

Card

This is a very simple component that allows for free-form HTML or other components to be placed in a a styled box that stands out from the content that's around it.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Desktop
  4. WordPress
  5. Specifications
    1. Properties
  6. Changelog
  7. Examples

Anatomy

  1. Image (Optional)
  2. Header (Optional)
  3. Content (Optional)
  4. Footer (Optional)

Usage Guidelines

  • We will not be able to do multi-color text configurable
  • Cards accommodate standard text formatting, alignment and sizing
  • Users should use rows and columns to align the cards
  • Users have the ability to add a full width image to the top of cards
  • Cards can be used in any component

Desktop

  • The content in the cards can be formatted like the mockup by adding a fact and setting the style to "Large Value"
  • If the content in each card will be more than a few sentences, consider using Accordions - Card Version

WordPress

This component can be added to post content with the Card block in the Gutenberg editor.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
contentstring inner HTML markup. --
attrsarray list of additional HMTL attributes to apply to main element. --
└ itemstring - --
classstring list of additional classes to apply to main element. --

Changelog

1.37.0 (2022-08-18)

  • fix: fix spacing of copy sections with media (a11b221)

1.31.0 (2022-04-15)

1.21.0 (2021-06-14)

  • fix: add max-width at small breakpoints in certain layouts (cd88731)
  • fix: change max-width to percentage (012a956)

1.20.1 (2021-06-02)

  • fix: standardize spacing within subsections (c17a408)

1.15.0

  • card added

Examples

Default

Inner Heading

Maecenas faucibus mollis interdum.

{{ include( 'components/card.twig', {
	content: "<h2 class='h3'>Inner Heading</h2><p>Maecenas faucibus mollis interdum.</p>"
} ) }}

Additional Content

Faucibus mollis

Inner Heading

Maecenas faucibus mollis interdum.

Read More 
<x-card>
	<x-slot name="content">
		<p class='highlight'>Faucibus mollis</p>
		<h2 class='h3'>Inner Heading</h2>
		<p>Maecenas faucibus mollis interdum.</p>
	</x-slot>
	<x-slot name="footer">
		<x-button href="http://example.com" variant="outlined">Read More</x-button>
	</x-slot>
</x-card>

Card Collection

Inner Heading

Maecenas faucibus mollis interdum.

Button

Inner Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Button

Inner Heading

Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Button 
<div class="tux-l-row u-align-stretch">
	<x-card>
		<x-slot name="media">
			{{ wp_image('hero-background-lg.jpg') }}
		</x-slot>
		<x-slot name="content">
			<h3>Inner Heading</h3>
			<p>Maecenas faucibus mollis interdum.</p>
		</x-slot>
		<x-slot name="footer">
			<x-button href="#" variant="outlined">Button</x-button>
		</x-slot>
	</x-card>
	<x-card>
		<x-slot name="media">
			{{ wp_image('hero-background-lg.jpg') }}
		</x-slot>
		<x-slot name="content">
			<h3>Inner Heading</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
		</x-slot>
		<x-slot name="footer">
			<x-button href="#" variant="outlined">Button</x-button>
		</x-slot>
	</x-card>
	<x-card>
		<x-slot name="media">
			{{ wp_image('hero-background-lg.jpg') }}
		</x-slot>
		<x-slot name="content">
			<h3>Inner Heading</h3>
			<p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
		</x-slot>
		<x-slot name="footer">
			<x-button href="#" variant="outlined">Button</x-button>
		</x-slot>
	</x-card>
</div>