NEWSLETTER HUB|BRANDHUB

We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Foundations

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.

Display

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

<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>
Headings

HTML headings, <h1> through <h5>, are available.

h1. AXA Heading

h2. AXA Heading

h3. AXA Heading

h4. AXA Heading

h5. AXA Heading
<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

<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>
Blockquotes

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

<blockquote class="blockquote">
  <p class="mb-0">A quote, contained in a blockquote</p>
</blockquote>

A quote, contained in a blockquote

Someone famous in Source Title 
<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>
Paragraph

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

<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>
Links

Link style use in AXA Design System.

This is a link 
<a href="#typo_lnk_part" id="typo_lnk_part">This is a link</a>