Stanford
Stanford Sites User Guide

Card Paragraph

The Card Paragraph is a great way to highlight information, display a call 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. 

Note: 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.

Create a Card

Screenshot illustrating how to add 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 have an aspect ratio of 2:1 (for example, 1200px by 600px, 1400px by 700px, etc.) If you want to control the appearance of the photo, you can crop the image before adding it to your site.

To add an image or video to a card, click Add Media. You can select an image or video from your media library or add a new one.

Please note:

  • Images or videos in the Card Paragraph do not appear in mobile.

Text content

These fields are all optional.

  • 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 the 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. You may add links, button styling, list styling, italics, and bold text in this area.

Link

One of the main uses for the Card Paragraph is to provide a call to action. 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 and select it from the list. To link to an external page, enter the entire URL, starting with "https://."  Note: this field does not support mailto: links.
  • Link Text. The text for the button/action link. Add text that describes the purpose of following the link. 

Styles/Behaviors

The following are settings that control the appearance and behavior of a Card.

Heading Level

By default, the Headline on a Card are set to Heading 2 (h2). The following are cases where you would want to change that behavior in the Styles/Behaviors section:

  • If the Card is part of content below an already existing Header 2 (h2) you should select Heading 3 (h3)
  • If the Card is part of content below an already existing Header 3 (h3) you should select Heading 4 (h4)
  • If the Card has only a headline and no subhead, description, and/or button, you should select Splash Text

Please note: heading levels are important for the accessibility and readability of your content. The heading level should only be changed to improve the structure of your page, never for size/style reasons.

Visually Hide Heading

Sometimes the link, image or text on the card provides context about the content on the card. Since this content is not easily navigable by assistive technologies or search engines, it may be useful to provide a heading. In those cases, enter headline text as you normally would, select the proper heading level, and choose the option to Visually Hide Heading. This will create the heading option (h2, h3, h4) that you have selected, but it will not appear as part of the visual presentation of the page.

Link Style

The Card Paragraph supports two different appearances for the Link, which you can select from the Link Style drop-down.

Button

Action Link

The button style is the default style for the Card Paragraph.

Subtheme settings

If you have a subtheme on Stanford Sites, this section might contain other options for Cards.

Card paragraph design

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. Stanford Sites does not currently support cards of equal heights for any of our card displays.

We do not support more complex text styles, tables, or additional images within the Card Paragraph. If you require more style options we recommend you use a Text Area Paragraph.

Related Topics