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.
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.
- 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.
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
- Link Text. The text you wish to display for your link.
You may select a button style or an action link style. The button style is the default style.
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.