List Group

Build versatile and stylish, grouped listings with drag-and-drop ease. Include static, linked or collapsable items for lists, navigation and more.

Examples

Linked Lists

By default the List Group tool's items include links. Among other things a linked list works great as a form of secondary navigation. Here are a couple examples of linked list groups:

I make this look good.

List Group is an extremely versatile tool. It combines both the List Group and Vertical Navigation tools from Foundry v2.

In addition to stylish lists it is also a great way to construct beautiful vertical navigation.

We've even included the ability to have the tool automatically detect if the current page is linked in the list and mark it as active.

Settings

Parent Tool

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Include Base Margin

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

Font

Font

Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.

Font Weight

Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.

Styling

Normal Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of normal items. You're also provided an option to choose a custom one-off color as well.

Normal Border

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of normal items. You're also provided an option to choose a custom one-off color as well.

Normal Text

This color picker allows you to choose the color of the text for the normal items.

Hover Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of items when hovered over. You're also provided an option to choose a custom one-off color as well.

Hover Text

This color picker allows you to choose the color of the text for the items when they're hovered over by your visitors.

Collapse Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the collapse item's background when they're open and active. You're also provided an option to choose a custom one-off color as well.

Parent Text

This color picker allows you to choose the color of the text for the collapse item's parent text when it's active and open.

Child Items Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the collapse child items. You're also provided an option to choose a custom one-off color as well.

Child Text

This color picker allows you to choose the color of the text for the collapse items.

Collapse Icons

Provides a list of preset icon options for collapse items to show whether they're open or closed.

Indent Collapse Child Items

When enabled this setting will add an indentation to the left-side of the child items within the Collapse Section. This can often help with legibility.

Indent Size

If you've enabled the "Indent Collapse Child Items" option above this setting will allow you to adjust the amount of indentation padding that is applied.

Flush

Enabling this feature removes the outer borders and rounded corners to render list group items edge-to-edge in its parent container. This is useful in some case for creating navigation items like those in the sidebar of this page.

Alignment

Alignment (Uniform)

This setting allows you to align the contents of the list group to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small plus icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.

Shadow

Shadow

Used to add a decorative shadow to the List Group. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Hover Shadow

This setting can be used to apply a different shadow, or none at all, the list group when the visitor hovers over it.

Animate Hover Shadow

When enabled a small transition animation, essentially a keyframe animation, will be applied to the list group when the visitor hovers over it. This will give the transistion from normal Shadow style to Hover Shadow style a bit more personality and visual interest.

Advanced

Auto Detect Active Page

Checks to see if the link on this item is the current page. If so this item is marked as Active. This is extremely useful when building vartical navigation elements for your site using the List Group tool.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Child Item

List Item

This is where you'll add your text, as well as customize individual items with badges, icons and more. List Items can be either linked, or non-linked items.

General

Label

The text for your list item will be entered here.

Link

Here you can set the link for the individual List Items. You can link to an internal or external page, or even an anchor on the page.

Disable Link

Removes the link from the item allowing it to be a static list item.

Label Font Size

A list of 6 preset font sizes for the label of the List Item. This font size does not affect the font size of the description, if one is used.

Font Weight

Allows you to adjust the font weight, or how bold the text is, for this List Item. The weight applied here affects just the label text and not the description, if one is used.

Add Description

Lets you add a block of descriptive text for this individual list item.

Icon

Icon Library

Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. By choosing one you're then given the ability to type in the unique identifier for the icon you'd like to use. The font identifiers can be found on the Bootstrap and Font Awesome sites (linked below)

By default the Icon Library setting is set to None, which disables the icon. The icon is only displayable on the left side of the list item as the right side is reserved for Collapse Item toggles and badges.

Vertical Align

Allows you to vertically align the icon, in relationship to this individual item's text and description.

Icon Styling Overrides

Icon Font Size

A list of 6 preset font sizes for the label of the List Item. This font size does not affect the font size of the description, if one is used.

Normal & Hover Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the Icon color. You're also provided an option to choose a custom one-off color as well. By default this setting is configured to Inherit the color of the List Item's text.

You're able to adjust this styling for both the icon in its Normal state as well as when the List Item is hovered over.

Badge

Include Badge

Inserts a Foundry Badge inline with the text of your list item.

Badge Label

The text that will be used within your badge for this list item is entered here.

Vertical Align

Allows you to vertically align the badge, in relationship to this individual item's text and description.

Badge Styling

Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the badge background. You're also provided an option to choose a custom one-off color as well.

Badge Text

This color picker allows you to change the text color for your inline Badge label.

Gradient Overlay

We provide a quick way to add a subtle light gradient over the Badge. This simply includes a simple translucent white gradient over the button to give it a bit more depth.

Pill-Shaped

This setting allows you to give a nice rounded pill-like shape to the Badge.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Child Item

Collapse Item

A Collapse Item is akin to a small accordion like item that resides within the List Group. Most often Collapse Items will be used when creating manually curated navigation elements using the List Group tool. The child items within the Collapse Child Item are List Items.

General

Label

The text for your list item will be entered here.

Start Open

By default Collapse Items start closed, hiding their Child Items from view. Enabling this settings will cause this Collapse Item to start opened when the page loads.

Label Font Size

A list of 6 preset font sizes for the label of the List Item. This font size does not affect the font size of the description, if one is used.

Font Weight

Allows you to adjust the font weight, or how bold the text is, for this List Item. The weight applied here affects just the label text and not the description, if one is used.

Icon

Icon Library

Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. By choosing one you're then given the ability to type in the unique identifier for the icon you'd like to use. The font identifiers can be found on the Bootstrap and Font Awesome sites (linked below)

By default the Icon Library setting is set to None, which disables the icon. The icon is only displayable on the left side of the list item as the right side is reserved for Collapse Item toggles and badges.

Icon Styling Overrides

Icon Font Size

A list of 6 preset font sizes for the label of the List Item. This font size does not affect the font size of the description, if one is used.

Normal & Hover Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the Icon color. You're also provided an option to choose a custom one-off color as well. By default this setting is configured to Inherit the color of the List Item's text.

You're able to adjust this styling for both the icon in its Normal state as well as when the List Item is hovered over.

Badge

Include Badge

Inserts a Foundry Badge inline with the text of your list item.

Badge Label

The text that will be used within your badge for this list item is entered here.

Vertical Align

Allows you to vertically align the badge, in relationship to this individual item's text and description.

Badge Styling

Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the badge background. You're also provided an option to choose a custom one-off color as well.

Badge Text

This color picker allows you to change the text color for your inline Badge label.

Gradient Overlay

We provide a quick way to add a subtle light gradient over the Badge. This simply includes a simple translucent white gradient over the button to give it a bit more depth.

Pill-Shaped

This setting allows you to give a nice rounded pill-like shape to the Badge.

Advanced

Mark Active Page

This setting tells the List Group to run a check of the URLs that are linked to the child items within the Collapse Child Item. If one or more of these items links to the current page then it will be marked as active. If a Collapse Item has an active item within it that Collapse Item is opened.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.