Header

Base Foundry stack

Use the Header stack to highlight important text on your pages or to separate sections into specific groupings.

  • Choose which header tag to use
  • Enabled Display setting to create larger display headers
  • Add secondary header
  • Add border to bottom of header
  • Set alignment for header
  • Set custom font sizes at each breakpoint
  • Style header using custom color picker
  • Opt to use a gradient for your header style
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

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.

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 Secondary text

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 Header

General

Tag
Choose which tag should be associated with your header. HTML uses a series of specialized tags relating to headers. This option allows you to select the right tag for your particular use. The more important the information on the page the larger the header should be.

  • H1: Page Title
  • H2: Sub Title
  • H3: Section
  • H4: Sub Section
  • H5: Small
  • H6: Smallest

Font
Choose whether to have your Header adopt the font settings from the Control Center stack or to use the Typeface stack for your font choices.

The default values and settings for headers on your page can be setup within the Foundry Control Center stack. There you can set font sizes, weights, colors and more.

Font Weight
Choose what weight you wish your font to be. The higher the number the more bold the font will be. If using the Typeface stack for your font choice be sure that you are loading the font weight you wish to use within the Typeface stack.

Italic
Opt to italicize your Header font. Again, it you’re using Typeface and wish to italicize your header, be sure you’re loading the italic version of the font with Typeface.

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

Uppercase
Chose to display your Header in all uppercase letters.

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

Alignment
Allows you to set the justification of the Header text. You can set the alignment to Left, Center or Right. You also have the option of setting the alignment of your header differently at each of the three breakpoints.

Secondary Text
Opt to have a secondary header paired with your Header stack. This secondary text is displayed inline with the Header but at a smaller font size.

Mute Secondary Text
Allows you to grey out the secondary text, giving a visual cue that it is less important than the main Header text.

Style

Custom Line Height
Use Foundry’s default line height of 1.2 times the font-size or enable the Custom Line Height option and set your own line height.

Letter Spacing
Set the amount of space between each letter in your Header.

Custom Font Sizes
Manually choose the size of your Header text. You are able to set a different font size for the Header at each of the 3 responsive breakpoints.

Header Style
Set the color of header match other elements of your site. Use specialized Header color setting in the Control Center stack, or choose one of Foundry’s color swatch presets or make use of custom color pickers to style the header and secondary text.

Starting with Foundry v2 we've added the following Header Styles:

  • White: A quick way to choose a pure white text color for your header. v2
  • Gradient: Create a beautiful, gradient header using a sepcial maskign technique. v2

Border
Add a rule below the header to divide it from other content.

Border Style
Lets you choose the style of border to use: Solid, Dashed, Double or Dotted.

Border Width
Use a simple slider to set the thickness of the divider line.

Link v2

Link v2
Allows you to add a link to your Header that can be to either a local page on your server or to an external URL.