Style Guide
Form elements
Buttons
Normally a with class or button with class. Click to show busy state.
Main content
Modal/Menu
Other
A simple form group:
Profile
Your personal information
You can enter more text here if you wish. Blah, blah, blah.
Menus and Modals
pre and code text:
if ($foo eq "bar") {
exit 0;
}
elsif ($foo eq "baz") {
exit 1;
}
Here's some inline code: print "Hello world!"
Tables:
| Name | ID | Favorite Color |
|---|---|---|
| Jim | 00001 | Blue |
| Sue | 00002 | Red |
| Barb | 00003 | Green |
| Name | ID | Favorite Color |
|---|---|---|
| Jim | 00001 | Blue |
| Sue | 00002 | Red |
| Barb | 00003 | Green |
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
- List item
- List item
-
List item with sub items
- Sublist item
- Sublist item
Links:
This is an external linkThis is an external link
This is an external link
This is an external link
This is an external link
This is an external link
This is an external link
Box heading
This is using the box class
Notifications
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.
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.
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
Help tooltip (gray)
Warning tooltip on icon (yellow)
Colors
Here are some of the most common colors used throughout. See naming convention tool.
Color playground
The following colors control the boxes and text below
This is a title
This is text
This is a title inside box
This is text inside box