Linked List

Base Foundry stack

Build both vertical and horizontal lists consisting of links, and customize them with color pickers and over 300 different icons.

  • Vertical or horizontal lists
  • Set list alignment
  • Add icons to individual list items
  • Set overall link colors
  • Set link color on individual list items
  • Add plain text descriptions to individual Linked List items
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

We’ve included a both horizontal and vertical lists below. Some examples incorporate icons and customize the coloring of the links with the built-in color pickers. We’ve used the Linked List stack on our Documentation pages to create nice vertical links to each of the different Foundry stacks as well.

Using Linked List

General

Orientation
Allows you to set your linked list to be vertical or horizontal.

Font v2
You can choose to use the Control Center’s font settings for your or opt to select one of the Typeface stack’s font options. For more information on using Typeface be sure to read the documentation page for it here.

Font Weight v2
Choose the font weight you wish to use for displaying your Label text. If using Typeface be sure you are loading the associated weight for your Typeface font.

Custom Font Sizes v2
Enabling this feature allows you to set a custom font size for your list at each of the three different responsive breakpoints.

Style

Alignment
Allows you to set the justification of your Linked List links. You can set the alignment to Left, Center or Right. You may also opt to set the alignment differently at each of the three breakpoints.

Custom Line Spacing v2
Allows you to add spacing to the bottom of the list items. When enabled you'll set a margin to be added to each list item at each of the three responsive breakpoints.

Remove Text Decoration v2
When enabled the text decoration that is applied to links, and configured in the main Foundry Control Center stack, is set to none.

Links

Custom Link Color
The Linked List stack uses the Control Center’s link color for its links. You can override this for your list by using the Custom Link Color feature.

Child Stack

Linked List Item

Label
Customize each Linked List item with its own label.

Link
Set a link to an internal page or an external site. This is done for each Linked List item individually.

Display as Disabled
Lets you grey out an item in the list and make that item unclickable.

Style
Customize the look of individual Linked List items by choosing a Foundry preset color swatch or defining a custom color for a particular item’s color.

Add Description
Allows you to add a plain text description to individual linked list items.

Remove Base Margin
When the Add Description feature is used this setting allows you to toggle the description's base margin on or off.

Description Indent
When the Add Description setting is enabled, this setting allows you to indent the description from the left-hand side.

Icon
Add an icon to individual Linked List items. Choose from over 300 different icons.

Badge v2
When turned on you are able to add badge text to the end of your linked list item. You can also style it using preset brand colors or a custom color picker.

Badge Style v2
Set the color of the Linked List to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Pill Shaped v2
When enabled the badge will have an oblong, rounded shape instead of a boxier design.

Insight
Horizontal Display

Using the Inline Items option of the Link list stack allows us to create a horizontally oriented list of links.