Style Guide

Quick Reference

This page demonstrates GTmetrix's design system including form elements, buttons, typography, tables, notifications, tooltips, colors, and icons.

Form Elements

{
  "name": "Testing, 1, 2, 3",
  "email": "[email protected]",
  "password": "",
  "url": "http://",
  "agreeToTerms": false,
  "preferredSize": "medium",
  "features": [],
  "notifications": false,
  "country": "",
  "checkboxesInline": [],
  "togglesInline": [
    false,
    false,
    false
  ],
  "radiosInline": "1",
  "checkboxesVertical": [],
  "togglesVertical": [
    false,
    false,
    false
  ],
  "radiosVertical": "1",
  "selectLarge": "",
  "selectMultiple": []
}
Select an option...

Other:

Checkboxes (Horizontal)

Toggle Switches (Horizontal)

Radio Buttons (Horizontal)

Checkboxes (Vertical)

Toggle Switches (Vertical)

Radio Buttons (Vertical)

Buttons

Main content

Primary

Secondary

Tertiary

Modal/Menu

Primary

Secondary

Tertiary

Other

PRO CTA

Delete/Important

With icon

Disabled

Loading

As link

Mini Button Small Button Medium Button Large Button Jumbo Button

Looks like a link

This Button looks like a link

pre and code text

  if ($foo eq 'bar') {
          exit 0;
      }
      elsif ($foo eq 'baz') {
          exit 1;
      }

Here's some inline code: print "Hello world!"

Spinner

The spinner inherits its color from the current text color. Change it by applying the text color on your container of apply a specific text color to the spinner with <Spinner :style="{ color: myColor }" />

Props
size
:size="10"
:size="18" (default)
:size="20"
:size="30"
:size="40"
:size="50"
:size="60"

Typography

Heading 1

When we launched GTmetrix with Lighthouse, we started with a GTmetrix Grade calculation that heavily favoured performance over structure.

However, we've collected a lot of data over the past 3 years and we now feel that there is a tendency for the GTmetrix Grade calculation to be influenced by outliers.

Heading 2

When we launched GTmetrix with Lighthouse, we started with a GTmetrix Grade calculation that heavily favoured performance over structure.

However, we've collected a lot of data over the past 3 years and we now feel that there is a tendency for the GTmetrix Grade calculation to be influenced by outliers.

Heading 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When we launched GTmetrix with Lighthouse, we started with a GTmetrix Grade calculation that heavily favoured performance over structure.

However, we've collected a lot of data over the past 3 years and we now feel that there is a tendency for the GTmetrix Grade calculation to be influenced by outliers.

Heading 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When we launched GTmetrix with Lighthouse, we started with a GTmetrix Grade calculation that heavily favoured performance over structure.

However, we've collected a lot of data over the past 3 years and we now feel that there is a tendency for the GTmetrix Grade calculation to be influenced by outliers.

Heading 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When we launched GTmetrix with Lighthouse, we started with a GTmetrix Grade calculation that heavily favoured performance over structure.

However, we've collected a lot of data over the past 3 years and we now feel that there is a tendency for the GTmetrix Grade calculation to be influenced by outliers.

Heading 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When we launched GTmetrix with Lighthouse, we started with a GTmetrix Grade calculation that heavily favoured performance over structure.

However, we've collected a lot of data over the past 3 years and we now feel that there is a tendency for the GTmetrix Grade calculation to be influenced by outliers.

Lists

Sample text before list

  • List item
  • List item

  • List item with sub items

    • Sublist item
    • Sublist item
  1. List item
  2. List item

  3. List item with sub items

    1. Sublist item
    2. Sublist item

Notifications

Default Notification

Text for this box goes here. Cras sit amet tortor bibendum, tristique felis et Vivamus interdum nequec ac erat molestie efficitur. Nulla facilisi.

Info Notification

Text for this box goes here. Cras sit amet tortor bibendum, tristique felis et Vivamus interdum nequec ac erat molestie efficitur. Nulla facilisi.

Success Notification

Text for this box goes here. Cras sit amet tortor bibendum, tristique felis et Vivamus interdum nequec ac erat molestie efficitur. Nulla facilisi.

Error Notification

Text for this box goes here. Cras sit amet tortor bibendum, tristique felis et Vivamus interdum nequec ac erat molestie efficitur. Nulla facilisi.

h3 Heading Notification

Text for this box goes here. Cras sit amet tortor bibendum, tristique felis et Vivamus interdum nequec ac erat molestie efficitur. Nulla facilisi.

Slim notifications with one line have an extra class.

Slim notifications with one line have an extra class.

Modal Notification

Text for this box goes here. Cras sit amet tortor bibendum, tristique felis et Vivamus interdum nequec ac erat molestie efficitur. Nulla facilisi.

Tooltips

Variants
Directions

Sheet

A panel that slides in from the right. Controlled via useSheet(name), which returns open, close, and toggle. Use the same name in both the hook call and the <Sheet name="…"> prop to link them. Multiple independent sheets can coexist by using different names.

Tables

NameIDFavorite Color
Jim00001Blue
Sue00002Red
Barb00003Green
NameIDFavorite Color
Jim00001Blue
Sue00002Red
Barb00003Green
<Tooltip direction="top" />
<Tooltip direction="left" />
<Tooltip direction="right" />
<Tooltip direction="bottom" />