Build brilliant lists using dot leaders for restaurant menus, table of contents and much more.
Here' we've used a Columns tool with a Dot Leaders in each to create a simple restaurant menu.
The Dot Leaders tool is a great way to create easy to read menus, store listings, and more. It offers a vast array of built-in controls to help style it to match the look and feel of the rest of your site and call attention to individual items as well.
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.
The leader is the spacing between the left label and the right. We've included several different leader styles. You can choose from the following leader types.
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.
In the Dot Leaders tool you can adjust the weight of three different items independently. The Left label, the Right label and the Leaders. This can give you some varience.
Enabling the Custom Row Spacing feature allows you to customize the height between rows withing the Dot Leaders tool.
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 Left Label. 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 Right Label. 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 Dot Leaders. 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 Badges if you're using the Badge styling for the Right Label. You're also provided an option to choose a custom one-off color as well.
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.
This is the label content for left-hand side of this item in the Dot Leaders list.
Allows you to force the Left Label in this individual list item to be styled using an italic font.
When enabled you can add a link to the Left Label for this individual list item.
This is the label content for right-hand side of this item in the Dot Leaders list.
Enabling this setting will add the Foundry Badge styling to the Right Label for this individual item.
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 styling the Badge background. You're also provided a a option to choose a custom one-off color as well.
Use this color picker to set the color of the text within the Badge tool. Allows you to set a complimentary color that works well with your Badge background color.
Allows you to force the Right Label in this individual list item to be styled using an italic font.
When enabled you can add a link to the Right Label for this individual list item.
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.