A responsive, easily customized way to organize your pages into vertically collapsable sections and streamline your content for your visitors.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion allows us to shrink down large chunks content into collapsible, more digestable sections of content. This helps to organize pages into a more stremamlined package as well as provide our visitors a way to access only the parts of that content relevant to them.
This can also help improve the user experience, especially on smaller mobile devices.
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.
By default only one Accordion Item at a time will stay open. When a visitor opens one all others will close. Enabling this feature will instead allow more than one of the Accordion Sections to stay open at a time.
This setting allows the page to scroll to the top of the Accordion Item that the visitor has clicked on to open. This helps keep the content centered within the visitor's view, espeically when an Accordion Item contains a lot of content.
This feature relates to the Scroll to Top of Open Sections setting. This setting indicated to the Accordion that you've placed it in a Partitions section so that it knows to scroll the Partition and not the page itself.
This is the distance from the top of the page where you'd like the Scroll to Top of Open Section to stop. This can help to prevent the content from getting hidden behind something like a Navigation Bar, or other content that might be stuck to the top of the browser.
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 Accordion Item toggle bar background when closed. 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 Accordion Item toggle bar background when opened. You're also provided an option to choose a custom one-off color as well.
These two color pickers allow you to style the text for the Accordion Items. You can choose a text color for both the Collapsed and Open items to complement your Collapsed and Open background settings, above.
You can use these two color pickers to style the icons for your Accordion Items. You can choose a icon color for both the Collapsed and Open items to complement your Collapsed and Open background settings.
This setting removes some of the borders on the Accordion, as well as some rounded corners, and renders the Accordion edge-to-edge with its parent container.
When enabled, this setting will allow you to adjust the rounded corners on the Accordion.
Allows you to opt to hide the icons found in the Accordion toggle bars.
Customize the look of the toggle bars by choosing a set of icons to display inline with the Accordion Item titles.
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.
Handy settings for quickly applying an uppercase text transformation or forced italicization to your text.
Customize the background styling of the content sections within the Accordion Items using this color picker.
This setting allows you to set the padding for the content area in the Accordion Items. In Uniform mode this padding will be set the same for all 6 breakpoints.
Clicking on the small plus icon will give you the ability to adjust the padding independently at each of the 6 responsive breakpoints giving you more granular control.
Here you can choose the units you'd like to use to measure the padding of the Accordion Item's content area.
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 where you'll provide the label text for each individual Accordion Item.
When enabled this individual Accordion Item will start opened when the page loads.
This setting lets you customize which HTML tag is used for each Header. You can choose from the standard Header tags, such as H1, H2, H3, H4, H5 and H6.
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.