SAMPLE This page renders every block type and chrome state thecornerstone theme can draw, with sample copy. It is the visual test before a site goes live, and it isnoindex.
Typography
Heading one
Heading two
Heading three
Heading four
A body paragraph at --type-1, with a same-page link and a footnote reference.1
- Unordered list item
- Unordered list item
A blockquote, drawn with the quote knobs.
| Item | Status |
|---|---|
| Spring clean-up | Done |
| Bench repairs | In progress |
1. Footnotes: small sans, muted, above a rule.
Block: text
About the group
We are volunteers. We meet on the first Tuesday of the month and everyone is welcome.
This paragraph has a link, some bold text and italics.
- Monthly meetings, open to all
- A newsletter four times a year
- Working groups for anything that needs doing
"The best way to find out what we do is to come along."
Block: feature
SAMPLE — featured
Blocks and themes
How a Quoin site is built from a library of blocks, and why the design can change without touching the content.
Block: card-grid
What we do
Meetings
When and where we meet, and how to add an item to the agenda.
Projects
The work in progress, and who to talk to about each part.
Volunteering
An hour a month helps. Here is how to start.
Block: notice
severity: warning
Block: link-list
Useful links
- District council — planning applications and bins
- Parish council minutes
- Join the mailing list — about one email a month
Block: hero
A place for everyone who lives here
News, documents and the work of the group, kept up to date by the people who do it.
Block: gallery
Photos
The meadow in May 
Summer evening walk 
First frost
Block: definition
- commons/ˈkɒm.ənz/noun
- say it “com-uns”
Land or resources held in common, which everyone may use and everyone looks after.
Block: block-library
Blocks in this theme
beta-progressHow many places in the current beta phase are taken, counted from the beta records when the site is built.
block-libraryThis list: the blocks the active theme can render, read from its manifest when the site is built.
card-gridA grid of linked cards, each with a title and a short summary.
definitionA dictionary-style entry: a word, how to say it, and what it means.
featureSpotlights one page, pulling its title and summary from the page itself.
galleryA sequence of images. Alt text is required, so every image is described.
heroThe opening banner: a headline, a short introduction, an image and up to two buttons.
link-listA curated list of links, each with an optional note.
loop-stepsA process shown as numbered steps across lanes for who does what, with an optional loop back.
noticeA highlighted box for something readers must not miss.
textA section of prose with an optional heading.
No sample yet for: loop-steps, beta-progress. Add one to the theme's styleguide samples.
Chrome: header
Chrome: header (hover)
.sg-state-hover draws the first menu item's hover state.
Chrome: header (dropdown open)
.sg-state-open opens the first dropdown.