Typography

Pixel makes use of the Poppins Google Web Font for beatiful and readable typography.

Bootstrap 4 documentation
Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
                                                        
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
Customized headings

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text
Fancy display heading With faded secondary text 
                                                        
<h1>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h1>
<h2>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h2>
<h3>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h3>
<h4>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h4> 
<h5>
    Fancy display heading
        <small class="text-muted">With faded secondary text</small>
</h5>
<h6>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h6>
Display headings

Use .display-1-*, .display-2-* (eg. .display-1-lg, .display-2-sm) to increase the font size of text elements based on screen size.

Display 1

Display 2

Display 3

Display 4

                                                        
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
Paragraphs

Pixel is a beatifully crafted design system based on Bootstrap 4 Components. This theme was built following Bootstrap's methodologies by the heart. It has over xx components, xx sections and xx pages. It is built using the Sass language and is heavily built with mixins and variables.

It uses Gulp for running a local server, watching for changes, compiling CSS and building a distribution build. We also offer a classic version of the theme using only HTML, CSS and Javascript.

                                                        
<p>Pixel is a beatifully crafted design system based on Bootstrap 4 Components. This theme was built following Bootstrap's methodologies by the heart.</p>
<p>It uses Gulp for running a local server, watching for changes, compiling CSS and building a distribution build. We also offer a classic version of the theme using only HTML, CSS and Javascript.</p>
Lead paragraphs

Start your development with a Pixel Design System for Bootstrap 4. Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.

                                                        
    <p class="lead">Start your development with a Pixel Design System for Bootstrap 4. Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.</p>
Inline tags

Use the following standard, inline text tags to modify your content.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

                                                        
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Blockquotes

Want to quote some awesome people? We offer custom styles for the standard Bootstrap blockquotes.

Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.
Zoltan Szőgyényi
                                                        
<blockquote class="blockquote text-center">
    Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.
    <footer class="blockquote-footer mt-3 text-primary">Zoltan Szőgyényi</footer>
</blockquote>
Ordered & unordered lists
  • Minutes of the last meeting
  • Do we need yet more meetings?
  • Any other business
    • Programming
    • Web Design
    • Database
  • Something funny
  1. Minutes of the last meeting
  2. Do we need yet more meetings?
  3. Any other business
    1. Programming
    2. Web Design
    3. Database
  4. Something funny
                                                        
<ul>
    <li>Minutes of the last meeting</li>
    <li>Do we need yet more meetings?</li>
    <li>Any other business
        <ul>
            <li>Programming</li>
            <li>Web Design</li>
            <li>Database</li>
        </ul>
    </li>    
    <li>Something funny</li>
</ul>
<ol>
    <li>Minutes of the last meeting</li>
    <li>Do we need yet more meetings?</li>
    <li>Any other business
        <ol>
            <li>Programming</li>
            <li>Web Design</li>
            <li>Database</li>
        </ol>
    </li>    
    <li>Something funny</li>
</ol>