This page serves as a reference for the visual and functional elements used throughout the template. Here you can explore typography, buttons, forms, lists, tables, quotes, and other components to see how they are styled and displayed.

Headings by default:

H1 Default styles for headings

H2 Default styles for headings

H3 Default styles for headings

H4 Default styles for headings

H5 Default styles for headings

H6 Default styles for headings

Lists

Ordered list example:

Poutine drinking vinegar bitters.
Coloring book distillery fanny pack.
Venmo biodiesel gentrify enamel pin meditation.
Jean shorts shaman listicle pickled portland.
Salvia mumblecore brunch iPhone migas.

Unordered list example:

Bitters semiotics vice thundercats synth.
Literally cred narwhal bitters wayfarers.
Kale chips chartreuse paleo tbh street art marfa.
Mlkshk polaroid sriracha brooklyn.
Pug you probably haven’t heard of them air plant man bun.

Table

Header 1	Header 2	Header 3	Header 4	Header 5
Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	Row:1 Cell:5
Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	Row:2 Cell:5
Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	Row:3 Cell:5
Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	Row:4 Cell:5
Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	Row:5 Cell:5
Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	Row:6 Cell:5

Quotes

The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!

{: .q-left }
> The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!

Design is not just what it looks like and feels like. Design is how it works.

– Steve Jobs

> Design is not just what it looks like and feels like. Design is how it works.
>
> <cite>– Steve Jobs</cite>

Callouts

Useful information that users should know, even when skimming content.

Helpful advice for doing things better or more easily.

Key information users need to know to achieve their goal.

Urgent info that needs immediate user attention to avoid problems.

Advises about risks or negative outcomes of certain actions.

{: .note }
Useful information that users should know, even when skimming content.

{: .tip }
Helpful advice for doing things better or more easily.

{: .important }
Key information users need to know to achieve their goal.

{: .warning }
Urgent info that needs immediate user attention to avoid problems.

{: .caution }
Advises about risks or negative outcomes of certain actions.

Syntax Highlighter

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: #1c2021;
}

li {
  width: 200px;
  min-height: 250px;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
}

$('.top').click(function () {
  $('html, body').stop().animate({ scrollTop: 0 }, 'slow', 'swing');
});
$(window).scroll(function () {
  if ($(this).scrollTop() > $(window).height()) {
    $('.top').addClass("top-active");
  } else {
    $('.top').removeClass("top-active");
  };
});