Content Layout Resources Background Anchor Settings

This is the headline, subheadline, and link that sit above your reference cards.  All of these fields are optional.

  1. Text Alignment: Choose to left justify or center align your headline, subheadline, and link.
  2. Headline: Specify  the basic list headline and an SEO tag to wrap the text with.
  3. Subheadline: Specify the basic list subheadline and an SEO tag to wrap the text with.
  4. Link Text: This is the user-facing text for your link.
  5. Action: Choose whether you want your card to be a link, scroll to another component, or open in a modal.
  6. Tooltip: This tooltip appears to the user when hovered over the link.
 
  1. Number of columns: Determine the number of columns used to display your reference cards (anywhere from 2 to 4).
  2. Mobile Layout: Choose whether cards stack vertically on mobile or display in a carousel.  If you have more than 12 resources, mobile layout will automatically be stacked.
  3. Resource type: Choose whether the cards displayed in the Basic List are Reference cards or Entities.
  4. Card style: Select how the reference card(s) will appear in the list.

In the Resources tab, configure how many resources appear in the list and use this tab to reorder if desired.

  1. Reorder and/or delete navigation items using the controls next to each item.  
  2. Click the green + icon at the bottom of the list to add a new item.
  1. Color: Select from 14 color options (white, light silver, light slate, dark silver, black, blue, dark blue, slate, teal, dark slate, dark teal, light silver texture, light slate texture, dark blue texture, dark slate texture, and dark teal texture) or none.  This should be selected even when using an image so that in case the image doesn’t render, the background will default to the color selected.

  2. Background/Foreground Contrast: The Background/Foreground Contrast setting will adjust according to the Background Color that has been selected.  The author can change the setting, but if an inaccessible combination of color and contrast is selected, a warning message will appear. 

    For more granular control, the option to customize these contrast settings also exist per device
  3. Solid Color: Select from five solid color options (white, light gray, medium gray, dark gray, black) or none.  This should be selected even when using a gradient so that in case the gradient does render, the background will default to the solid color selected.
  4. Gradient: Select from twelve gradient or textured flood options and a swatch will appear in the preview pane.  See below for how light and dark text will appear on a gradient background.

1.   Anchor Name: The field where you can assign a unique anchor name to this banner component so it can be linked to from within the page if necessary.

Examples

Basic List has a handful of layout styles baked into the component itself. There are eight Reference Card layout styles and four Entity layout styles.

Entity Style

Basic Display: Profile Image, Name, Title/Company

Do's & Don'ts

When assembling a Basic List it’s important to make sure you images are the same height to keep keep smooth alignment for easy scanning of content. It’s difficult to scan uneven content and it’s also visually jarring for the user.