Card Paragraph
The Card Paragraph is a great way to highlight information, display calls to action or provide prominent links to other pages or sites.
The Card Paragraph provides you the option to add images and text, with a visual style that is offset from other content.
Card-style displays are used elsewhere on Stanford Sites. There is a card style available in the text editor for creating a drop-shadow border around text, and there are card displays that are available as part of the Lists Paragraph and Teaser Paragraph. This guide is focused on the Card Paragraph.
Headline: This is an example card
Description. This can be long and include bold, italic, links.
Starting in version 4.0, the Card Paragraph also supports bulleted and numbered lists.
Creating a Card
A Card is made up of four main parts. All fields are optional, but we strongly recommend using the Headline for accessibility.
Image or Video
Cards can contain an image or video. Images in cards are displayed at a ratio of 2:1.
Text content
- Superhead. The superhead is displayed on top of the Headline. To support readability, we recommend Superhead be 20 characters or fewer.
- Headline. To support readability, we recommend Headline be 70 characters or fewer.
- Description. This is usually some text that provides more information about the headline or the link. It supports minimal HTML.
Link
The link field uses the same pattern as other Link fields on Stanford Sites. It is comprised of two elements:
- URL. A link to an internal page or an external page. To link to an internal page, just start typing the name of the page you wish to link to. To link to an external page, enter the entire URL, starting with "https://." This field does not support
mailto:links. - Link Text. The text you wish to display for your link.
Styles/Behaviors
You may select a button style or an action link style. The button style is the default style.
Best Practices
The Card Paragraph adjusts to the height of your text content. This can result in an "organic edge," with cards of varying heights. This supports readability. We do not currently have a display for cards of equal heights for any of our card displays.
We do not support additional heading or text style options within the Card Paragraph. This is to preserve the experience of site-visitors using assistive technology; as well as the scanability of content for sighted visitors. If you require more text style options we recommend you use a Text Area Paragraph.
Related Topics
Banner Paragraph
The Banner paragraph is a great way to add visual impact to a page.
Lists Paragraph
The Lists Paragraph provides the ability to dynamically generate a list of content.