Use the display on header tags h1..h6. These styles can be applied to any header tags. Display-4 need not be applied just on H1. Keeping them header tag agnostic helps maintain page hierarchy for accessibility and helps style aesthetically.

Use text colors from variables for any of the typography.

Display 4

<h1 class="display-4">Display 4</h1>

Display 3

<h1 class="display-3">Display 3</h1>

Display 2

<h4 class="display-2">Display 2</h4>

Display 1

<h2 class="display-3">Display 1</h2>

Headline

<h5 class="headline">Headline</h5>

<div class="title">Title</div>

<div class="subheading">Subheading</div>

Body 2

Oh, elliptical, of course: for a while it would huddle against us and then it would take flight for a while. The tides, when the Moon swung closer, rose so high nobody could hold them back. There were nights when the Moon was full and very, very low, and the tide was so high that the Moon missed a ducking in the sea by a hair’s-breadth

<p class="body-2">Body 2</p>

Body 1

Oh, elliptical, of course: for a while it would huddle against us and then it would take flight for a while. The tides, when the Moon swung closer, rose so high nobody could hold them back. There were nights when the Moon was full and very, very low, and the tide was so high that the Moon missed a ducking in the sea by a hair’s-breadth

<p class="body-1">Body 1</p>

<div class="caption">Caption</div>

<label class="label">Label</label>

Buttons can be categorized based on form and function. These are three categories for buttons based on function:

1. primary -
   Ones that call for action and are bold and bright. A page can have just one of these.
2. link -
  Button that looks like a link
3. passive(default) -
   Buttons that are used in the page which do not immediately call for action.
   They are not the primary action for the page.
4. hotel -
   Buttons used for a specific purpose. In this example, a button that is used with 
   hotel reservations and booking. 

Buttons can be small or large depending on the usecase. Here are two variation based on form:

1. large - padding of 24px/36px
2. medium - padding of 16px/20px
3. default - padding 14px/18px

All buttons have a minimum width set.

<button class="primary">Primary Action</button>

<button class="hotel">Book Hotel Now</button>

<button class="passive">passive</button>

<button class="link">Link</button>

<button class="primary large">Large Primary</button>

<button class="primary medium">Medium Primary</button>

<button class="passive large">Large passive</button>

<button class="passive medium">Medium passive</button>

<button class="hotel large">Large Hotel</button>

<button class="hotel medium">Medium passive</button>

<button class="link">Button Like Link</button>

We sometimes use links as it is with its default styling and also use it with the look of a button.

Link

<a> Link </a>

Link Like Primary Button

<a class="button primary"> Link Like Primary Button </a>

Link Like Passive Button

<a class="button passive"> Link like Passive Button </a>

Link Like Hotel Button

<a class="button hotel"> Link like Hotel Button </a>

Card-based layout has become popular and is great for organizing content. There are three types of cards offered:

1. card-basic - A padded space to place content
2. card-click - cards that click to take you somewhere (link or modal)
2. card-info - Informational cards that can have links/buttons in them
3. card-flip - Cards that flip to show some information on the other side

<section class="card-click vertical center theme-light">
  <h2 class="display-1">Heading</h2>
  <p>The background color is to demonstrate the padding for the card. It can be left as it.</p>
</section>

<a href="#" class="nostyle">
  <section class="card-click vertical center theme-light">
    <h2 class="display-1">Heading</h2>
    <p>The background color is to demonstrate the padding for the card. It can be left as is.</p>
  </section>
</a>

<section class="card-info">
  <h2 class="display-1"> Heading </h2>
  <p> Lorem Ipsum </p>
  <button> Read more ... </button>
</section>

<section class="card-flip vertical center">
  <div class="card flipping-card theme-user-input">
    <div class="front-face noborder vertical center">
      <h2 class="display-1">Feedback</h2>
      <form class="vertical center">
        <label for="feedback">Let us know what you think</label>
        <textarea id="feedback" name="feedback"></textarea>
        <button class="primary submit" type="submit">Submit</button>
      </form>
    </div>
    <div class="back-face vertical center theme-default">
      <p className="headline color-text-secondary">Thank you for your feedback.</p>
    </div>
  </div>
</section>

Card Spacings

Cards can be of two spacings:

1. regular - This is the default padding 18px 24px
2. small - smaller version of the regular card padding 8px 10px. This is preferred for smaller devices.

Any of the above cards can follow these paddings.

Example of small card:

<section class="card-click small vertical center">
  <h2 class="display-1">Heading</h2>
  <p>Loreum Ipsum</p>
</section>

We use text for the product logo. Use the .logo selector to style it correctly.

<header class="main horizontal middle">
  <div class="logo">My Product Name</div>
</header>

Default header for the top navigation, actions and logo.

<header class="main horizontal middle">
  <h2 class="logo flex-1">AppName</h2>
  <a>Sign in</a>
</header>

Tabs/Navigation Bar

Default tabs

