Definition List

This new tool allows you to pair terms with definitions in a nice stylized list. This is great for documentation, recipies, menus, table of contents and much more.

Example

This tool let's us build lists of related content. A term on the left, with its description or definition on the right. Here we've built a quick definition list using some Elixir products and their descriptions. We've also include links using the Button tool and its link styling.

Gravitate

Create advanced, scroll based animations for your site. Set start and end values for your animation and Gravitate keyframes everything in-between based off of the scrolling of your site.

Flux

Grid-based layouts that can be as simple or as advanced as you like. Use your imagination to build interlocking, or overlaping content for next level designs.

Orbit

Powerful, responsive sliders at your fingertips. Include images, videos or other stacks in modern, responsive slideshows.

6_athena

You are stronger than you believe. You have greater powers than you know.

Bringing meaning to our words is a powerful thing. Helping your visitors understand your content is equally as powerful. The Definition List tool helps you to convey information in an easy to read manner. It's versatile enough to be used for more than just simple definitons, too.

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.

Labels

Labels 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 styling the term label text. You're also provided an option to choose a custom one-off color as well.

Labels 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.

Font Sizing

Here you can customize the font size for the list's labels. 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.

Property

Handy settings for quickly applying an uppercase text transformation or forced italicization to your Caption.

Row Padding

Padding

You have a great deal of control over the styling of the list's rows when it comes to spacing. You can adjust the padding of the rows uniformly across all 6 breakpoint, or click the small plus button to fine tune it at each individual breakpoint. In either case you can adjust the top, bottom, left and right padding independently.

Padding Units

Choose from Pixels (px) or Root EM (rem) that is applied to the padding values you set above. The default units used are Root EM (rem).

Sizing

Width

This setting allows us to adjust the width of the description, or definition area of our definitions list. The width here is measured in the same column units as the Columns tool. The total width of the tool is 12 units. The difference between the value you set here, and the total 12 units, will be the automatic width of the terms area.

This means if you set a width of 9 here in the Width setting, the remaining 3 units would go toward the width of the terms.

The default value for the width is 9.

Mobile Display

Stack Below

Allows you to choose at which breakpoint the term and definition stack on top of one another. This helps make sure things display nicely on mobile devices. The default stacking breakpoint is Medium.

Striped Rows

Striped Rows

When enabled the rows will get alternating striped rows. You'll be given two settings for the striped row backgrounds. One for odds and one for evens.

These two settings allow 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 Caption text. You're also provided an option to choose a custom one-off color as well.

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

Label

Label

You'll use this field to enter the term label for this individual item. The content for the item, the definition information, will be added as other child items in the Edit Mode drop zone. You can add images, paragraphs, buttons, and much, much more.

Style Override

By default the Style Override is set to inherit, meaning it will take on the label styling from the parent tool. You can opt to chage this indiviual item's term label styling by selecting one of the Foundry palette presets or setting your own custom color.

Truncate Labels in Tight Layouts

When a label would exceed the width it has been allowed it will instead truncate itself and add an ellipsis at the end of the truncated text. This is helpful for content that might be larger in tight layouts.

Alignment

By default we've enabled the non-uniform settings for Definition List child items as well as set the per-breakpoint alignment options fo conform to the default Stack Below settings found in the parent tool.

Alignment (Uniform)

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.

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.

Badge

Include Badge

When enabled a Badge will be included inline with the term label within the list.

Badge Label

This is the text that will be included within the Badge if you've opted to enable it for this list item.

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 styling the inline Badge background text. You're also provided an option to choose a custom one-off color as well.

Badge Text

Use this color picker to set the color of the text within the Badge. Allows you to set a complimentary color that works well with your Badge background color.

Pill-Shaped

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

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.

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.