1. Components
  2. Text

Page header

The title and description used to headline a page.

Default page header orc-c-page-header

The title and description used to headline a page.

Page header align left orc-c-page-header--align-left

Aligns the text to the left, instead of centered by default.

Page header condensed orc-c-page-header--condensed

Applies the condensed font family to the page header title.

Page header fancy orc-c-page-header--fancy

Changes the font weight of the page header title to bold and the description to a light gray.

Page header plain description orc-c-page-header--plain-desc

Sets the description to roman and light gray.

Gold page header orc-c-page-header--gold

Changes the page header title text color to gold.

Thick lined bottom page header orc-c-page-header--lined-bottom-thick

Adds a thick bottom border to the page header.

White page header orc-c-page-header--white

Changes the page header text to white.

  • 

    <div class="orc-c-page-header ">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->
    

  • 

    <div class="orc-c-page-header orc-c-page-header--align-left">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->
    

  • 

    <div class="orc-c-page-header orc-c-page-header--condensed">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->
    

  • 

    <div class="orc-c-page-header orc-c-page-header--fancy">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->
    

  • 

    <div class="orc-c-page-header orc-c-page-header--plain-desc">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->
    

  • 

    <div class="orc-c-page-header orc-c-page-header--gold">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->
    

  • 

    <div class="orc-c-page-header orc-c-page-header--lined-bottom-thick">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->
    

  • 

    <div class="orc-c-page-header orc-c-page-header--white">




  <h1 class="orc-c-page-header__title">This is the page title</h1>


  <div class="orc-c-page-header__desc">This is the page description</div>




</div>
<!-- end orc-c-page-header -->

Usage

When to use

Use the page header to precede the page content, placed below the header. The page title should be specific and clear, while the description can be more representative of The Cosmopolitan voice.

When to consider an alternative

Every page should have a page header, but you have options for where it appears on a page. It could be preceded by a hero or a fancy carousel to dramatic effect.

Class Name Description 
orc-c-page-header
Required

Apply to the page header’s containing HTML element. This will help layout the page header title and page header description, with options to include buttons, icons, an image, and horizontal list within.

 
orc-c-page-header--align-left
Modifier

Apply in addition to orc-c-page-header to align the text to the left instead of centered by default

 
orc-c-page-header--condensed
Modifier

Apply in addition to orc-c-page-header to change font family of the page header title to condensed font family.

 
orc-c-page-header--fancy
Modifier

Apply in addition to orc-c-page-header to change the font weight of the page header title to bold and the description to a light gray.

 
orc-c-page-header--gold
Modifier

Apply in addition to orc-c-page-header to change the page header title text color to gold

 
orc-c-page-header--lined-bottom-thick
Modifier

Apply in addition to orc-c-page-header to add a thick bottom border to the page header

 
orc-c-page-header--white
Modifier

Apply in addition to orc-c-page-header to change the page header text to white.

 
orc-c-page-header__kicker

Optional kicker that can be added above the page header title. Add this class to h4 tag.

 
orc-c-page-header__title
Required

Apply to h1 tag to represent the headline of the page.

 
orc-c-page-header__description

Apply to div tag to represent the description of the page.

 
orc-c-page-header__image

Apply to img tag if an image is desired within the page header.

 
orc-c-btn-group

Apply to div that can format multiple calls to action. See button group for more information about classes used in this component.

 
orc-c-btn

Apply to button that can be used for pagination above the page header title or used within the button group below the page header description for any call to actions. See button for more information about classes used in this component.

 
orc-c-horizontal-list

Optional horizontal list that can be placed below the rest of the page header content. See horizontal list for more information about classes used in this component.