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.
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.
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.
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.
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.
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.
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.
Chose to display your header in all uppercase letters.
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.
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.
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.
Chose to display your sub text in all uppercase letters.
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.
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.
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.
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.
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.
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.
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.
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.
When enabled you add an outline to your header text and are able to adjust the width and color of that outline.
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.
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