logo

Heading Titles H1

Tag: h1

Heading Titles H2

Tag: h2

Heading Titles H3

Tag: h3

Heading Titles H4

Tag: h4

Class Name: sidebar
Tag: h3

Class Name: sidebar
Tag: h4

Class Name: footer-menu
Tag: h5

This is standard Paragraph text and here is a link.


Tags: p (paragraph) | a (anchor)

This is standard Paragraph text with a highlighted section.


Class Name: highlight-text
Tags: p (paragraph)

This is white Paragraph text.


Class Name: text-white

Alignment

Left Alignment

You can also define for specific media query.


Tablet / -tab (992px and lower)

Small Devices / -sd (768px and lower)

Mobile / -mob (576px and lower)


Class Name: left | left-tab | left-sd | left-mob

Center Alignment

You can also define for specific media query.


Tablet / -tab (992px and lower)

Small Devices / -sd (768px and lower)

Mobile / -mob (576px and lower)


Class Name: center | center-tab | center-sd | center-mob

Right Alignment

You can also define for specific media query.


Tablet / -tab (992px and lower)

Small Devices / -sd (768px and lower)

Mobile / -mob (576px and lower)


Class Name: right| right-tab | right-sd | right-mob

Blockquote

This is an example of a blockquote, Suspendisse laoreet auctor odio, in bibendum felis congue vitae. Nullam faucibus massa pretium arcu pellentesque, vel blandit nibh imperdiet. Nullam sed eros molestie, suscipit elit sit amet, tempus arcu.

- Authour
business or link


Tags: blockquote | p | strong | em

Lists

Standard UnOrdered List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Tags: ul (unordered list) | li (list item)

Standard Ordered List

  1. Vestibulum at elit pulvinar
  2. In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  3. Cras augue risus
  4. Maecenas efficitur enim in neque

Tags: ol (ordered list) | li (list item)

Standard Description List

Defined Term List
Defined Description sub/list
Cras augue risus
Maecenas efficitur enim in neque

Tags: dl (description list) | dt (description term) | dd (define description)

Checked Lists


NOTE: After you have installed this package update the check images to your current media library by changing the URL in the Custom CSS.

Check List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Class Name: check-list
Tags: ul (unordered list) | li (list item)

Check Circle List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Class Name: check-circle-list
Tags: ul (unordered list) | li (list item)

Check Square List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Class Name: check-square-list
Tags: ul (unordered list) | li (list item)

Cards

Simple Card


Check List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Class Name: card-simple
Tags: div | h4

Simple Border Card


Check List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Class Name: card-simple | border-blue
Tags: div | h4

Hovering Card


Check List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Class Name: card-hovering
Tags: div | h4

Hovering Border Card


Check List

  • Vestibulum at elit pulvinar
  • In tempor nunc volutpat, consectetur ex eu, accumsan sapien
  • Cras augue risus
  • Maecenas efficitur enim in neque

Class Name: card-hovering | border-blue
Tags: div | h4

Testimonial Card (example)

This is an example of a blockquote, Suspendisse laoreet auctor odio, in bibendum felis congue vitae. Nullam faucibus massa pretium arcu pellentesque, vel blandit nibh imperdiet. Nullam sed eros molestie, suscipit elit sit amet, tempus arcu.

- Authour
business or link


Class Name: card-simple
Tags:Tags: div | blockquote | h4 | p | strong | em

Hovering Testimonial Card (example)

This is an example of a blockquote, Suspendisse laoreet auctor odio, in bibendum felis congue vitae. Nullam faucibus massa pretium arcu pellentesque, vel blandit nibh imperdiet. Nullam sed eros molestie, suscipit elit sit amet, tempus arcu.

- Authour
business or link


Class Name: card-hovering
Tags: div | blockquote | h4 | p | strong | em

Opacity Card

This is a opacity background card to lay over a darker background or busy image section like this one.

As you can see under this class the text is white with a small text shadow to help the text pop. Which is set for tags h1, h2, h3 and p. The opacity card is also set to a max width of 720 pixels.

If you would like to adjust any element of this class to better suit your build, you can find it in WPO Custom CSS under 'Cards', then 'Opacity Card'.


Class Name: card-light-opaque
Tags: h1 | h2 | h3 | p

Font Aweone Icons

Normal Icon

Extra Large Icon


Class Name: fa-icon-xl

Large Icon


Class Name: fa-icon-lg

Medium Icon


Class Name: fa-icon-md

Small Icon


Class Name: fa-icon-sm

Linked Icon

Extra Large Icon


Class Name: fa-icon-xl
Tag: div (division) | a (anchor)

Large Icon


Class Name: fa-icon-lg
Tag: div (division) | a (anchor)

Medium Icon


Class Name: fa-icon-md
Tag: div (division) | a (anchor)

Small Icon


Class Name: fa-icon-sm
Tag: div (division) | a (anchor)

Buttons


Class Name: button-red
Tags: a


Class Name: button-blue
Tags: a


Class Name: button-outline
Tags: a

logo