Dropcaps

Dropcaps can also have coloured backgrounds e.g.

Adding Colour to Dropcaps

To add colour simply add one of the following default colour class names: blue, green, grey, dkgrey, orange, purple, red, yellow. e.g

Default - No Colour

<span class="dropcap">D</span>ropcaps

With Colour (red)

<span class="dropcap red">D</span>ropcaps

Pure CSS Tooltips (Basic)

Note: These tooltips are displayed using CSS and HTML5 "data-" types, generated content is not readable by screen readers, meaning the content of the tool tip is in no means accessible. We suggest that you only use a short amount of information within them. If you need to show a large amount of text, then you should use something else.

Link Example

This Link Has A Tooltip

HTML:
<a href="#" data-tooltip="This is the tooltip text">This Link Has A Tooltip</a>

Text Example

mouseover this text

HTML:
<span data-tooltip="This is a tooltip text">mouseover this text</span>

In use

Aliquatjusto quisque very long tooltip nam consequat doloreet vest orna partur Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur. Donec a erat in enim cursus gravida id non urna.

Pure CSS Circles

CSS Circles are still not fully supported by all browsers and have their own problems when used in responsive layouts. So we suggest only using them when you can be very specific, overwriting the default styling at all times.

We created the elements solely for testing, but were persuaded to leave them in for future use.

Current typical useage is for font icons and normal image based icons.

We have created four default sizes: xsmall, small medium & large.

HTML:

<div class="circle xsmall"></div> <div class="circle small"></div> <div class="circle medium"></div> <div class="circle large"></div>

To add colour simply add one of the following default colour class names: blue, green, grey, dkgrey, orange, purple, red, yellow. e.g

Default - Grey

<div class="circle xsmall"></div>

With Colour (red)

<div class="circle xsmall red"></div>

Underlined Headlines

<h1> - Headline Colour and Size

<h2> - Headline Colour and Size

<h3> - Headline Colour and Size

<h4> - Headline Colour and Size

<h5> - Headline Colour and Size

<h6> - Headline Colour and Size

To create a short emphasised underline as well as a bottom border on a headline tag we use the CSS pseudo ":after" element to create content via CSS.

In some cases using this type of styling is not suitable as screen readers etc. can not read CSS created content, but as we are only using it for styling purposes there is no harm done.

Using this method is simple, all you have to do is wrap the content of the headline tag in a <span></span> tag

HTML:

<h1><span><h1> - Headline Colour and Size</span></h1> <h2><span><h2> - Headline Colour and Size</span></h2> <h3><span><h3> - Headline Colour and Size</span></h3> <h4><span><h4> - Headline Colour and Size</span></h4> <h5><span><h5> - Headline Colour and Size</span></h5> <h6><span><h6> - Headline Colour and Size</span></h6>

There are obviously other methods that can be used to implement this solution but we have gone down this road as we use the headline tags in other ways as well.

Other methods could include: styling a class and adding the class to the headline tag or directly addressing all headline tags.

Quotes

Donec sed odio dui. Nulla vitae elit libero. Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur. Donec a erat in enim cursus gravida id non urna. Vivamus feugiat mauris sed sem tristique non eleifend lorem elementum. Integer imperdiet vestibulum leo ut tincidunt. In sagittis diam ut leo convallis vel rutrum mauris ullamcorper. Vestibulum adipiscing erat sit amet justo luctus molestie. In hac habitasse platea dictumst. In lacinia erat id ante faucibus tristique. Integer egestas elementum risus vel rutrum. Mauris vel augue sit amet lectus hendrerit auctor non nec purus.

Blockquotes

Donec sed odio dui. Nulla vitae elit libero. Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam.

Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur. Donec a erat in enim cursus gravida id non urna. Vivamus feugiat mauris sed sem tristique non eleifend lorem elementum. Integer imperdiet vestibulum leo ut tincidunt. In sagittis diam ut leo convallis vel rutrum mauris ullamcorper. Vestibulum adipiscing erat sit amet justo luctus molestie. In hac habitasse platea dictumst. In lacinia erat id ante faucibus tristique. Integer egestas elementum risus vel rutrum. Mauris vel augue sit amet lectus hendrerit auctor non nec purus.