Display

Thunder Pack addon stack

Develop gorgeous sections of content with their own individual toppers, labels, icons and more. Make your content stand out with Display’s styling and add depth with its stunning soft shadows.

  • Self contained sections of content with a large vareity of styling options.
  • Use an image or a drop zone for the Display topper.
  • Drop zone toppers can contain other stacks.
  • Add collapsable sections to the stack, which are expanded when the user clicks a button.
  • Set effects based on when the visitor hovers over the stack.
  • Add labels and icons to the Display stack's topper.
  • Adjust content padding.
  • Adjust drop shadows, rounded corners and more.

Example

Label Text

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Label Text

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Using Display

General

Remove Base Margin
This setting lets you disable the preset standard spacing that is applied to the bottom of the stack.

Drop Shadow
Allows you to add a customizable drop shadow to the Display stack. You can adjust the shadow size, vertical and horizontal offset as well as its color.

Hover Shadow
Allows you to setup a different shadow for Display when the stack is hovered over by your visitors. The Hover Shadow has all of the same settings as the Drop Shadow, but are only applied when on hover.

Border
Enable to add a border to the outside of the Display stack and lets you set the color of the border.

Round Corners
Set how round you wish to have the Display stacks corners. You can set the corner roundness uniformly or choose to set each corner to its own individual border radius value.

Background
This color picker lets you choose the background color for the stack.

Topper

This section allows you to attach content to the top of the Display stack. Generally this is usually an image, but you can use other content as well.

Topper Type
Choose between using an Image or a Drop Zone for your topper, or turning the topper off altogether. The Drop Zone Option allows you to insert other stacks into the topper area of the stack. Some stacks will work better than others as toppers.

Image
Drop your topper image here when the Topper Type is set to Image.

Bottom Border
When enabled a border will be added to the bottom of the topper section. The border’s color can then be set to a color of your choosing.

Topper Background & Border Color
Allows you to adjust the background of the topper section as well as the bottom border. Both of these settings are mostly useful when using the Drop Zone Topper Type but will also be applied to the topper when you select Image as a topper type as well.

Gradient Overlay
Allows you to add a gradient based overlay to your topper when the Topper Type is set to Image. You can adjust the colors of the gradient as well as its angle.

Advanced: Allow Overflow
Sometimes you may find you need to allow content to flow outside the bounds of the Topper. This is rarely the case, but if it is needed you can enable this feature. Do note that enabling this feature will set the Overflow to visible for all parent stacks as well.

Label

Label
Enabling this allows you to add a label to the topper section of your Display stack. When enabled you will be given a text field to insert your label text.

Alignment
You are able to choose where within the topper to place your label. You get to choose the vertical and horizontal alignment for the label in relation to the topper. The label will be overlaid on top of the topper content.

Offsets
You can set the left, right, top and bottom offsets for the label based on where you position your label.

Round Corners
Set how round you wish to have the label’s background corners. You can set the corner roundness uniformly or choose to set each corner to its own individual border radius value.

Padding
You can use adjust the label’s internal padding uniformly or adjust each side individually.

Background Style
The label’s background can be a solid color or a gradient. Depending on your choice you will be presented with controls for adjusting the background color as well as the text color.

Drop Shadow
Enabling this feature will add a drop shadow to the label. You can adjust the shadow’s size, offsets and color when enabled.

Icon

Icon
Enabling this allows you to add a floating icon to the topper section of your Display stack. When enabled you will be given a drop down with a list of icons.

Background & Icon Size
Set the size of the icon and its containing background.

Alignment
You are able to choose where within the topper to place your icon. You get to choose the vertical and horizontal alignment for the icon in relation to the topper. The icon will be overlaid on top of the topper content.

Offsets
You can set the left, right, top and bottom offsets for the icon based on where you position your icon.

Link
Enabling this feature allows you to add a link to the icon.

Background Style
The icon’s background can be a solid color or a gradient. Depending on your choice you will be presented with controls for adjusting the background color as well as the text color.

Drop Shadow
Enabling this feature will add a drop shadow to the icon. You can adjust the shadow’s size, offsets and color when enabled.

Content

Padding
Allows you to adjust the padding around the content within the Display stack. You can adjust it uniformly or on a per-side basis.

Collapsable Section

Collapsable Section
Enabling this feature adds another drop zone to the Display stack, along with a button. This secondary section of content is hidden until your visitor clicks the added button to expand this collapsable section.

Expand Label
Set the text for your Expand button here.

Expand Style
Set the color of the Expand button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Collapse Label
Set the text for your Collapse button here.

Collapse Style
Set the color of the Collapse button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Button Alignment
Choose to align the expand and collapse buttons to the left, center or right within the Display stack.

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

Block Button
Enable to make the Button span the entire width of the Display stack. The button’s width is flexible when enabled and will size down to fit the available space.

Padding
You can adjust the padding around your collapsable content as well.

Effects

Expand Topper on Hover
You can opt to have the topper section, when enabled, have a smaller height and then expand when the visitor hovers over the Display stack. This can be jarring to the visitor if used too often so don’t overdue this one.

Start Height
Allows you to choose the start height of the topper before the visitor hovers over the stack.

Speed
This is the duration of the effect. This setting determines how long it will take from the time the visitor hovers over the stack to the time that the effect has completed and expanded the topper to its full height.

Animate Label on Hover
You can also animate the label into view when the visitor hovers over the stack. The label begins hidden and appears once the visitor hovers over the stack.

Animate Label Out
When enabled the label will disappear again once the visitor’s mouse is no longer hovered over the Display stack. Otherwise the label will remain visible.

Insight
Compact

Using the Display stack's collapsable section option you can essentially incorporate a single use accordion into your Display stack's contents, hiding less important information until your visitor needs it.