List Styles

Defining the various list styles for this theme.

Default Lists

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis dictum.
    • Morbi tempor enim vel leo varius elementum.
    • Integer non rhoncus turpis.
    • Suspendisse sed malesuada purus.
  • Integer in ligula vitae lorem suscipit iaculis.
  • In metus nulla, volutpat non sagittis vitae.
  • Donec bibendum lorem vulputate ante tristique.

List – Square

  • Fusce adipiscing tellus a lacus pretium mattis.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis dictum sed.
    • Morbi tempor enim vel leo varius elementum.
    • Integer non rhoncus turpis.
    • Suspendisse sed malesuada purus.
  • Integer in ligula vitae lorem suscipit.
  • In metus nulla, volutpat non sagittis.
  • Donec bibendum lorem vulputate ante.

Default Ordered List

  1. Fusce adipiscing tellus a lacus pretium mattis.
  2. Aliquam porttitor mattis nisi non sagittis.
  3. Vivamus hendrerit purus eget turpis.
    • Morbi tempor enim vel leo.
    • Integer non rhoncus turpis.
    • Suspendisse sed malesuada.
  4. Integer in ligula vitae lorem suscipit iaculis.
  5. In metus nulla, volutpat non sagittis vitae.
  6. Donec bibendum lorem vulputate ante tristique.

List – Leading Zero

  1. Fusce adipiscing tellus a lacus pretium.
  2. Aliquam porttitor mattis nisi non sagittis.
  3. Vivamus hendrerit purus eget turpis dictum.
    • Morbi tempor enim vel leo varius.
    • Integer non rhoncus turpis.
    • Suspendisse sed malesuada purus.
  4. Integer in ligula vitae lorem suscipit.
  5. In metus nulla, volutpat non sagittis vitae.
  6. Donec bibendum lorem vulputate ante tristique.

List – Upper Alpha

  1. Fusce adipiscing tellus a lacus pretium mattis.
  2. Aliquam porttitor mattis nisi non sagittis.
  3. Vivamus hendrerit purus eget turpis dictum.
    • Morbi tempor enim vel leo varius.
    • Integer non rhoncus turpis.
    • Suspendisse sed malesuada purus.
  4. Integer in ligula vitae lorem suscipit iaculis.
  5. In metus nulla, volutpat non sagittis vitae.
  6. Donec bibendum lorem vulputate ante tristique.

List – Lower Alpha

  1. Fusce adipiscing tellus a lacus pretium mattis.
  2. Aliquam porttitor mattis nisi non sagittis.
  3. Vivamus hendrerit purus eget turpis dictum.
    • Morbi tempor enim vel leo varius.
    • Integer non rhoncus turpis.
    • Suspendisse sed malesuada purus.
  4. Integer in ligula vitae lorem suscipit iaculis.
  5. In metus nulla, volutpat non sagittis vitae.
  6. Donec bibendum lorem vulputate ante tristique.

Image List Styles

Aside from the default unordered and unordered list styles you see above, this theme also includes image based styles as you see below. Because of their style, I recommend “not” to go more than 3 lines, or add sub-level lists to these.

List – Arrow 1

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Arrow 2

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Arrow 3

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Arrow 4

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Circles

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Starburst

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Checkmark

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

Adding Colour

Adding colour to your list styles is very easy because you add an extra class to your <ul> to give it the colours that you see below. In addition to these, the default colour is grey which you see above.

List – Red

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Yellow

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Blue

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

List – Green

  • Fusce adipiscing tellus a lacus pretium.
  • Aliquam porttitor mattis nisi non sagittis.
  • Vivamus hendrerit purus eget turpis.
  • Donec bibendum lorem vulputate ante tristique tincidunt.

Leave a reply

required