Features

  • Choose from either a fluid or fixed-width inner content width
  • Choose a custom max-width
  • Define custom padding
  • Choose to use a solid color, an image or graident for your backdrop
  • Define image backdrop coverage
  • Choose to lock backdrop image in place
  • Optionally include a header, sub-header and small label
  • Use your site title, slogan or custom text for your header
  • Use your site slogan, or custom text for your sub-header
  • Set alignment for headers
  • Use color pickers to customize headers

Example

The Jumbotron stack takes up a good deal of space, as the name of the stack implies so we’ve placed a couple of examples below, just above the page footer. Have a look to see what it can look like on your site.


Using Jumbotron

The Jumbotron stack is very versatile. It can be used to build simple banners or section of large chunks of your page to garner your visitors’ attention. Add your own content, or other stacks inside of it to really customize it!

General

Fluid Wrapper
Enable this feature when using the Jumbotron in a way that you wish it to go edge-to-edge on a page or within a stack. It will make the outer wrapper of the stack fluid and remove the rounded corners from the stack.

Inner Container
You can choose between a fluid and fixed-width setting for the inner area of the Jumbotron. Fluid allows the contents two stretch out to the full-width of the Jumbotron stack, while fixed-width allows you to set your own maximum width for the Jumbotron content.

Custom Padding
Jumbotron comes with a bit of padding built-in by default. Enabling the Custom Padding feature though allows you to set the padding for each of the four sizes of the stack.

Remove Base Margin
Allows you to disable the preset ,standard spacing that is applied to the bottom of the Jumbotron stack.

Jumbotron Title

Title
Add a title to your Jumbotron.

Title Type
Allows you to choose between using your Site Title, Site Slogan, or some custom text as the title for your Jumbotron stack.

Display Type
The Display setting allows you to tell the stack that the text should be supersized. You’re given 4 different supersized variations to choose from.

Title Alignment
Allows you to set the justification of the title text within your Jumbotron stack. You can set the alignment to Left, Center or Right. This affects just the title text.

Style
Choose to use the Control Center stack’s color setting for headers or define your own color for the title using a color picker.

Jumbotron Sub-title

Sub-title
Add a sub-title to your Jumbotron, just below the title if the title has been enabled.

Sub-title Type
Allows you to choose between using your Site Slogan or some custom text as the sub-title for your Jumbotron.

Title Alignment
Allows you to set the justification of the sub-title text within your Jumbotron stack. You can set the alignment to Left, Center or Right. This affects just the sub-title text.

Style
Choose to use the Control Center stack’s color setting for headers or define your own color for the sub-title using a color picker.

Backdrop

Style
Set the background of the Jumbotron to match your page’s design. Choose from one of the following style for your backdrop:

  • Default: A simple, solid light grey background color.
  • Color Picker: Use the color picker to choose a solid, custom color for your background. You may also use the opacity slider to make the color translucent.
  • Gradient Color Picker: Use two separate color pickers to define a beautiful background gradient. You can also set the angle for the gradient as well.
  • Image: Use your own image as a backdrop for your Jumbotron content. Choose to use a an image that covers the entire Jumbotron background or tile an image. You can also lock the image in place.*
  • Please Note: The locked background images will expand to fill the entire size of the browser window so that as the page scorlls the content of the Jumbotron always has an area of the image to scroll over.
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-2016 Elixir Graphics | Contact Us