General Typography

ConsoleBox uses the Roboto font for all of its components.

Removing Roboto

In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the code below to your liking and add it to your custom css.

Remove Roboto google font link to your head section in index.html.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

add below code to your custom css and link to your font in head section in index.html

html, button, input, select, textarea{font-family:GillSans, Calibri, Trebuchet, sans-serif;}

Heading Styles

To preserve semantic structures, you should style the <h1> - <h6> heading tags with the styling classes shown below:

Note: Base font size is 10px for easy rem units (1.2rem = 12px). Body font size is 14px. sp = scalable pixels.

<h1 class="md-display-3">Headline</h1>
<h2 class="md-display-1">Headline</h2>
<h3 class="md-headline">Headline</h3>
                            

Body Copy

<p class="md-body-2">Body copy with medium weight.</p>
<md-button class="md-raised">Button</md-button>
<p class="md-body-1">Regular body copy <small class="md-caption">with small text</small>.</p>
<span class="md-caption">Caption</span>
                            

Headers

Custom Headers

Add class theme-title with header tag.

Blockquotes

Blockquotes are mainly used to give emphasis to a quote or citation. You can also use these for some extra text hierarchy and emphasis.

Paragraph

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.

Ordered List

A list of items in which the order does explicitly matter.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
   1. Phasellus iaculis neque
   2. Purus sodales ultricies
   3. Vestibulum laoreet porttitor sem
   4. Ac tristique libero volutpat at
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Inline Unordered List

To use Inline on a Unordered List, simply just add the class list-inline to a ul, see the example below.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Description List

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Horizontal Description List

To use Horizontal on a Description List, simply just add the class dl-horizontal to a dl, see the example below.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.