Creating lists of all types is a breeze with Foundry's List tool. Build bulleted lists, linked lists and more all in one place.
Creating lists is a common practice for site designs to help us convey information to our visitors. Here we've created a couple of different static lists with bullet points.
Among other things a linked list works great as a form of secondary navigation. Add it to a narrow column as list of links in a sidebar or footer section, or use the inline settings to create a horizontal breadcrumb trail linked list of pages. Here are a couple examples of linked lists:
We've fused three of our most used tools from Foundry v2 into one powerful package. This gives you more flexibility with your designs. You can mix and match linked and non-linked items, as well as create manually curated simple navigation elements, and much more.
We've even built in the ability to create breadcrumb like navigation trails for your site using the inline mode.
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 you can choose from a large list of bullet point types for your list. You can use bullets whether the list consists of static or linked items.
This setting allows you to specify the position of the bullets. Inside places the bullet points themselves within the list group, while the outside setting places it on the outside of the list.
Adjusts the padding for the left side of the list items. You can choose from Foundry's preset padding values, the default CSS list indent or none at all.
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.
Here you can customize the font size for the this tool. You're able to choose from a few options. You can have the labels inherit the Base Font sizing or choose from one of the two custom one-off options -- Uniform or Per-Breakpoint.
Allows you to specify the unit of measure for sizing your font. The default is Root EM (rem).
Enable this setting to manually override the line height for this tool to increase spacing between the list items.
This setting allows you to align the button 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.
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 list items as a whole (does not affect links). 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 linked items in the list. You're also provided an option to choose a custom one-off color as well.
Defaults to the Inherit option which pulls the color for links from the Control Center.
You can choose different styling options for links when they are hovered over. By default the opacity option is selected, which decreases the opacity of the links when they're hovered over. You can also choose to use one of the Foundry preset color palette options or choose a custom one-off color using the color picker.
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 icons used in the individual list items. You're also provided an option to choose a custom one-off color as well.
Enabling this feature creates a horizontal list instead of the traditional vertical list. This can be used with static and / or linked items.
When using the Inline Items feature you'll be given the ablity to opt to enable breadcrumb mode, which adds dividers between each of the horizontally ordered items.
When enabled your lists will receive alternating colored backgrounds. This can sometimes aid readability for your visitors with large listes.
Here you're given two color pickers for choosing the background styling for both the Odd and Even rows within your list.
This setting allows you to adjust the text color for both the Odd and Even rows within your list.
Lets you adjust the padding around the text in your striped list. This also increases legibility for your list items. You can choose from Foundry's padding presets, choose a custom value that is applied at all 6 breakpoints, or turn the padding off altogether.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
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.
List Items are static, non-linked text within the overall list. This is where you'll add your text, as well as customize individual items with badges, icons and more.
The text for your list item will be entered here.
Enabling this feature will bold this one individual list item within your overall list.
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 then choose one of the preset icon choices or choose Custom and 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.
By default the Icon Library setting is set to None, which disables the icon.
This setting gives you the option of overriding this list item icon color, from the Parent Tool, using a color picker.
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 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.
This setting allows you to give a nice rounded pill-like shape to the Badge.
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.
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.
Linked List Items can be linked to pages elsewhere on your site, external sites, or anchors on the page. This child item is where you'll add your text, link, customize individual items with badges, icons and more.
The text for your list item will be entered here.
Enabling this feature will bold this one individual list item within your overall list.
Lets you add a block of descriptive text for this individual list item.
Allows you to provide a link to a URL, whether it be an internal page or an external link, or an anchor on the page.
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 then choose one of the preset icon choices or choose Custom and 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.
By default the Icon Library setting is set to None, which disables the icon.
This setting gives you the option of overriding this list item icon color, from the Parent Tool, using a color picker.
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 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.
This setting allows you to give a nice rounded pill-like shape to the Badge.
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.
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 small divider line that you can add between list items for delineation.
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 divider line. You're also provided an option to choose a custom one-off color as well.
Adjusts the height, or thickness, of the divider line.
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.