Default Heading Styles:
H1 : Lorem ipsum 2.875/3.5
Visual eq: 46/56
H2 : Lorem ipsum 2.375/2.75
Visual eq 38/44
H3 : Lorem ipsum 1.75/2.25
Visual eq: 28/36
h4 : Lorem ipsum 1.375/1.75
Visual eq: 22/28
h5 : Lorem ipsum
Body Styles
.body-small: 1/1.5rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque mollis ex id posuere egestas. Fusce efficitur tortor vel ullamcorper tempor. Vestibulum porta purus ac vestibulum sollicitudin.
Nullam sagittis ex in luctus ultricies. Donec lacinia dolor ut nulla vestibulum mattis. Praesent dapibus quam id sapien cursus, id lobortis ligula cursus. Aliquam luctus nisi eget ex malesuada, nec lacinia ligula tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Default: 1.1875/1.75rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque mollis ex id posuere egestas. Fusce efficitur tortor vel ullamcorper tempor. Vestibulum porta purus ac vestibulum sollicitudin.
Nullam sagittis ex in luctus ultricies. Donec lacinia dolor ut nulla vestibulum mattis. Praesent dapibus quam id sapien cursus, id lobortis ligula cursus. Aliquam luctus nisi eget ex malesuada, nec lacinia ligula tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
.body-large : 1.375/2rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque mollis ex id posuere egestas. Fusce efficitur tortor vel ullamcorper tempor. Vestibulum porta purus ac vestibulum sollicitudin.
Nullam sagittis ex in luctus ultricies. Donec lacinia dolor ut nulla vestibulum mattis. Praesent dapibus quam id sapien cursus, id lobortis ligula cursus. Aliquam luctus nisi eget ex malesuada, nec lacinia ligula tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Tables - made with grids
Tables are best (?) made with a grid element.
To size the tables so that some columns or rows are larger/smaller, they have to be customized with proportional fr units (see examples). Borders have to be individually applied to “cells,” which is a buzzkill.
This is a work in progress.
Top
Heading One
Heading Two
Item_1
Description_1
Item_2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item_Bottom
Bottom ipsum dolor sit amet, consectetur adipiscing elit.
Left
One
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
One
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Three
Colors
link – blue
1E6BE6
button hover – sky blue
99D6FF
light blue
CCEBFF
extra light blue
E2EFF8
link hover – dark blue
003078
UI focus color, active info
9BD3F8
brand secondary
0072BC
Fixed values converted to REM units with a 16px base:
Fixed | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96 | 104 | 112 | 120 | 128 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Relative | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 |
For more info, see gov.uk spacing and type scale
Grid:
44rem wide, 8rem min height
1 rem gap, row and column
Grid 12×3: 36rem, 1rem gap, 1rem padding
H1: Page Title - 46px
H1: Page Title - default
H2: Section Heading - 38px bold
H2: Heading - default
New text editor element. Default-styled text. Pretty standard text right here, if you ask me. Here’s an inline link.
A Bolded Link
Description text beneath.
H2: Default Style Examples
Paragraph content.
H3 Heading
Paragraph content.
H4 Heading
Paragraph content.
Bolded Fake Heading
Paragraph content.
H5 Heading
Paragraph content.
H6 Heading
Paragraph content.
- Bullet List – Item 1
- Bullet List – Item 2
- Bullet List – Item 3
Paragraph content.
Section Heading (h2)
Metro content is simple and direct.
Bolded In-line Pseudo-Heading
- Bulleted Highlight
Super great helpful details
- Bulleted Highlight
You have to shif-return for un-bulleted lines
- Bulleted Highlight
The details just keep coming.
Regular Bulleted List
- This
- That
- The Other
- Cash (Bus Only)
The current default paragraph format.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H2 : Section Heading
Metro Call-out Section
Information about Metro? Here’s what to expect.
Bolded Fake Heading
With some content underneath it.
Bolded Fake Heading
Yet more content. Be mindful of noise.
Section Heading (h2)
Watch out—we have another section here.
Heading (h3)
Paragraph content.
Sub-Head (h4)
Paragraph content.
Bolded Fake Heading
Paragraph content.
Heading (h5)
Paragraph content.
Heading (H6)
Paragraph content.
The current default paragraph formatting. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
