Jumbotron

Base Foundry stack

Build beautiful banners or separate content sections on your pages. Jumbotron’s features allow it to be serve many different purposes.

  • 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
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Jumbotron Example

This is a simple, sample hero unit. This jumbotron-style component can be used for calling extra attention to featured content or information on your page.

Label

Header Goes Here

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 Jumbotron

The Jumbotron stack is very versatile. It can be used to build simple banners or section of large chunks off 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.

Font v2
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Title text.

Font Weight v2
Use this setting to adjust the font weight of your Title text when you've assigned them a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.

Italic
Opt to make your Jumbotron title italicized.

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.
  • Presets: Choose to use the Foundry Brand Color presets (Primary, Success, Info, etc) from the Control Center stack. Works with Dark Mode. v2
  • 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 (drag-and-drop): Use your own image as a backdrop for your Jumbotron content. Choose to use an image that covers the entire Jumbotron background or tile an image. You can also lock the image in place.*
  • Image (remote): Use your own image as a backdrop for your Jumbotron content. Insert a URL that points to the location of an image on your server. This is a more advanced approach. v2
  • 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.
Insight
Into darkness

Jumbotron's ability to use Foundry's Brand Color presets for its background makes it a great candidate for setting up section of content that can shift colors using Foundry v2's Dark Mode settings.