List Group

Base Foundry stack

Create versatile and stylish, grouped listing with drag-and-drop ease. Include linked, non-linked, or combination list items.

  • Drag and drop arrangement
  • Set list items alignment
  • Opt to include an icon with list items
  • Three types of list items
  • Customize list border color
  • Style with presets or color pickers
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Using List Group

General

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.

Style

Alignment
Allows you to set the justification of the List Group content. You can set the alignment to Left, Center or Right.

As of Foundry v2 you can also choose to set a different alignment for your list group at each of the three responsive breakpoints. v2

Custom Border Color
You can opt to customize the color of the List Group’s border using the RapidWeaver color picker.

Content

The List Group stack allows you to insert three different types of content containers within it. You can choose from a List Group Item, List Group Link or a List Group Combo Item. These are chosen by clicking the small blue plus icon at the bottom of the List Group stack. These three child stacks, and their features are listed below:

Child Stack

List Group Item

The List Group Item child stack is a static, non-clickable list item that is specially styled.

Style
Customize the look of individual List Group items by choosing a special Foundry List Group preset color or defining custom colors for the background, text and icon.

Disabled
Lets you grey out an item in the list making it appear to be disabled.

Include Icon
Add an icon to your List Group Item. You can choose from over 300 different icons.

Child Stack

List Group Link

The List Group Link child stack is a clickable list item that is specially styled.

Link
Allows you to add a link to an internal page or an external site.

Style
Customize the look of individual List Group Link by choosing a special Foundry List Group preset color or defining custom colors for the background, text, active background and active text, and icon.

Highlight as Active
Lets you highlight a List Group Link in the list making it appear to be the current, or active item.

Disabled
Lets you grey out an item in the list making it appear to be disabled.

Include Icon
Add an icon to your List Group Link. You can choose from over 300 different icons.

Child Stack

List Group Combo Item

The List Group Combo Item child stack is a clickable list item that is specially styled. It not only has a label like the other two but also a block of text as well.

Link
Allows you to add a link to an internal page or an external site.

Style
Customize the look of individual List Group Combo Item by choosing a special Foundry List Group preset color or defining custom colors for the background, text, active background and active text.

Highlight as Active
Lets you highlight a List Group Combo Item in the list making it appear to be the current, or active item.

Disabled
Lets you grey out an item in the list making it appear to be disabled.