Accordion
A responsive, easily customized way to organize your pages into collapsable sections and streamline your content for your visitors.
- Title bar text alignment
- Use preset, custom colors or gradients
- Adjust content padding
- Easily re-order accordion items with drag-and-drop ease
- Add an icon to individual title bars
- Assign Typeface fonts for Accordion Title Bar text
- Set the Accordion Items' title bar text size at each different breakpoint
- Use rounded or squared corners
- Specify which items start opened
- Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.
Example
Using Accordion
Accordion Title
Font v2
Allows you to choose between using the Control Center's Base Font choice or, as of the Foundry v2 update, you can assign a Typeface font to your Accordion Title's text. If you opt to use a Typeface based font you can also adjust the font weight here as well.
Font Size
Used to set the text size of the Accordion Items’ title bar. Accordion lets you set the title bar’s text size at each of the three breakpoints (Mobile, Tablet and Desktop). This allows the title to change sizes based on your visitor’s browser size or device.
Alignment
Allows you to set the justification of the Accordion Items’ title bar text. You can set the alignment to Left, Center or Right. This affects all title bars within the Accordion stack.
Title Background v2
Set the color of the title bar to match your site. Use one of Foundry’s color swatch presets or make use of custom color pickers to style the title bar. As of Foundry v2 you can also opt to choose to use a custom gradient for the title background.
Title Text
Use a color picker to set the Accordion Item’s title bar text color.
Icon Alignment
When using icons on your individual Accordion items you can choose here whether you wish the icons to show up on the left- or right-hand side of the Accordion item.
Accordion Content
Text & Background
Use two separate color pickers to set the content background and text colors for all Accordion Items.
Content Padding
Set a consistent padding around your Accordion Items’ content area to give your content room to breathe.
General
Remove Base Margin v2
Allows you to disable the preset standard spacing that is applied to the bottom of the Accordion stack.
Override Rounded Corners v2
Allows you to set custom rounding for your Accordion Title bars.
Remove Rounded Corners
Used to remove the smooth rounded corners from the Accordion Items.
Spacing
Adjust the amount of space between each of your Accordion Items to achieve a different look and feel.
Accordion Item
Each Accordion Item has the ability to override some of the main Accordion stack’s features allowing you to customize them all individually to meet your specific needs. Here’s a look at the settings for the individual Accordion Item child stacks.
Start Open
Setup one, or more, of your Accordion Items to be open when the page loads, allowing your visitor to see its content right away without needing to open that particular Accordion Item.
Icon
Include an icon in an individual Accordion Item’s title bar. Choose from over 300 different icons to help customize your Accordion.
Override Colors
Make an individual Accordion Item stand out. You can adjust the title bar text and background and well as the content text and background to set one of your Accordion Items apart from the rest.
Override Colors (Gradient) v2
Allows you to set custom colors for the Accordion Item using a gradient for the background.
Keep content simple
Accordions are great for hiding away a lot of content to keep your pages clean and tidy. But remember that we want to keep our Accordion content simple.
Complex stacks like sliders and reveal animations won't work work inside of an Accordion item. The more complicated stacks need to see the page during the loading process so they know how much room they have available to them. If they're hidden in an Accordion item they believe they have zero available space.