Skip to main content Skip to secondary navigation

Card Paragraph

Main content start

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.

 

Superhead

Headline: This is an example card

Description. This can be long and include bold, italiclinks

Starting in version 4.0, the Card Paragraph also supports bulleted and numbered lists.

Headline: Example Card with just text

Lorem ipsum dolor sit amet consectetur adipiscing elit fames quis mollis elementum, euismod volutpat nascetur ridiculus suspendisse netus posuere vel auctor.

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.

Button style

Action link style

Screenshot illustrating how to add Card

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 icon

Banner Paragraph

The Banner paragraph is a great way to add visual impact to a page.
Lists Paragraph Icon

Lists Paragraph

The Lists Paragraph provides the ability to dynamically generate a list of content.
Teaser Paragraph Icon

Teaser Paragraph

The Teaser Paragraph allows you to easily highlight other content from your site on a page