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

Change Log

Classes

hx-flag-typography

Update the font styles within the container this class is applied to.

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.

hx-text-large

Displays a paragraph of large text. It has a fixed size, and a custom line height, so you can experiment with it.

hx-text-large

Displays a paragraph of small text. It is intended for use as notes and comments.