Raster
Raster is a simple typography & grid system for building harmonious graphical websites.
This document showcases a variety of features of Raster.
Raster makes sure that text lines up across columns and provides some simple customization via CSS variables.
Settings
Values
Level 1 heading
Paragraph
with two lines
Paragraph
with two lines
Level 2 heading
Paragraph
with two lines
Paragraph with one
two
three lines
Level 3 heading
Paragraph
with two lines
Level 4 heading
Paragraph
with two lines
Paragraph with one
two and
three lines
Paragraph with one and
two lines
Paragraph with one
two and
three lines
Paragraph with one and
two lines
Paragraph with one line
Paragraph with one
two
three and
four lines
Paragraph with one
two and
three lines
Paragraph with one
and two lines
Level 2 heading
Paragraph with one and
two lines
Paragraph with one and
two lines
Level 1 heading
Paragraph with one and
two lines
Paragraph with one
two
three and
four lines
Paragraph with one line
Level 3 heading
Paragraph with one
and two lines
Level 3 heading
Paragraph with one and
two lines
Paragraph with one
two
three and
four lines
Paragraph with one and
two lines
Paragraph with one
two and
three lines
Level 5 heading
Paragraph with one
two
three and
four lines
Paragraph with one
two
three and
four lines
Level 1 heading
Level 1 heading
Paragraph with one line
Level 1 heading
Level 2 heading
Paragraph with one
and two lines
Level 1 heading
Level 3 heading
Paragraph with one
two and
three lines
Level 1 heading
Level 4 heading
Paragraph with one
two and
three lines
Level 2 heading
Level 1 heading
Paragraph with one line
Level 2 heading
Level 2 heading
Paragraph with one
and two lines
Level 2 heading
Level 3 heading
Paragraph with one
two and
three lines
Level 2 heading
Level 4 heading
Paragraph with one
two and
three lines
Level 3 heading
Level 1 heading
Paragraph with one line
Level 3 heading
Level 2 heading
Paragraph with one
and two lines
Level 3 heading
Level 3 heading
Paragraph with one
two and
three lines
Level 3 heading
Level 4 heading
Paragraph with one
two and
three lines
Level 4 heading
Level 1 heading
Paragraph with one line
Level 4 heading
Level 2 heading
Paragraph with one
and two lines
Level 4 heading
Level 3 heading
Paragraph with one
two and
three lines
Level 4 heading
Level 4 heading
Paragraph with one
two and
three lines
Level 1 singĺỵ line heading
Level 1 singĺỵ line heading
Paragraph with one line
Level 1 singĺỵ line heading
Level 2 singĺỵ line heading
Paragraph with one
and two lines
Level 1 singĺỵ line heading
Level 3 singĺỵ line heading
Paragraph with one
two and
three lines
Level 1 singĺỵ line heading
Level 4 singĺỵ line heading
Paragraph with one
two and
three lines
Level 2 singĺỵ line heading
Level 1 singĺỵ line heading
Paragraph with one line
Level 2 singĺỵ line heading
Level 2 singĺỵ line heading
Paragraph with one
and two lines
Level 2 singĺỵ line heading
Level 3 singĺỵ line heading
Paragraph with one
two
three and
four lines
Level 2 singĺỵ line heading
Level 4 singĺỵ line heading
Paragraph with one
two
three and
four lines
Level 3 singĺỵ line heading
Level 1 singĺỵ line heading
Paragraph with one line
Level 3 singĺỵ line heading
Level 2 singĺỵ line heading
Paragraph with one
and two lines
Level 3 singĺỵ line heading
Level 3 singĺỵ line heading
Paragraph with one
two
three and
four lines
Level 3 singĺỵ line heading
Level 4 singĺỵ line heading
Paragraph with one
two
three and
four lines
Level 4 singĺỵ line heading
Level 1 singĺỵ line heading
Paragraph with one line
Level 4 singĺỵ line heading
Level 2 singĺỵ line heading
Paragraph with one
and two lines
Level 4 singĺỵ line heading
Level 3 singĺỵ line heading
Paragraph with one
two
three and
four lines
Level 4 singĺỵ line heading
Level 4 singĺỵ line heading
Paragraph with one
two
three and
four lines
Level 4 heading
Level 1 heading
single line
Level 4 heading
Level 1 singĺỵ line
single line
Level 4 singĺỵ line
Level 1 singĺỵ line
single line
Level 4 singĺỵ line
Level 1 header
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
single line
Level 1 heading
Level 2 heading
Level 3 heading
Level 4 heading
Level 1 singĺỵ line
Level 2 singĺỵ line
Level 3 singĺỵ line
Level 4 singĺỵ line
Paragraph with one
two
three
four and
five lines
Level 4 heading
Level 3 heading
Level 2 heading
Level 1 heading
Level 4 singĺỵ line
Level 3 singĺỵ line
Level 2 singĺỵ line
Level 1 singĺỵ line
Paragraph with one
and two lines
Level 1 singĺỵ line
Paragraph with one
two
three and
four lines
Level 1 singĺỵ line
Plain textLevel 3 singĺỵ line
Paragraph with one
two
three and
four lines
Level 3 singĺỵ line
Plain textPlain text
Plain text
Plain text
Level 2 singĺỵ line
Paragraph with one
two
three and
four lines
Level 2 singĺỵ line
Plain textPlain text
Plain text
Level 4 singĺỵ line
Paragraph with one
and two lines
Paragraph with one
two
three and
four lines
Level 4 singĺỵ line
Plain textLevel 1 heading
Level 2 heading
Paragraph with one
two and
three lines
Level 3 heading
Level 4 heading
Paragraph with one line
Paragraph with one
two and
three lines
Paragraph with
line
line
line
line
line
line
line
line
Level 1 heading
Level 2 heading
Level 3 heading
Paragraph with one line
Level 1 singĺỵ line
Level 2 singĺỵ line
Paragraph with one
two and
three lines
Level 3 singĺỵ line
Level 4 singĺỵ line
Paragraph with one line
Paragraph with one
two
three and
four lines
Paragraph with
line
line
line
line
line
line
line
line
line
Level 1 singĺỵ line
Level 2 singĺỵ line
Level 3 singĺỵ line
Paragraph with one line
Level 1
Level 2
Level 3
Level 4
Level 5
Level 1 header
large size
Level 1 header
xlarge size
Level 1 header
xxlarge size
Level 1 header
xxxlarge size
Single-line xxxlarge size
Level 1
heading
wråpping
Åuĺtipĺe
lines
Paragraph with one
two
three
four and
five lines
Paragraph with one
two and
three lines
Paragraph with one and
two lines
Paragraph with one
two and
three lines
Paragraph with one line
Paragraph with one
two and
three lines
Level 2 heading that wraps over Åuĺtipĺe lines and keeps on wrapping
Paragraph with one and
two lines
Level 3 heading that wraps over Åuĺtipĺe lines and keeps on wrapping and wrapping and wrapping and wrapping
Paragraph with one line
Paragraph with one
two
three and
four lines
Paragraph with one line
Paragraph with one line
Level 4 heading that wraps over Åuĺtipĺe lines and keeps on wrapping and wrapping and wrapping and wrapping
Paragraph with one
two
three and
four lines
Paragraph with one and
two lines
Paragraph with one
two
three and
four lines
Paragraph with one
two
three
four and
five lines
Contain and align to top
Contain and align to bottom right
Fill
Paragraph with one
two
three
four and
five lines
Paragraph with one
two
three
four and
five lines
Fill from bottom left
Fill from bottom left
Contain and align to top
Contain and align to top
A third of the distance across the Beach, the meadow ends and sand begins. This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one. A third of the distance across the Beach, the meadow ends and sand begins.
This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one.
The outline of this inner shore is most irregular, curving and bending in and out and back upon itself, making coves and points and creeks and channels, and often pushing out in flats with not water enough on them at low tide to wet your ankles.
A third of the distance across the Beach, the meadow ends and sand begins. This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one.
A third of the distance across the Beach, the meadow ends and sand begins. This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one. A third of the distance across the Beach, the meadow ends and sand begins.
This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one.
The outline of this inner shore is most irregular, curving and bending in and out and back upon itself, making coves and points and creeks and channels, and often pushing out in flats with not water enough on them at low tide to wet your ankles.
A third of the distance across the Beach, the meadow ends and sand begins. This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one.
A third of the distance across the Beach, the meadow ends and sand begins. This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one. A third of the distance across the Beach, the meadow ends and sand begins.
This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one.
The outline of this inner shore is most irregular, curving and bending in and out and back upon itself, making coves and points and creeks and channels, and often pushing out in flats with not water enough on them at low tide to wet your ankles.
A third of the distance across the Beach, the meadow ends and sand begins. This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, and sometimes only one.
Paragraph with one
two
three and
four lines
Paragraph with one
two
three and
four lines
Paragraph with one
two
three and
four lines
Paragraph with one
two
three and
four lines
Paragraph with one line
Paragraph with one line
Paragraph with one and
two lines
Paragraph with one and
two lines
Paragraph with one line
Paragraph with one and
two lines
hr with text
hr with p
p with hr
hr with p
hr with p (multiple entries tests fractional baseline shift)
p with hr
p with hr
p with hr
Unordered list
Leading paragraph
- Unordered list item
spanning multiple
lines - Unordered list item
spanning multiple
lines - Unordered list item
spanning multiple
lines
Compact unordered list
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
Paragraph with one and
two lines
Ordered list
Leading paragraph
- Ordered list item
spanning multiple
lines - Ordered list item
spanning multiple
lines - Ordered list item
spanning multiple
lines
Compact ordered list
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
Paragraph with one and
two lines
Ordered & unordered lists
- Ordered list item
-
Plain text
- Unordered list item
- Unordered list item
- Unordered list item
-
Paragraph
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
Task list
Leading paragraph
- Buy milk
- Try Raster
- Call Mom
- Regular list item
Ordered list with custom start
Paragraph
- Ordered list item
- Ordered list item
- Ordered list item
-
Paragraph
- Unordered list item
- Unordered list item
- Unordered list item
Compact ordered list with custom start
Paragraph
- Ordered list item
- Ordered list item
- Ordered list item
-
Paragraph
- Ordered list item
- Ordered list item
- Ordered list item
Code
The variable --fontMono can be set to change the font
family used for monospace text.
CSS classes .code and .monospace can
be use to enable monospace text on any element.
Here is a really long single line that should wrap when the column is narrow
<code><pre>
// CopyN copies n bytes (or until an error) from src to dst.
// It returns the number of bytes copied and the earliest
// error encountered while copying.
// On return, written == n if and only if err == nil.
//
// If dst implements the ReaderFrom interface,
// the copy is implemented using it.
//
func CopyN(dst Writer, src Reader, n int64) (written int64, err error) {
written, err = Copy(dst, LimitReader(src, n))
if written == n {
return n, nil
}
if written < n && err == nil {
// src stopped early; must have been EOF.
err = EOF
}
return
}
Inline
CopyN copies n bytes (or until an error)
from src to dst.
It returns the number of bytes copied and the earliest error encountered while copying.
On return, written == n if
and only if err == nil.
If dst implements the ReaderFrom interface,
the copy is implemented using it.
Leading paragraph before a table of file types
| Header | Mime type | Extensions | Description |
|---|---|---|---|
89 50 4E 47 0D 0A 1A 0A | image/png | png | PNG image |
47 49 46 38 39 61 | image/gif | gif | GIF image |
FF D8 FF | image/jpeg | jpg jpeg | JPEG image |
4D 4D 00 2B | image/tiff | tif tiff | TIFF image |
42 4D | image/bmp | bmp | Bitmap image |
00 00 01 00 | image/x-icon | ico | Icon image |
Trailing paragraph
Paragraph line one
line two
line three
line four
Paragraph line one
line two
line three
line four
line five
line six
line seven
Paragraph line one
line two
line three
line four
line five
line six
Alignment demo. Table has class=w-full
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| default | left | center | right |
Paragraph line one
line two
line three
line four
line five
line six
Paragraph line one
line two
line three
line four
| Header | Mime type | Extensions | Description |
|---|---|---|---|
89 50 4E 47 0D 0A 1A 0A | image/png | png | PNG image |
47 49 46 38 39 61 | image/gif | gif | GIF image |
FF D8 FF | image/jpeg | jpg jpeg | JPEG image |
4D 4D 00 2B | image/tiff | tif tiff | TIFF image |
42 4D | image/bmp | bmp | Bitmap image |
00 00 01 00 | image/x-icon | ico | Icon image |
| Header | Mime type | Extensions | Description |
|---|---|---|---|
89 50 4E 47 0D 0A 1A 0A | image/png | png | PNG image |
47 49 46 38 39 61 | image/gif | gif | GIF image |
FF D8 FF | image/jpeg | jpg jpeg | JPEG image |
4D 4D 00 2B | image/tiff | tif tiff | TIFF image |
42 4D | image/bmp | bmp | Bitmap image |
00 00 01 00 | image/x-icon | ico | Icon image |
Trailing paragraph
Paragraph line one
line two
line three
line four
Paragraph line one
line two
line three
line four
line five
line six
line seven
Paragraph line one
line two
line three
line four
Paragraph line one
line two
line three
line four
Paragraph line one
line two
line three
line four
H3
| Mime type |
|---|
| image/png |
| image/gif |
| image/jpeg |
| image/tiff |
H4
| Mime type |
|---|
| image/png |
| image/gif |
| image/jpeg |
| image/tiff |
Trailing paragraph
| Mime type |
|---|
| image/png |
| image/gif |
| image/jpeg |
| image/tiff |
| Mime type |
|---|
| image/png |
| image/gif |
| image/jpeg |
| image/tiff |
Trailing paragraph