Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Content
  3. Typography

Typography

VelinStyle provides typography classes for headings, display headings, lead paragraphs, blockquotes, and styled lists — all responsive and theme-aware.

Headings

Use .velin-h1 through .velin-h6 to apply heading styles to any element. 

<p class="velin-h1">h1. VelinStyle heading</p>
<p class="velin-h2">h2. VelinStyle heading</p>
<p class="velin-h3">h3. VelinStyle heading</p>
<p class="velin-h4">h4. VelinStyle heading</p>
<p class="velin-h5">h5. VelinStyle heading</p>
<p class="velin-h6">h6. VelinStyle heading</p>

h1. VelinStyle heading

h2. VelinStyle heading

h3. VelinStyle heading

h4. VelinStyle heading

h5. VelinStyle heading

h6. VelinStyle heading

Display Headings

For larger, more prominent headings use .velin-display-1 through .velin-display-6. 

<h1 class="velin-display-1">Display 1</h1>
<h1 class="velin-display-2">Display 2</h1>
<h1 class="velin-display-3">Display 3</h1>
<h1 class="velin-display-4">Display 4</h1>
<h1 class="velin-display-5">Display 5</h1>
<h1 class="velin-display-6">Display 6</h1>

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Lead Paragraph

Make a paragraph stand out with .velin-lead. 

<p class="velin-lead">
  This is a lead paragraph. It stands out from regular paragraphs
  with a larger font size and lighter weight.
</p>

This is a lead paragraph. It stands out from regular paragraphs with a larger font size and lighter weight.

Blockquotes

Wrap content in .velin-blockquote and add an optional .velin-blockquote__footer for attribution. 

<blockquote class="velin-blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
  <footer class="velin-blockquote__footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Lists

VelinStyle provides unstyled and inline list variants. 

<!-- Unstyled -->
<ul class="velin-list-unstyled">
  <li>No bullets here</li>
  <li>Just plain items</li>
  <li>Nested lists still show bullets
    <ul><li>Nested item</li></ul>
  </li>
</ul>

<!-- Inline -->
<ul class="velin-list-inline">
  <li class="velin-list-inline__item">First</li>
  <li class="velin-list-inline__item">Second</li>
  <li class="velin-list-inline__item">Third</li>
</ul>

Unstyled

  • No bullets here
  • Just plain items
  • Nested lists still show bullets
    • Nested item

Inline

  • First
  • Second
  • Third

Inline Text Elements

You can use the mark tag to highlight text.

This line of text is deleted.

This line has a strikethrough.

This line is an addition to the document.

This line is underlined.

This line is small text.

This line is bold text.

This line is italicized text.

Theme wählen