Header Plus
Header Plus allows you to create more unique headers for your content, making them standout with intricate shadows, outlines, image badges and more.
- Add unique drop shadows to your header, including shadows that created 3D text.
- Include image-based badges with headers.
- Get fine tuned control over letter and word spacing.
- Add links to your headers.
- Allows you to add a secondary text element to headers.
- Independently style headers and secondary text.
Example
Below we’ve created a few examples of headers using the Header Plus stack, using its various shadows, badges, secondary text and other features. Each example will tell about its settings in the paragraph below the Header Plus example.
This header uses the Header Plus stack’s ability to add a link to your header. We’ve also added a shadow to the header using Header Plus’ Heavy Shadow preset.
Header
Here we’ve set the header to be all uppercased, as well as selected the the Elegant drop shadow preset. We’ve used the letter spacing settings of Header Plus to set the spacing between characters to 20px. Header Plus allows you to set the letter (and word) spacing to different values at each of the 3 responsive breakpoints -- in this example the extra spacing is only applied to the Desktop breakpoint.
Header
Here we’ve used Foundry’s Typeface stack to set the font to Roboto, with a nice bold font weight. We’ve also included a nice image as a badge using Header Plus’ badge feature. The badge can be sized and its positioning, upwards and down, adjusted at each of the 3 breakpoints. We’ve also used the Custom drop shadow setting to create a nice small, but soft drop shadow.
Header
In this example we’ve set the text color to white, using the color picker and applied the 3D shadow feature. We’ve also applied a different font using Foundry’s Typeface stack -- using the Bungee font in this case through Google Fonts.
We’ve also used the multiple alignment feature of Header Plus, which allows you to set the alignment for the header at each of the three breakpoints. We’ve set the alignment to the left at the desktop and tablet breakpoints and centered at the mobile breakpoint.
Using Header Plus
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
Header 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.
Uppercase
Chose to display your header in all uppercase letters.
Secondary Text
Opt to have a secondary header paired with your header. This secondary text is displayed inline with the Header but at a smaller font size.
Secondary Font
Choose whether to have your secondary text adopt the font settings from the main header or to use the Typeface stack for your font choices.
- Please Note: When using Inherit From Header for Secondary Text the Secondary weight matches that of the main header.
Secondary Weight
Choose what weight you wish your secondary text 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.
Uppercase
Chose to display your sub text in all uppercase letters.
Italic
Opt to italicize your Header. 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.
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 ability to click the + button and refine the alignment for each of the three breakpoints.
Custom Line Height
Allows you to manually adjust the line-height for your header.
Link
Add Link
You may add a link to your header using the Header Plus stack. When enabled you will receive a link control that allows you to choose your link.
Header Style
Letter and Word Spacing
Header Plus allows you to set a different letter and / or word spacing at each of the 3 different breakpoints. This lets you have more control over the kerning of your headers.
Custom Font Sizes
Manually choose the size of your header text. You are able to set a different font size for your header at each of the 3 breakpoints.
Header Style
Set the color of header match other elements of your site. Use the 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.
Secondary Text Style
Letter and Word Spacing
You are able to set a different letter and / or word spacing at each of the 3 different breakpoints for your Secondary Text, when enabled. This lets you have more control over the kerning of your header.
Secondary Text Style
Set the color of secondary text to match other elements of your site or make it contrast with your main header. Se the secondary text to match inherit the main header’s color, or choose one of Foundry’s color swatch presets or simply make use of a custom color pickers to style the secondary text as you like.
Match Secondary Size to Header
Enabling this feature will make sure the Secondary Text is not a sub-size of the main Header text, but will instead assign the same font size to both. This will increase the Secondary Text to match the font size of the main Header text.
Shadow
Drop Shadow
You are able to choose from one of our many preset shadow styles, including long shadows, 3D shadows, heavy shadows, and more, or use the custom controls to create your own drop shadow.
When using the custom controls for the drop shadow you’ll have control over the shadow size, its offset (both horizontally and vertically), as well as its color. The offset values can be both negative and positive numbers.
Outline
Outline
When enabled you add an outline to your header text and are able to adjust the width and color of that outline.
Badge
Badge
Enabling the badge feature of the Header Plus stack allows you to add an image to either left- or right-hand side of your header. When enabled you’ll be given an image well control within the stack’s settings to place your badge image. You’ll also then be able to choose whether the badge will be on the left or right of the header.
In addition to choosing its alignment you can also set the badge’s size and vertical offset adjustment at each of the 3 different responsive breakpoints, allowing you more control over the way your badges are displayed.