Card with Optional Image and Card with Icon examples
Well-designed cards are visually inviting and offer numerous advantages. They simplify information scanning and encourage immediate interaction, making them intuitive for users. Cards also make content and features easily discoverable while maintaining a visually pleasing appearance across various screen sizes. Take a look at the card layout options you can build.
Card with Optional Image
This is perfect for showcasing a large captivating image to promote a specific topic.
Paragraph Types used: Section (Configurable Column Layout) / 1 Column / Card with Optional Image / "Behavior" tab / Yellow / Default Padding.
You’d like one large card
33 words example: Description provides an informative glimpse, enticing visitors to learn more. Keep it short and simple. To switch the link style from Big CTA to Button, click on the 'Behavior' tab.
- Big CTA label
Card with Optional Image
This layout is ideal for highlighting two compelling images, enabling you to promote specific topics with great impact.
Paragraph Types used: Section (Configurable Column Layout) / 2 Column / Card with Optional Image / "Behavior" tab / Purple / Default Padding.
You’d like a fifty-fifty card layout
44 words example: Description provides an informative glimpse, enticing visitors to learn more. Keep it short and simple. To switch the link style from Button to Big CTA, click on the 'Behavior' tab. For a clean card layout, choose one link style—don’t mix them.
You’d like a fifty-fifty card layout
44 words example: Description provides an informative glimpse, enticing visitors to learn more. Keep it short and simple. To switch the link style from Button to Big CTA, click on the 'Behavior' tab. For a clean card layout, choose one link style—don’t mix them.
Card with Optional Image
Leave the 'Image' field empty in the Edit screen for text-only cards to effectively showcase pertinent information, complementing your page layout and other visually rich elements.
Paragraph Types used: Section (Configurable Column Layout) / 3 Column / Card with Optional Image / "Behavior" tab / White-Gray Gradient / Default Padding.
Note: To add a 'Title Link' arrow, find this field in the Edit screen directly below the 'Title' field. This link can direct visitors to a detailed page for more information.
40 words example: Description provides an informative glimpse. Keep it short and simple. Find the 'Button Links' field in the Edit screen’s last item for this section. This link directs to the same detailed page as the 'Title Link' arrow.
35 words example: Description provides an informative glimpse. Keep it short and simple. In the Edit screen, leave the 'Image' field empty for a clean text-only card layout—avoid mixing with Icon or Image cards.
40 words example: Description provides an informative glimpse. Keep it short and simple. In the Edit screen, leave the 'Image' field empty for a clean text-only card layout—avoid mixing with Icon or Image cards.
Cards with Show More
This layout is ideal for showcasing a large collection of cards in a grid format. It allows users to expand and collapse cards to uncover more information, effectively managing space and ensuring an organized presentation.
Paragraph Types used: Section (Configurable Column Layout) / 1 Column / Cards with Show More / "Behavior" tab / Purple-Black Gradient / Default Padding.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
40 words example: Description provides an informative glimpse. Keep it short and simple. To enable the 'Show more' button, add more than 3 cards in the Edit screen. When visitors click 'Show More/show Less', the behavior will expand/collapse.
Card display style
The grid view is compact, displaying more topics above the fold (as shown above), while the list view provides ample space to present information for users searching for specific requirements (as illustrated below). Regardless of the chosen view, use compelling titles and descriptions to inform and engage your audience.
Paragraph Types used: Section (Configurable Column Layout) / 1 Column / Card with Optional Image / Teaser Card / "Behavior" tab / Blue-Green Gradient / Default Padding.
Card with Links
Experience an innovative approach to guiding visitors and promoting website sections with Card with Links, gaining a strategic advantage over conventional D7 quick links. Positioned as a dedicated section rather than a sidebar, it captures attention without compromising content width. Easily update and maintain all your links in one central location. Take inspiration from slac.stanford.edu and prominently place them near the bottom of your homepage for convenient visitor access.
Paragraph Types used: Section (Configurable Column Layout) / 3 Column / Card with Optional Image / "Behavior" tab / Gray / Default Padding.
Note: Keep the card height short with around 6 links. If there are more than 6 links, include a 'View all resources' link leading to a dedicated detailed page. This ensures a concise user experience while providing additional resources when needed.
For lorem ipsum
- Access adipiscing elit
- Download sit amet
- Enroll in consectetur
- Subscribe to Adipiscing
- Read eiusmod plan
- View all resources
For facility users
- Facility user portal
- Duis aute irure dolor in reprehenderit in voluptate occaecat cupidatat
- SLAC User’s Lorem Ipsum (SULI)
- XYZ-II users
4 Small Card with Optional Image
Utilize Small Card Optional Image to guide and inform site visitors about essential information or promotions you wish to highlight. Take a look at how slac.stanford.edu effectively utilizes these Small Card Optional Image. Regardless of the messaging you choose, this visually appealing option enables visitors to quickly grasp the key attractions at a glance.
Paragraph Types used: Section (Configurable Column Layout) / 4 Column / Card with Optional Image / "Behavior" tab / Yellow / Default Padding.
Note: Maintain uniform card height and achieve visual balance by aligning and organizing cards in rows, carefully controlling word and line counts for a clean and cohesive appearance.
4 Card with Icon
Similar to Small Card Optional Image, the Small Card with Icon offers an effective way to customize each card by incorporating Font Awesome Icons. This enhances the ability to capture visitors’ attention and convey information swiftly.
Paragraph Types used: Section (Configurable Column Layout) / 4 Column / Card with Icon / "Behavior" tab / Blue / Default Padding.
Note: Maintain uniform card height and achieve visual balance by aligning and organizing cards in rows, carefully controlling word and line counts for a clean and cohesive appearance.
Description is short yet informative enough for a click through.
In the Edit screen, click on Font Awesome icon list to search for icons.
'People-group' added to 'fa-' field in Edit screen, displayed on card.
You got an idea in mind. Start typing in 'fa-' field and select from autofill.
