HexagonJS
Edit Page
Base
Provides the default font styles and header classes
Version 2.x
In version 2 of Hexagon, the user experience and interface are being overhauled to add guidelines and improve the general usability of the library.
This module applies styles to the root elements (e.g. input, textarea etc.) that have been deprecated in favour of using explicit classes to apply the styling to these elements.
This module will contain only the styles for the typography in the next release version.
See Inputs and Form for details on how to use the new classes.
Examples

h1

h2

h3

hx-header-large
hx-header-medium
hx-header-small
hx-header

This an introduction text. It has a fixed size, and a custom line height, so you can experiment with it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium. Mauris elit orci, ultricies id fermentum vel, porta et eros. Vestibulum condimentum lectus in convallis feugiat.

This is small body text used for notes and comments. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium. Mauris elit orci, ultricies id fermentum vel, porta et eros. Vestibulum condimentum lectus in convallis feugiat.

HTML

<div class="hx-flag-typography">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>

  <div class="hx-header-large">hx-header-large</div>
  <div class="hx-header-medium">hx-header-medium</div>
  <div class="hx-header-small">hx-header-small</div>
  <div class="hx-header">hx-header</div>

  <p class="hx-text-large">This an introduction text. It has a fixed size, and a custom line height, so you can experiment with it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>This is body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium. Mauris elit orci, ultricies id fermentum vel, porta et eros. Vestibulum condimentum lectus in convallis feugiat.</p>

  <p class="hx-text-small">This is small body text used for notes and comments. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium. Mauris elit orci, ultricies id fermentum vel, porta et eros. Vestibulum condimentum lectus in convallis feugiat.</p>
</div>

1.x font styles

h1

h2

h3

h4

h5
h6
hx-header-large
hx-header-medium
hx-header-small
hx-header

HTML

<p class="hx-header-medium">1.x font styles</p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<div class="hx-header-large">hx-header-large</div>
<div class="hx-header-medium">hx-header-medium</div>
<div class="hx-header-small">hx-header-small</div>
<div class="hx-header">hx-header</div>
Api
Classes
hx-flag-typographyadded
Update the font styles within the container this class is applied to.
hx-text-largeadded
Displays a paragraph of large text. It has a fixed size, and a custom line height, so you can experiment with it.
hx-text-largeadded
Displays a paragraph of small text. It is intended for use as notes and comments.
hx-header
A class for applying the base header font and text color to an element.
hx-header-large
A class for applying the base header font and text color to an element as well as giving the element a font size equivalent to a <h1> element.
hx-header-medium
A class for applying the base header font and text color to an element as well as giving the element a font size equivalent to a <h2> element.
hx-header-small
A class for applying the base header font and text color to an element as well as giving the element a font size equivalent to a <h3> element.