Back to the list

Fonts

By default, Fajny CSS uses Lato for the font. You can change this by editing the file scss/_variables.scss.

File to include

@import "components/fonts";

Titles display

Title H1 Display

Title H2 Display

Title H3 Display

Title H4 Display

Title H5 Display
<h1 class="display">Title H1 Display</h1>
<h2 class="display">Title H2 Display</h2>
<h3 class="display">Title H3 Display</h3>
<h4 class="display">Title H4 Display</h4>
<h5 class="display">Title H5 Display</h5>

Titles

Title H1

Title H2

Title H3

Title H4

Title H5
Title H6
<h1>Title H1</h1>
<h2>Title H2</h2>
<h3>Title H3</h3>
<h4>Title H4</h4>
<h5>Title H5</h5>
<h6>Title H6</h6>

Paragraphs

Paragraph

Paragraph strong

Paragraph italic

Paragraph with code

Paragraph with link

<p>Paragraph</p>
<p><strong>Paragraph strong</strong></p>
<p><em>Paragraph italic</em></p>
<p>Paragraph with <code>code</code></p>
<p>Paragraph with <a href="#">link</a></p>

Small

Small 
<small>Small</small>

Blockquote

Blockquote
<blockquote>Blockquote</blockquote>

Unordered list

  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
<ul>
    <li>Unordered list</li>
    <li>Unordered list</li>
    <li>Unordered list</li>
    <li>Unordered list</li>
    <li>Unordered list</li>
</ul>

Ordered list

  1. Ordered list
  2. Ordered list
  3. Ordered list
  4. Ordered list
  5. Ordered list
<ol>
    <li>Ordered list</li>
    <li>Ordered list</li>
    <li>Ordered list</li>
    <li>Ordered list</li>
    <li>Ordered list</li>
</ol>

Description list

Description list title
Description list content
Description list title
Description list content
Description list title
Description list content
Description list title
Description list content
Description list title
Description list content
<dl>
    <dt>Description list title</dt>
    <dd>Description list content</dd>
    <dt>Description list title</dt>
    <dd>Description list content</dd>
    <dt>Description list title</dt>
    <dd>Description list content</dd>
    <dt>Description list title</dt>
    <dd>Description list content</dd>
    <dt>Description list title</dt>
    <dd>Description list content</dd>
</dl>

Attributes

Name Example value Possible values Default Required
class="display" (h1, h2, h3, h4, h5) - - None No
data-color secondary-300 Any color from Fajny CSS currentColor No
data-align center "left" | "center" | "right" | "justify" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" left No