Page Header

Base Foundry stack

While a lot like the normal Header stack, the Page Header stack is geared toward displaying your Site Title, Site Slogan, or Page Title.

  • Choose from displaying a Site Title, Slogan, Page Title or Custom text
  • Choose which header tag to use
  • Amplify text size with Display settings
  • Opt to include secondary label
  • Use custom font selection
  • Set Page Header alignment
  • Use custom font sizing at each breakpoint
  • Style using custom color picker
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Site Title

Site Slogan

Page Title

Using Page Header

Labels

Main Label
Choose what you’d like to use for the page header. You can choose from using the RapidWeaver Site Title, Site Slogan or Page Title. You also have the ability to use your own Custom text if you wish.

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

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 Page Header in all uppercase letters.

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Page Header stack.

Secondary Label
Opt to have a secondary label for your Page Title. You can choose to have your Site Slogan or Page Title as your Secondary Label, or use your Custom text instead.

Secondary Muted
Allows you to grey out the secondary text, giving a visual cue that it is less important than the main Page Header text.

Alignment
Allows you to set the justification of the Header text. You can set the alignment to Left, Center or Right.

Link to Homepage
Adds a link to the home page of your site. The home page is determined by RapidWeaver as being the page you’ve designated as the Home Page in the pages list.

Style

Use Override Font
This option lets you choose a custom font for your branding text, whether that be your Site Title or Custom text. When this feature is disabled the font for your branding text is pulled from the Control Center headers settings.

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.

Override Font
Select which font you wish to use to override the branding text. You can select from a few preselected fonts, or you can opt for a custom font. A custom font can be normal web-safe fonts or you can use Google Fonts. If you opt for Google Fonts the code to call the font from the Google server is automatically generated.

Beginning in v1.2.5.0 of Foundry you also have the option of using the Typeface stack for setting your Page Header font.

Fallback Font
Allows you to specify a fallback when using the Override Font feature. This lets browsers have a standard font to default to if the visitor’s browser does not support a font or if the visitor does not have that font installed. The standard fallback fonts would be either serif or sans-serif.

Weight
Set the font weight for your branding text with a simple slider.

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

Custom Font Sizes
Manually choose the size of your Page Header text. You are able to set a different font size for the Page Header at each of the 3 responsive breakpoints.

Style
Choose from one of Foundry’s color 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:

  • White: A quick way to choose a pure white text color for your header. v2
  • Gradient: Create a beautiful, gradient header using a sepcial maskign technique. v2