Typographic Elements

Unordered and ordered lists:

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  • Nam liber tempor cum soluta nobis eleifend option congue
    • Nam liber tempor cum soluta
    • Duis autem vel eum iriure
    • Lorem ipsum dolor sit amet
  • Ut wisi enim ad minim veniam, quis nostrud exerci
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  2. Nam liber tempor cum soluta nobis eleifend option congue
    1. Nam liber tempor cum soluta
    2. Duis autem vel eum iriure
    3. Lorem ipsum dolor sit amet
  3. Ut wisi enim ad minim veniam, quis nostrud exerci

Lists with icons:

  • to achieve this effect
  • add class “arrow” to UL
  • like <ul class=”arrow”>
  • to achieve this effect
  • add class “calendar” to UL
  • like <ul class=”calendar”>
  • to achieve this effect
  • add class “checklist” to UL
  • like <ul class=”checklist”>
  • to achieve this effect
  • add class “delete” to UL
  • like <ul class=”delete”>
  • to achieve this effect
  • add class “file” to UL
  • like <ul class=”file”>
  • to achieve this effect
  • add class “folder” to UL
  • like <ul class=”folder”>
  • to achieve this effect
  • add class “heart” to UL
  • like <ul class=”heart”>
  • to achieve this effect
  • add class “info” to UL
  • like <ul class=”info”>
  • to achieve this effect
  • add class “lock” to UL
  • like <ul class=”lock”>
  • to achieve this effect
  • add class “pencil” to UL
  • like <ul class=”pencil”>
  • to achieve this effect
  • add class “person” to UL
  • like <ul class=”person”>
  • to achieve this effect
  • add class “rss” to UL
  • like <ul class=”rss”>
  • to achieve this effect
  • add class “shop” to UL
  • like <ul class=”shop”>
  • to achieve this effect
  • add class “song” to UL
  • like <ul class=”song”>
  • to achieve this effect
  • add class “star” to UL
  • like <ul class=”star”>
  • to achieve this effect
  • add class “star” to UL
  • like <ul class=”star”>
  • to achieve this effect
  • add class “star2” to UL
  • like <ul class=”star2″>
  • to achieve this effect
  • add class “trash” to UL
  • like <ul class=”trash”>
  • to achieve this effect
  • add class “tweak” to UL
  • like <ul class=”tweak”>
  • to achieve this effect
  • add class “unlock” to UL
  • like <ul class=”unlock”>
  • to achieve this effect
  • add class “warn” to UL
  • like <ul class=”warn”>

 

Text blocks:

This is warning text block style applied to a paragraph of text. To use it, apply class of txtblock-warning to your paragraph of text, in example: <p class=”txtblock-warning”>…some text goes here…</p>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

This is info text block style applied to a paragraph of text. To use it, apply class of txtblock-info to your paragraph of text, in example: <p class=”txtblock-info”>…some text goes here…</p>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

This is error text block style applied to a paragraph of text. To use it, apply class of txtblock-error to your paragraph of text, in example: <p class=”txtblock-error”>…some text goes here…</p>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

Quotes:

This is quotes text block style applied to a paragraph of text. To use it, apply class of txtblock-quote to your paragraph of text, in example: <p class=”txtblock-quote”>…some text goes here…</p>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

Drop caps:

This is a dropcap style applied to a paragraph of text. To use it, apply class of dropcap to your paragraph of text, in example: <p class=”dropcap”>…some text goes here…</p>. To edit this style, find class .dropcap in CSS stylesheet file style.css. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

1To make such paragraph of text, you should enter a number before the rest of the text in the paragraph, and wrap it in span with a class of sparky-drop-default, like this: <p><span class=”sparky-drop-default”>1</span>…your text here…</p>

2To make such paragraph of text, you should enter a number before the rest of the text in the paragraph, and wrap it in span with a class of sparky-drop-circle, like this: <p><span class=”sparky-drop-circle”>2</span>…your text here…</p>

ATo make such paragraph of text, you should enter a number before the rest of the text in the paragraph, and wrap it in span with a class of sparky-drop-square, like this: <p><span class=”sparky-drop-square”>A</span>…your text here…</p>

BTo make such paragraph of text, you should enter a number before the rest of the text in the paragraph, and wrap it in span with a class of sparky-drop-round, like this: <p><span class=”sparky-drop-round”>B</span>…your text here…</p>

 

Inset Styles:

Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.To make such block of text, wrap it into a span with a class of inset-left. Optionally, inside this span you can add another span with class of inset_title for title. Here’s an example: <span class=”inset_left”><span class=”inset_title”>Title</span>…your text goes here…</span>. In a similar way, you can align the block of text to the right. Use class inset_right, instead of inset_left. Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. If you need to change width or something else in those blocks, you can edit classes .inset_left and .inset_right in CSS stylesheet style.css.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.

 

Highlighted text:

You can highlight parts of your text inside paragraphs. Wrap it in span and use class sparky-highlight sparky-highlight-yellow for yellow marker, or class sparky-highlight sparky-highlight-green for green marker, or class sparky-highlight sparky-highlight-blue for blue marker, or class sparky-highlight sparky-highlight-purple for purple marker, or class sparky-highlight sparky-highlight-pink for pink marker, or class sparky-highlight sparky-highlight-orange for orange marker. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.