Bankhead Group Styleguide

<p>
  <a href="#" class="t-no-decoration">This link has no decoration</a>.
</p>

This link has no decoration.

Source

<p>
  <a href="#" class="t-no-decoration">This link has no decoration</a>.
</p>

The text contained in the paragraph after this has been hidden!

I am hidden!

Source

<p>The text contained in the paragraph after this has been hidden!</p>
<p class="t-hidden">I am hidden!</p>

I am a paragraph that used the ‘lead’ style, which increases the font size slightly.

Source

<p class="t-lead">I am a paragraph that used the ‘lead’ style, which increases the font size slightly.</p>

I am text using size ‘tera’!
I am text using size ‘giga’!
I am text using size ‘mega’!
I am text using size ‘alpha’!
I am text using size ‘beta’!
I am text using size ‘gamma’!
I am text using size ‘delta’!
I am text using size ‘epsilon’!
I am text using size ‘zeta’!
I am text using size ‘milli’!
I am text using size ‘micro’!
I am text using size ‘nano’!

Source

<p>
  <span class="t-tera">I am text using size ‘tera’!</span><br />
  <span class="t-giga">I am text using size ‘giga’!</span><br />
  <span class="t-mega">I am text using size ‘mega’!</span><br />
  <span class="t-alpha">I am text using size ‘alpha’!</span><br />
  <span class="t-beta">I am text using size ‘beta’!</span><br />
  <span class="t-gamma">I am text using size ‘gamma’!</span><br />
  <span class="t-delta">I am text using size ‘delta’!</span><br />
  <span class="t-epsilon">I am text using size ‘epsilon’!</span><br />
  <span class="t-zeta">I am text using size ‘zeta’!</span><br />
  <span class="t-milli">I am text using size ‘milli’!</span><br />
  <span class="t-micro">I am text using size ‘micro’!</span><br />
  <span class="t-nano">I am text using size ‘nano’!</span>
</p>

I am uppercase text!
I am lowercase text!
I am capitalized text!

Source

<p>
  <span class="t-uppercase">I am uppercase text!</span><br />
  <span class="t-lowercase">I am lowercase text!</span><br />
  <span class="t-capitalize">I am capitalized text!</span>
</p>

I am text using weight ‘lighter’!
I am text using weight ‘normal’!
I am text using weight ‘bold’!
I am text using weight ‘bolder’!
I am text using weight ‘100’!
I am text using weight ‘200’!
I am text using weight ‘300’!
I am text using weight ‘400’!
I am text using weight ‘500’!
I am text using weight ‘600’!
I am text using weight ‘700’!
I am text using weight ‘800’!
I am text using weight ‘900’!

Source

<p>
  <span class="t-weight-lighter">I am text using weight ‘lighter’!</span><br />
  <span class="t-weight-normal">I am text using weight ‘normal’!</span><br />
  <span class="t-weight-bold">I am text using weight ‘bold’!</span><br />
  <span class="t-weight-bolder">I am text using weight ‘bolder’!</span><br />
  <span class="t-weight-100">I am text using weight ‘100’!</span><br />
  <span class="t-weight-200">I am text using weight ‘200’!</span><br />
  <span class="t-weight-300">I am text using weight ‘300’!</span><br />
  <span class="t-weight-400">I am text using weight ‘400’!</span><br />
  <span class="t-weight-500">I am text using weight ‘500’!</span><br />
  <span class="t-weight-600">I am text using weight ‘600’!</span><br />
  <span class="t-weight-700">I am text using weight ‘700’!</span><br />
  <span class="t-weight-800">I am text using weight ‘800’!</span><br />
  <span class="t-weight-900">I am text using weight ‘900’!</span>
</p>

Typography

Decoration Jump to Source

Decoration Jump to Source

Hidden Jump to Source

Lead Jump to Source

Size Jump to Source

Transform Jump to Source

Weight Jump to Source