Visual Style Guide

#01 Typography

Small

Lorem ipsum dolor sit amet.

Base

Lorem ipsum dolor sit amet.

Medium

Lorem ipsum dolor sit amet.

Large

Lorem ipsum dolor sit amet.

XLarge

Lorem ipsum dolor sit amet.

XXLarge

Lorem ipsum dolor sit amet.

Huge

Lorem ipsum dolor sit amet.

#02 Buttons

Primary

Use our tool

Secondary

Use our tool

#03 Lists

Default lists

ul

ol

  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  4. Lorem ipsum dolor sit amet
  5. Dicta optio cumque dolore hic ea facilis
  6. Minus, possimus, veniam, incidunt eligendi
  7. Lorem ipsum dolor sit amet
  8. Dicta optio cumque dolore hic ea facilis
  9. Minus, possimus, veniam, incidunt eligendi
  10. Lorem ipsum dolor sit amet
  11. Dicta optio cumque dolore hic ea facilis
  1. Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  1. Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.

dl

Term
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.
Term
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.
Term
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.

Default lists of links

ul

ol

  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi

#05 Icons

Icon Circles

Icon Circles - Themed

Icon Circles - Large

#06 Breadcrumbs

#07 Table

Element Availability Description Description
src All browsers Gives the address (URL) of the video. Gives the address (URL) of the video.
poster All browsers Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins. Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.
Element Availability Description
src All browsers Gives the address (URL) of the video.
poster All browsers Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.
Element Availability
src Rules applied for any browser width over the value defined in the query.
poster Rules applied for any browser width over the value defined in the query.

Note: markdown isn't recognized in tables, therefore any code blocks should be wrapped in <code> tags.

#08 Grid

Consistent grid classes

#09 Colours

Blacks

Themes

Google

Helpers

#10 Highlights

Remember

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

TL;DR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Remember

  • Lorem ipsum dolor sit amet
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

Remember

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    <!DOCTYPE html>
    <html lang="en">
      <head>
            <title>Article Example: sample example</title>
      </head>
      <body>
        <div role="main">
          Hello, world.
        </div>
        </body>
    </html>
    
View full sample
<meta name="viewport" content="width=device-width, initial-scale=1.0">

You can also add inline code blocks some code here to your content.

TL;DR

  • Lorem ipsum dolor sit amet
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

Remember

  • Lorem ipsum dolor sit amet
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

#11 Editorial header

Layout Basics

What is the viewport?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Sed vitae varius augue, eu varius dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Donec augue diam, scelerisque eget lectus in, posuere aliquet mi. Pellentesque suscipit nisl gravida sem tincidunt, id blandit turpis commodo.

#12 Article section

4 Guides available
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

#13 Guides section

Documentation

Follow these guides and build web content users can access on any device they choose.

#14 Page header

#15 Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, illum, at quis vero nam minus incidunt consequatur reprehenderit aliquid blanditiis fugiat nihil dolor tempora distinctio ipsum quisquam debitis excepturi magni.

Name / Details

#16 Guides intro

#17 Article navigation

#18 Next lessons

#19 Related items

#20 Did you know

Why mobile first

Body - It is really simple. We create a basic page and add a “viewport”. The viewport is the most critical component you need for building mobile-first experiences. Without it, your site will not work well on a mobile device.

Lessons

See all lessons

#21 Latest spotlights

#22 Media elements

#23 Case study content

Title goes here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, fugit, quod, necessitatibus, eveniet praesentium id atque possimus placeat quo earum perferendis et laudantium eaque excepturi modi maiores facilis nam veritatis!

Who
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.
Who
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.
Who
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.
image placeholder

#24 Our view

Our view

The good

  • Phasellus ultrices nunc nec urna fermentum fermentum. Curabitur a interdum lacus.
  • Phasellus ultrices nunc nec urna fermentum fermentum. Curabitur a interdum lacus.
  • Phasellus ultrices nunc nec urna fermentum fermentum. Curabitur a interdum lacus.

Where to improve

  • Phasellus ultrices nunc nec urna fermentum fermentum. Curabitur a interdum lacus.
  • Phasellus ultrices nunc nec urna fermentum fermentum. Curabitur a interdum lacus.
  • Phasellus ultrices nunc nec urna fermentum fermentum. Curabitur a interdum lacus.

#25 Featured spotlight

#26 Featured list