social spotifysocial threadssocial blueskypauseplayhomemenu searchsocial instagramsocial youtubesocial facebooksocial linkedinsocial twitter xclosesearchright arrow

Marketing and Communications

Unit Content – Link List

The Unit Content – Link List component can stack multiple groups of items with each having a heading, brief description and optional image. These list items can also contain linkable headlines and links in the descriptions plus up to four additional link items that display in a row below the description.

On This Page

Examples

  • 400x400 placeholder image

    Example Heading

    Fusce venenatis felis eget tellus elementum placerat. Cras tincidunt nisi id purus viverra varius. Integer tempus ut mauris faucibus elementum. Sed rhoncus ante enim. Donec porttitor tellus sem, et luctus ex dignissim non. 

Link List with one group, small image, serif headline

Link List with Two Groups, Medium Images, Sans

  • 800 x 800 placeholder image

    Example Heading

    Lorem ipsum dolor sit amet consectetur adipisicing elit Ipsam officia fugiat veniam sint cumque, neque voluptate praesentium sapiente quis obcaecati, cum numquam accusantium molestiae veritatis recusandae ipsum eveniet unde labore animi commodi iste nihil rem illo quibusdam. Ipsum, iure ducimus!

Link List with one groups, large image, sans headline

Link List with Two Groups, without Images, Sans

  • 1

    Example Heading 1

    Fusce venenatis felis eget tellus elementum placerat. Cras tincidunt nisi id purus viverra varius. Integer tempus ut mauris faucibus elementum. Sed rhoncus ante enim. Donec porttitor tellus sem, et luctus ex dignissim non. 

  • 2

    Example Heading 2

    Fusce venenatis felis eget tellus elementum placerat. Cras tincidunt nisi id purus viverra varius. Integer tempus ut mauris faucibus elementum. Sed rhoncus ante enim. Donec porttitor tellus sem, et luctus ex dignissim non. 

  • 3

    Example Heading 3

    Fusce venenatis felis eget tellus elementum placerat. Cras tincidunt nisi id purus viverra varius. Integer tempus ut mauris faucibus elementum. Sed rhoncus ante enim. Donec porttitor tellus sem, et luctus ex dignissim non. 

  • Best Practices

    Heading Example 4

    Fusce venenatis felis eget tellus elementum placerat. Cras tincidunt nisi id purus viverra varius. Integer tempus ut mauris faucibus elementum. Sed rhoncus ante enim. Donec porttitor tellus sem, et luctus ex dignissim non. 

  • Standard

    Example Heading 5

    Fusce venenatis felis eget tellus elementum placerat. Cras tincidunt nisi id purus viverra varius. Integer tempus ut mauris faucibus elementum. Sed rhoncus ante enim. Donec porttitor tellus sem, et luctus ex dignissim non. 

  • Caution

    Example Heading 6

    Fusce venenatis felis eget tellus elementum placerat. Cras tincidunt nisi id purus viverra varius. Integer tempus ut mauris faucibus elementum. Sed rhoncus ante enim. Donec porttitor tellus sem, et luctus ex dignissim non. 

Link List with Six Groups, Small Images, without Links

Settings & Features

  • Square image can be small (400 x 400 pixels), or medium or large sized (800 x 800 pixels)
  • Headings:
    • Specify size of H3 or H4 to maintain page hierarchy
    • Choose serif or sans serif styling
    • Character limit of 50 (including spaces)
    • Can be linked to another web page
  • Descriptive paragraph text can include linking text
  • Action link items:
    • Add up to 4 links in a row
    • Character limit of 50 (including spaces)
  • Element can be static or animated
  • Each item appears in a row
  • Add an unlimited number of rows to a link list

Working with Content

Good for:

  • A visually appealing way to present a large group or series of items
  • Making lists or directories featuring related items
  • Elevating text on less prominent pages
  • Serving as a menu to related pages
  • Lists that don’t need to feature images

Avoid if:

  • Rows will have a mix of icons/photos/illustrations
  • Some items will have images, and some will not

Best Practices

  • Use the descriptive text to add context for site users.
  • Make description text length similar in all rows of the same list.
  • If using action items, use for all rows or none.
  • If link list item leads to another web page, use the same image for the link list image and the banner of the destination page.
  • Lists can be stacked on top of each other with header or descriptions in between.
  • Be sure all images work as square when cropped.

Usability & Guidelines

  • Always include descriptive alt text for images for accessibility.

Alternative Options

If link lists are too long for the page or won’t work with source content, consider another type of component for better usability, accessibility and maintenance.

Content Need Recommended Component
Small link list of 2-3 items Card Grid
Link list of 1 item Highlight Box

Marketing & Communications

Toolbox
1300 Pickens
1300 Pickens Street
Columbia, SC 29201

803-777-8161