<header class="main middle">
  <nav role="navigation" aria-label="Main Menu">
    <ul class="tabs">
      <li>
        <a class="nostyle">Item 1</a>
      </li>
      <li class="selected">
        <a class="nostyle">Item 2</a>
      </li>
      <li>
        <a class="nostyle">Item 3</a>
      </li>
    </ul>
  </nav>
</header>

Default styles for text, textarea, search box, radio groups and checkboxes. Add other variants as fit.

<section class="card-info demo-form-1">
  <fieldset>
    <legend class="body-2">Who is your favorite 19th century scientist</legend>
    <div class="checkbox horizontal middle">
      <input id="bell" type="checkbox" name="scientist" value="bell"/>
      <label for="bell">Alexander Graham Bell</label>
      <input id="edison" type="checkbox" name="scientist" value="edison"/>
      <label for="edison">Thomas Edison</label>
    </div>
  </fieldset>
  <fieldset>
    <legend class="body-2">What is the best time of day?</legend>
    <div class="radio horizontal middle">
      <input type="radio" name="day" id="morning" value="morning"/>
      <label for="morning">Morning</label>
      <input type="radio" name="day" id="night" value="night"/>
      <label for="night">Night</label>
    </div>
  </fieldset>
</section>

<section class="demo-form">
  <form class="card-info vertical middle">
    <label for="first-name">First Name</label>
    <input type="text" name="textfield" class="first-name">
    <label for="last-name" class="required-field">Last Name</label>
    <input type="text" name="textfield" aria-describedby="error-message" required>
    <div class="visuallyhidden caption err ">* This field is required.</div>
    <label for="address">Enter your street address</label>
    <textarea name="addresstext"></textarea>
    <button class="primary self-right">Submit</button>
  </form>
</section>

List of spinners for the app

<div class="spinner"><div class="ball1"></div><div class="ball2"></div><div class="ball3"></div></div>

Flexbox layouts

Horizontal layout (.horizontal)

<div class="horizontal">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

Horizontal Layout + Aligning items center (.horizontal.center)

<div class="horizontal center">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

Horizontal Layout + align items center and bottom (.horizontal.center.bottom)

<div class="horizontal center bottom">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

Horizontal Layout + space between items and top (.horizontal.space-between.top)

<div class="horizontal space-between top">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

Horizontal Layout + space around items and top (.horizontal.space-between.top)

<div class="horizontal space-around top">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

Horizontal Layout + items at bottom right (.horizontal.right.bottom)

<div class="horizontal right bottom">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

Horizontal Layout + items at middle right (.horizontal.middle.right)

<div class="horizontal middle right">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

Horizontal Layout + items occupying a space of ratio 1:2:3

<div class="horizontal">
  <div class="first flex-1">First</div>
  <div class="second flex-1">Second</div>
  <div class="third flex-2">Third</div>
</div>

Horizontal Layout + items occupying a space of 0:1:2

<div class="horizontal">
  <div class="first">First</div>
  <div class="second flex-1">Second</div>
  <div class="third flex-2">Third</div>
</div>

Horizontal Layout + positioning and spacing each item differently

<div class="horizontal">
  <div class="first self-left flex-1">First</div>
  <div class="second self-center flex-1">Second</div>
  <div class="third self-right flex-1">Third</div>
  <div class="fourth self-stretch flex-1">Fourth</div>
</div>

Horizontal Layout + wrap items

<div class="horizontal wrap">
  <div class="first flex-1">First</div>
  <div class="second flex-1">Second</div>
  <div class="third flex-1">Third</div>
  <div class="fourth flex-1">Fourth</div>
</div>

Horizontal Layout + wrap items reverse

<div class="horizontal wrap-reverse">
  <div class="first flex-1">First</div>
  <div class="second flex-1">Second</div>
  <div class="third flex-1">Third</div>
  <div class="fourth flex-1">Fourth</div>
</div>

Vertical Layout

<div class="vertical">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

Vertical Layout + items in center

<div class="vertical center">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

Vertical Layout + items in middle and center

<div class="vertical center middle">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

Vertical Layout + items in middle and right

<div class="vertical right middle">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

Vertical Layout + items with space between

<div class="vertical space-between">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

Vertical Layout + items with space-around

<div class="vertical space-around">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

Vertical Layout + item occupying space based on a ratio of 0:1:0

<div class="vertical">
  <div class="first">First</div>
  <div class="second flex-1">Second</div>
  <div class="third">Third</div>
</div>

Vertical Layout Full bleed

<div class="vertical">
  <div class="flex-1">Fullbleed</div>
</div>

Controlling the number of layers a page has with z-index selectors. Use the following selectors to get the specific layer. This eliminates the need to manually set z-index that can be difficult to track.

1. .layer-critical    gives you a zindex of 10000
2. .layer-high        gives you a zindex of 9000
3. .layer-medium      gives you  a zindex of  8000
4. .layer-low         gives you a zindex of 7000
5. .layer-backdrop    gives you a zindex of 6000

<div class="bubble"></div>