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:
These examples mix our normal child items with collapsible sections. This makes for a great way to create custom vertical navigation elements, or simply build versatile listings.
In one example we've even added a link to an item that points to this page. Using the List Group's ability to mark the active page it opens the collapsed section to show the active element.
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.
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.
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.
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.
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.
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.
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.
This color picker allows you to choose the color of the text for the normal items.
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.
This color picker allows you to choose the color of the text for the items when they're hovered over by your visitors.
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.
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.
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.
This color picker allows you to choose the color of the text for the collapse items.
Provides a list of preset icon options for collapse items to show whether they're open or closed.
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.
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.
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.
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.
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.
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.
This setting can be used to apply a different shadow, or none at all, the list group when the visitor hovers over it.
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.
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.
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.
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.
The text for your list item will be entered here.
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.
Removes the link from the item allowing it to be a static list item.
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.
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.
Lets you add a block of descriptive text for this individual list item.
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.
Allows you to vertically align the icon, in relationship to this individual item's text and description.
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.
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.
Inserts a Foundry Badge inline with the text of your list item.
The text that will be used within your badge for this list item is entered here.
Allows you to vertically align the badge, in relationship to this individual item's text and description.
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.
This color picker allows you to change the text color for your inline Badge label.
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.
This setting allows you to give a nice rounded pill-like shape to the Badge.
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.
This field allows you to replace the default HTML Comment with your own text.
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.
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.
The text for your list item will be entered here.
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.
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.
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.
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.
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.
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.
Inserts a Foundry Badge inline with the text of your list item.
The text that will be used within your badge for this list item is entered here.
Allows you to vertically align the badge, in relationship to this individual item's text and description.
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.
This color picker allows you to change the text color for your inline Badge label.
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.
This setting allows you to give a nice rounded pill-like shape to the Badge.
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.
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.