Image Cards
Component Overview
This component offer up generic cards with optional image, title, subtitle, overview and cta button/link.
Title/Overview/Include Separator
Optional title and overview to appear above the image cards.
Toggle on ‘Include Separator’ if you want a separator under the title.
Card Styles
- Standard: Basic image card with the drop-shadow card look, large title.
- Editorial: Card with the drop-shadow car look but a smaller font size used for the title (ideal for long titles, styled like our Article Cards).
- Borderless: Standard without the drop-shadow border.
- Block: Image on top with lower color block area directly below.
- Minimal: Smaller card that display with the image on the left in mobile.
- Staggered: This style only works with two columns. The cards are displayed staggered on either side of a brand colored vertical bar.
Message Styles
- Center
- Left
Column Styles
This indicates how many cards to show in a row on large devices. It will respond to the size of the device with a single column in all cases for small devices.
Layout Note: For 2-Up and 3-Up the cards will be centered on the page. For 4-up, the cards will fill with width of the page.
- 2-Up: This is the only one relevant for “Staggered”
- 3-Up
- 4-Up
Background Color
Toggle on if you would like the cards to have a contrasting background color. This is used to ‘feature’ the component.
Card Fields
All are optional, allowing for creative options for the cards.
- Title
- Subtitle
- Overview
- Image
- Button: Icon Link is often a good choice
Standard Style
Demonstrating 3-Up card columns with Left text style.
Card One Title
Card Two Subtitle (optional)
This is the overview text for the image card. It may NOT contain links as the entire card is a link.
Card Two Title
Card Two Subtitle (optional)
This is the card overview text, demonstrating that the link is optional.
Card Three Title
Card Three Subtitle
This is the overview text for the third example card.
Editorial Style
This version of the card mimics the look of our Article cards and is used when the title is longer.
Card One showing a long title
Subtitle is also optionally available
This is the overview text for the editorial style which is often longer as well.
Card Two showing yet another long title
Optional subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Three also with a rather long title
Optional subtitle
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Block Style
Demonstrating 2-Up card columns with Left text style. Also showing the background color option.
Card One Subtitle (optional)
This is the overview text for our first block style card.
Card Two Subtitle (optional)
This is the overview text for our second example block card.
Borderless Style
This demonstrates the borderless style with 3-Up columns and Centered text and the separator as well.
Card One Title
Card One Subtitle
This is the overview text for our first borderless card.
Card Two Title
Card Two Subtitle
This is the overview text, demonstrating the use of the icon with the link.
Card Three Title
Card Three Subtitle
This is the overview text for our third sample card. No link on this card.
Minimal Style
This demonstrates the Minimal Style with Left text alignment and 4-Up columns. This would often be used with the title only.
Staggered Style
This demonstrates the staggered style. Used without images for the ‘timeline’ on about us pages. Note that the staggered style only works with 2 columns. Also demonstrating the background color.