Styleguide
Every block a story can carry, styled by the theme. Open this page's source to see how each one is written.
Headings
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Text
Body copy sits at a comfortable measure, with the display face kept for titles. It carriesbold and italic emphasis, inline code, andlinks that pick up the accent colour.
Quotes
Nobody clapped. The silence was better.James
The alternative style centres the quote and gives it its own marks.
We forgot you were there, which I think was the point.
Lists
- Unordered lists take a marker in the accent colour
- Items wrap against a hanging indent
- Spacing matches the body rhythm
- Numbered lists share the same measure
- The counter sits outside the text column
- Long items stay aligned
Tables
A table scrolls inside its own frame when a narrow screen cannot hold it, so it never drags the page sideways.
| Collection | Stories | Typical length |
|---|---|---|
| Weddings | 14 | A full day |
| Portraits | 4 | Two hours |
| Studio notes | 2 | Half a day |
Photographs
A regular figure sits at the width of the reading column.
A wide figure breaks out of the column, and a full one runs to the window edge.
Galleries
A gallery packs its frames into justified rows by their own proportions, so no photograph is cropped to fit a grid. Every row runs the full window at one height. Clicking a frame opens the lightbox scoped to that gallery, with arrows, the keyboard and swipe.
Callouts
Toggles
A toggle hides detail until it is asked for
Useful for a list of what is included, a long caveat, or the answer to a question only some readers have.
Several can sit together as a short FAQ
Each one opens on its own, so a reader can take only the part they came for.
Bookmarks
A bookmark only needs a URL. The picture, the title and the description are read from the linked page's own Open Graph tags at build time, and a page that has none falls back to a plain card.
AstroAstro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
Audio
A sample recording
Three seconds, for the shape of the player.
Files
A sample documentWhat a downloadable price list or contract looks like in the reading column.Buttons
Products
The full day
From the quiet of the morning to whenever the music stops, with a second photographer from the ceremony onwards.
Call to action
The call to action card takes a note and a button. Handing it a photograph stacks the picture beside the words instead of keeping them on one row.
Embeds
Signup and header cards
Both run the full width of the window, for the top of a page or a break between sections.