Bleeding Page Headers
A bleeding page header is a page header that bleeds to the edges of the screen. It is essentially a combination of Page Header and Bleed. Typically, bleeding page headers are combined with the grid to create a variety of flexible header styles for landing pages.
Topics for Bleeding Page Headers:
- When to Use a Bleeding Page Header
- Default Settings
- Settings for Descendants
- Theming and Colorization
- Extension Options
- Common Patterns
When to Use a Bleeding Page Header
Bleeding page headers should be used only on landing and homepages. Typically, these will be the pages linked in the section's navbar. The bleeding page header + .bg-photo combination is typically used for homepages. The hex header option should be used sparingly for landing pages that need to stand out.
This is a bleeding page header
Default Settings
Default settings for bleeding page headers:
- 50px of padding on top and bottom
- Increased bottom margin of 50px to separate from page content
- Links and text use the on-dark option
- Hx headings use the light heading option to lightent the font weight to 300.
- A transparent PNG hexagon background texture image, which allows the background color to be set by theme or forced colorization.
Settings for elements inside bleeding page headers
Hx heading inside bleeding page header
Paragraph inside bleeding page header
Button inside bleeding page header
Panel inside bleeding page header. In in enim a arcu imperdiet malesuada. Aliquam erat volutpat.
Theming and Colorization
Bleeding page headers are heavily affected by theme. The following colors are overridden by theme:
- Background color set to theme color, darkened
- Panel backgrounds become theme color, darkened, and translucent
- If the .hex-header option is used, the hexagon will be filled with a theme color generated gradient
Use the theme switcher on the right to see how bleeding page headers are affected by theme changes.
Extension Options
intro text about extension options goes here.
This is a roomy bleeding page header
Hexagon bleeding page header + bg-photo bleed option
Header with title block
Common Patterns for Bleeding Page Headers
there should be some intro text here about common patterns.
Common Pattern for Internal Homepages
.page-header.bleed.photo-bleed.roomy, with 7/5 column split:
Phasellus enim erat vestibulum vel aliquam a posuere
Common Pattern for Internal Landing Pages
.page-header.bleed, with 7/5 column split:
Aenean placerat morbi mattis
Fusce consectetuer risus a nunc. Integer in sapien. Suspendisse nisl.
Simpler Common Pattern for Internal Landing Pages
.page-header.bleed, with one seven-column wide block:
Pellentesque habitant morbi tristique
Maecenas lorem. Maecenas ipsum velit, consectetuer eu, lobortis ut, dictum at, dui. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.
Page header with custom image to remove hexagons
.page-header.bleed, with one seven-column wide block:
