Highlight important information on your pages or your content into separate sections or groupings.
Headers are important for not only for conveying important topics and organizing your pages, but also for semanitcally structuring your content.
Below we've placed a few Headers mixed in with some Paragraphs. We've put a bit of descriptive text in those paragraphs relating to its accompanying Header.
This is your most basic Header style, using the default settings of the tool. By default Headers start as an H2 tag, but can easily be changed based on your needs.
Here we've left the Header as an H2 tag still, but applied a little extra styling by applying our Typeface font and setting the style to use the Gray 600 preset.
The Header tool also supports Secondary text. This allows up to separate it into type items, each with different styling. Here we've style the main text using our Primary color preset and the secondary text using Gray 500 preset.
Foundry's Header tool has aquired a beautiful new trick – gradients. We use text clipping to create gorgeous gradients for our Headers. This gives us unique, eye catching elements. Here we've set the font weight to 900 to give it a bolder look.
Here we've used a light color for our Header but set it apart from the background using our Wide shadow preset. We've also set a custom font size using the non-uniform size setting.
Foundry's Header tool is right up there with Paragraph as being one of the most important, and most used tools.
Header provides a easy way to produce semantic headings to both decorate and separate content on our pages. This newest version provides several new and improved features and includes several of the most popular features from our past Header Plus tool, too.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
This setting lets you customize which HTML tag is used for each Header. You can choose from the standard Header tags, such as H1, H2, H3, H4, H5 and H6, as well as a couple of other HTML tags like DIV and SPAN. The latter two are less commonly used, but are available iff needed.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.
Normall the Font Weight controls are only available when applying a Typeface font to an element. Otherwise the font weight is pulled from the Control Center settings. Enabling this feature allows you to set a one-off weight for this specific tool.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
Here you can customize the font size for the this tool. You're able to choose from a few options. You can have the labels inherit the Base Font sizing or choose from one of the two custom one-off options -- Uniform or Per-Breakpoint.
Allows you to specify the unit of measure for sizing your font. The default is Root EM (rem).
Handy settings for quickly applying an uppercase text transformation or forced italicization to your text.
Enable this setting to manually override the line height for this tool.
This slider lets you adjust the spacing between the individual characters within your text. The default value here is 0 (zero).
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the this item. You're also provided an option to choose a custom one-off color as well, or apply a special gradient to your text.
Note: Gradients and Shadows will not work together as the text clipping used to apply a gradient to text interferes with the shadow. You'll need to choose one or the other.
This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.
Clicking on the small plus icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.
Adds a second text item to the Header, which has its own separate styling options. When enabled you're given a font weight and property control for the Secondary text.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
Handy settings for quickly applying an uppercase text transformation or forced italicization to your text.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the normal text in the Footer Info. You're also provided an option to choose a custom one-off color as well, or apply a special gradient to your text.
Note: Gradients and Shadows will not work together as the text clipping used to apply a gradient to text interferes with the shadow. You'll need to choose one or the other.
Used to add a decorative shadow to the text. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Enabling this feature lets you add a link to your header. If you want to use the header to trigger a Modal you'll also need to make sure this feature is enabled.
Allows you to provide a link to a URL, whether it be an internal page or an external link. When using a header to trigger a Foundry Modal be sure to leave the link blank.
When enabled the link's text decoration, often an underline, will be removed for all states: normal, hover, active and visited.
This feature allows us to use this tool to trigger the opening of the Foundry Modal. This allows us to decouple the Modal from its trigger, which in this case is an Image, which gives us much greater control over our page's design and layout.
The Unique Modal ID you enter here should match the Unique ID you've setup in the Modal tool's settings. This allows the Image to know which Modal to terigger when your visitor clicks it. This ID links the two page elements together.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.