Documentation and examples for typography, including global settings, headings, body text, lists, and more. Source Sans Pro and Publico Headline are the two typefaces to be used on all AXA digital assets.
Publico Headline Bold is a the typeface with personality and emotion. It is used in bold for main messages and headlines and creates contrast. Coupled with Source Sans Pro it enhances the design by adding rythm, creating a clear hierarchy and providing a strong visual identity.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
COPY
<span class="display-1">Display 1</span>
<span class="display-2">Display 2</span>
<span class="display-3">Display 3</span>
<span class="display-4">Display 4</span>
<span class="display-5">Display 5</span>
<span class="display-6">Display 6</span>
HTML headings, <h1> through
<h5>, are available.
h1. AXA Heading
h2. AXA Heading
h3. AXA Heading
h4. AXA Heading
h5. AXA Heading
COPY
<h1>h1. AXA Heading</h1>
<h2>h2. AXA Heading</h2>
<h3>h3. AXA Heading</h3>
<h4>h4. AXA Heading</h4>
<h5>h5. AXA Heading</h5>
h1. AXA Heading
h2. AXA Heading
h3. AXA Heading
h4. AXA Heading
h5. AXA Heading
COPY
<p class="h1">h1. AXA Heading</p>
<p class="h2">h2. AXA Heading</p>
<p class="h3">h3. AXA Heading</p>
<p class="h4">h4. AXA Heading</p>
<p class="h5">h5. AXA Heading</p>
For quoting blocks of content from another source within your
document. Wrap
<blockquote class="blockquote"> around any
HTML as the quote.
Add a <footer class="blockquote-footer"> for
identifying the source. Wrap the name of the source work in
<cite>.
A quote, contained in a blockquote
COPY
<blockquote class="blockquote">
<p class="mb-0">A quote, contained in a blockquote</p>
</blockquote>
A quote, contained in a blockquote
COPY
<blockquote class="blockquote">
<p class="mb-0">A quote, contained in a blockquote</p>
<footer class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
Source Sans Pro is a sans serif typeface that has been chosen to transition from ITC Franklin Gothic and Metric as it works pretty well in all user interfaces, covers a large spectrum of signs and has no cost.
This is a paragraph
This is a paragraph
This is a lead paragraph.
This is a lead paragraph with bold font.
This is a paragraph
COPY
<p>This is a paragraph</p>
<p><strong>This is a paragraph</strong></p>
<p class="lead">This is a lead paragraph.</p>
<p class="lead">
<strong>This is a lead paragraph with bold font.</strong>
</p>
<p><small>This is a paragraph</small></p>
Link style use in AXA Design System.
COPY
<a href="#typo_lnk_part" id="typo_lnk_part">This is a link</a>