Typography

Display headings

Typography

Text edited using the Full HTML text format, in fields that use long-text, will allow you to select all of the following text effects. First select the type (such as paragraph or Heading 1) then select a style. This paragraph for example is using the "lead" class in order to show larger

Display Heading Primary Blue

Multiple colour header

MULTIPLE COLOUR HEADER

Basic Typography

UPPERcase Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Plain text

Bold text

Italic text

Underlined text

Linked text

  • item 1
  • item 2
  • item 3
  1. item 1
  2. item 2
  3. item 3

Block Quote

CKEDITOR STYLES

Horizontal rule

Link set as primary Button

Link set as secondary Button


 

CKEDITOR UTITLITES

Left Alignment: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus ipsum, faucibus hendrerit diam a, tincidunt aliquam nisi. Morbi accumsan in massa vel semper. Cras tempor sapien nunc, id lacinia turpis maximus vel. Quisque placerat leo a velit rhoncus, sagittis volutpat mauris pellentesque. Mauris ut ipsum nec nulla bibendum interdum vel ut justo. 

Center Alignment: Mauris quis lacus nec tortor bibendum dignissim. Cras sed facilisis mauris. Maecenas ut massa tellus. In porttitor lectus vel facilisis scelerisque. Aliquam tincidunt non tellus ac semper. Nam eget tellus diam. Nam nibh nunc, porttitor vitae porta eu, scelerisque ut sem. Morbi ac sem est. Morbi gravida justo eu nibh semper, non dignissim velit efficitur.  

Right Alignment: Fusce tristique, lorem at laoreet rhoncus, nisi enim tristique dolor, varius interdum massa massa vitae lectus. Sed porta eros vitae nunc mollis finibus. Nulla feugiat, nulla et tincidunt condimentum, lacus ante bibendum diam, quis auctor magna lacus eget felis. Nulla tincidunt, diam vel pretium scelerisque, sem eros dignissim mi, vel tincidunt enim ligula eu mi. 

Justified Alignment: Vivamus varius bibendum gravida. Praesent a orci at metus commodo consequat. Pellentesque posuere diam felis, vel euismod massa maximus ac. Phasellus dignissim justo quis orci imperdiet dignissim. 

Text colours

Text colours

Options for text colours and titles etc, can be configured at admin/config/content/formats/manage/full_html
 

text-primary

text-primary-emphasis

text-bg-primary.text-white

text-secondary

text-secondary-emphasis

text-bg-secondary.text-dark

text-success

text-success-emphasis

text-bg-success.text-white

text-leaf-emphasis

text-bg-leaf.text-dark

text-purple-emphasis

text-bg-purple.text-white

text-danger

text-danger-emphasis

text-bg-danger.text-white

text-warning

text-warning-emphasis

text-bg-warning-emphasis.text-white

text-info

text-info-emphasis

text-bg-info.text-dark

text-dark

text-body

text-muted

text-bg-dark text-light