Features

  • 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

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

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.

Bold
Enable this feature to bold the header.

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.

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 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.

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.

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