Striped List

Base Foundry stack | New in Foundry v2

Create good looking text lists for your pages. Stripe the lists in your own custom color combinations and include badges or icons as well.

  • Create stylized text lists
  • Add text badges to list items
  • Enable description text to accompany labels on a per-item basis
  • Stipe your lists with custom colors
  • Include custom icons with list items
  • Assign Typeface fonts for labels and description text

Example

Using Striped List v2

Style

Alignment
Choose whether your list items are aligned to the left, center or right. By clicking the small plus symbol (+) you're able to set a different alignment for the list items at each of the three breakpoints.

Padding
There's a bit of padding applied to each list item. You're able to set a uniform padding around each item using this control. By clicking the small plus symbol (+) you're given the ability to adjust the padding for your list items on each of the four sides individually.

Background Type
Allows you to choose between using a solid color background for your striped list items or using a gradient.

Background Colors
Allows you to set the background colors for you list items. When the background type is set to Solid you'll be able to set a different solid color for the odd and even items. When set to gradient mode you'll have a top and bottom color for each items gradient for the odd and even items.

Text Colors
Allows you to set the color of the text for your items. One color for your odd items and a different one for your even items.

Hover Colors
This setting allows you to pick your colors for your items when they're hovered over. This lets you set the background and the text colors. If you're using a gradient background style you'll be given extra color pickers for setting the top and bottom colors.

Font

Label Font
You can opt to use either the Control Center's Base Font for your labels or assign the labels to use one of the Typeface stack's fonts.

Label Weight
Allows you to adjust the font weight of the label. Be sure if you're using Typeface font assignments that you select a font weight that matches the font weight you've loaded for your font in the Typeface stack.

Custom Font Size
When enabled you're given the ability to adjust the label's font size at each of the three breakpoints.

Description Font
You can opt to use either the Control Center's Base Font for your description text or assign the description text to use one of the Typeface stack's fonts.

Description Weight
Allows you to adjust the font weight of the description text. Be sure if you're using Typeface font assignments that you select a font weight that matches the font weight you've loaded for your font in the Typeface stack.

Child Stack

Striped List Item

Label
Input your text here for your list item's label.

Link
List items in the Striped List stack are linked elements. Use this control to set the link of the individual list item.

Add Description
Enabling this feature allows you to add a description to your list item underneath the label. When enabled you'll be given text field to enter your description as well as a control for setting the indentation of the description if you like.

Add Icon
This feature lets you add an icon to your individual list items.

Badge
Enabled this feature to add a text badge after your label text inside your individual list items. When enabled you'll be able to enter your badge text as well as style it to your liking.

Insight
Simple

The Striped List stack is great for listing items out and linking to them within your content. But is it also really nice for creating simple, easy-to-use vertical navigation items as well.

Use it to create a manually curated list of links for your site that can easily be placed in a smaller column next to your main content.