The page class is the scaffold for pages. In conjunction with grid classes it gives you the basic tools to set up the content part of a page.

Page wrapper

The content of a page is wrapped in an `article` element with class name `.page`
```html
<article class="page">
    ...

Pages without breadcrumbs

Pages with no breadcrumbs should have the `.page--no-breadcrumbs` modifier class added to the wrapper element.

<article class="page page--no-breadcrumbs">
    ...

Page header

The page header is represented by a `header` element and has two child page elements, the `.page__heading` and the `.page__ingress`

<header class="page__header">
    <h1 class="page__heading">Lorem ipsum dolor sit amet</h1>
    <p class="page__ingress">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac efficitur tortor.
    </p>
    ...

Inverted page header

To get a dark page header, use the `.page__header--negative` modifier class.
When used, modifier classes may also be needed on child elementsm such as page heading.
<header class="page__header page__header--negative">
    <div class="row">
        <div class="xsmall-12 medium-8 xlarge-6 column">
            <h1 class="page__heading page__heading--negative">Page heading</h1>
            ...
The `.page__heading` element has a couple of modifiers available.
 
Heading for use on dark backgrounds. Add modifier class `.page__heading--negative`.
Used in combination with the `.page__heading` class. See example in section "<b>Inverted page header</b>".
 
Heading with two leading skew lines. Add modifier class `.page__heading--skewed`. Used in combination with the `.skew--prefixed-double` class.

Lorem ipsum dolor sit amet

<h1 class="page__heading--skewed skew--prefixed-double">Lorem ipsum dolor sit amet</h1>

Sub heading

<article class="page">
        <header class="page__header">
            <div class="row">
                <div class="xsmall-12 medium-8 xlarge-6 column">
                    <h1 class="page__heading">Page heading</h1>
                    <h2 class="page__sub-heading">Sub heading</h2>
                    ...
<article class="page">
        <header class="page__header page__header--negative">
            <div class="row">
                <div class="xsmall-12 medium-8 xlarge-6 column">
                    <h1 class="page__heading page__heading--negative">Page heading</h1>
                    <h2 class="page__sub-heading page__sub-heading--negative">Sub heading</h2>
                    ...

Section heading

Section heading

<h2 class="page__section-heading">Section heading</h2>