Features

  • Opt for horizontal or vertical grouping
  • Add normal buttons or dropdown buttons
  • Choose that horizontal button groups go vertical at Mobile breakpoint
  • Choose preset or custom styling
  • Add tooltips to your buttons and dropdowns*

*Note: You must enable Tooltips in the Theme variations for the Foundry theme to use Tooltips on a page.


Example

The Button Group stack example we’re showing here is a horizontal grouping. You can also choose to use a vertical grouping. We’ve set this horizontal button group to re-orient itself to a vertical group when displayed at the Mobile breakpoint.


Using Button Group

Style

Orientation
Choose whether you’d like to have your Button Group appear as a Horizontal or Vertical grouping. If you choose Horizontal you can opt to have the Button Group switch to a vertical grouping at the Mobile breakpoint to make sure it fits properly on smaller displays.

Alignment
Allows you to set the justification of the Button itself. You can set the alignment to Left, Center or Right.

Button Size
Choose the size of your button. You can opt of a Small, Standard or Large button size.

  • Please Note: Due to the way the sizing is applied you will not notice a change in size in Edit Mode, but the size will be applied in Previews Mode and when published.

Button (Child Stack)

Button Text
Insert your custom text that will appear on your button.

Link
Provide a link to a URL, whether it be an internal page or an external link. You can also set the following tags in the RapidWeaver link dialog:

  • Class
  • ID
  • Rel
  • Target

Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Modal (Child Stack)

Button Text
Insert your custom text that will appear on your button.

Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Enable Close X
Include a small X in the upper right corner of the modal dialog that allows the visitor to close the modal.

Size
Choose from three different modal dialog sizes. Small, Standard and Large.

Include...
Choose whether to add a header or footer to your modal dialog popup. The header can contain custom text. The footer can contain either text or a button that allows the visitor to close the modal. You can also customize the close button’s text as well as its alignment.

Title Alignment
Allows you to set the justification of the Modal’s header text. You can set the alignment to Left, Center or Right.

Animate
Enables a simple animation that makes the modal dialog slide down from the top of the browser window.

Collapse Modal
Allows you to collapse the drop zone for the modal content in Edit Mode, freeing up space to more easily work on building your pages and rearranging your stacks within them.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Dropdown (Child Stack)

Label
Insert your custom text that will appear on your button for the dropdown.

Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Collapse
Enable this feature to free up some space in Edit Mode by hiding the dropdown’s content from view until you need to edit it again. Has no effect on the published page.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Dropdown Link (Child Stack)

The Dropdown Link child stack is a child stack inside the Dropdown stack itself.

Label
Insert your custom text that will appear on your link for the dropdown link.

Disabled
Set the link to be un-clickable and greyed out.

Dropdown Header (Child Stack)

The Dropdown Header child stack is a child stack inside the Dropdown stack itself.

Header
Insert your custom text that will appear inside of your Dropdown. This text is not clickable and has a smaller font size. Used to set apart different links within the dropdown for organization.

Dropdown Divider (Child Stack)

The Dropdown Divider child stack is a child stack inside the Dropdown stack itself. It has no options itself. It too can be used to set apart different links within the dropdown for organization.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2018 Elixir Graphics | Contact Us