Typographic Elements

Typographic Elements

• Fonts + KentFont icons
• Headings + Paragraphs
• Block quote
• Pull quote
• List
• Links
• Tables
• Social Media Links
• Social quote
• Labels/Tags

Fonts + KentFont icons

Font families are defined in _variables.scss.

Font faces for web fonts are in _fonts.scss.

Arial light is used as the predominant body font. Note that the bold and italic elements use Arial Light Medium.

KentFont is used for all icons. Examples and documentation can be found here

Headings + Paragraphs

Where possible we are following Bootstrap 4's standards, i.e. use of bottom margins only, etc.

Block quote

A blockquote is implemented using the <blockquote> tag. Here is an example:

    <blockquote>
      <p>It was I who ate all the pies! And I would have gotten away with it too, if it weren't for you meddling kids.</p>
    </blockquote>

Optionally, you can also add in image and/or citation (footer) as follows:

    <blockquote>
      <img class="rounded-circle" src="media/images/profile-academic.jpg">
      <p>It was I who ate all the pies! And I would have gotten away with it too, if it weren't for you meddling kids.</p>
      <cite>
        Dr David Hume,
        <span>School of Astrofrench and Other stuff</span>
      </cite>
    </blockquote>

The blockquote markup can be used in both standard content, and within content layouts aside. When used in the side, slightly different styling will be applied to better fix this usage.

Pull quote

A pull quote is implemented as a <blockquote> tag with a pull-quote class. For example...

    <blockquote class="pull-quote">
      <p>It was I who ate all the pies! And I would have gotten away with it too, if it weren't for you meddling kids.</p>
    </blockquote>

Also, adding the pull-quote-accent class, will change the colour of the pull quote to the brand accent colour.

List

We're following Bootstrap 4's standards for ul, ol, and dl lists.

Links

Normal links using the <a> tag will be styled according to the brand style, and therefore will look and behave differently depending on where in a page it appears.

A chevron can also be added to the end of the link by adding a chevron-link class to an <a> tag.

Tables

We're following Bootstrap 4's standards for tables. Tables with a thead will have a solid line underneath the tables header labels, while standard tables will simply have the line at the top of the table itself.

Social Media Links

Social media links can be added as follows:

    <nav class="content-social">
      <a title="twitter" href="#" class="kf-twitter"></a>
      <a title="facebook" href="#" class="kf-facebook"></a>
      <a title="instagram" href="#" class="kf-instagram"></a>
      <a title="pinterest" href="#" class="kf-pinterest"></a>
    </nav>

The following social networks are currently supported and can be use by using the relevant kf-{network} class on an <a> tag.

• facebook
• linkedin
• twitter
• youtube
• flickr
• rss
• tumblr
• pinterest
• instagram
• google-plus

By default, these will appear in grey scale, but will be animated into a coloured version on hover. Adding the class content-social-colored to the nav tag will mean that they always appear coloured.

Social quote

A social quote is implemented as a <blockquote> tag with a social-quote class. For example...

    <blockquote class="social-quote social-quote-twitter">
      <a href="#">
        <button></button>
        <p>Kent study shows that tourism boost in Malta can aid struggling traditional fishermen.</p>
      </a>
      <cite>
        <a href="#">@unikentnews</a>
      </cite>
    </blockquote>

A class of social-quote-{network} should be used to denote which social network the quote is from, with any of the below values currently supported.

• facebook
• linkedin
• twitter
• youtube
• flickr
• rss
• tumblr
• pinterest
• instagram
• google-plus

Labels/Tags

See the buttons section for more information about label/tag buttons.