Use the Header stack to highlight important text on your pages or to separate sections into specific groupings.
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.
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.
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.
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.
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:
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
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.