Layout and content — Cairn examples

Start hereExamplesLayout and contentThe building blocks every page is made from: bands, columns, cards, buttons, text and tables.Everything below is a real block, working exactly as it would on your own site. Try it, then look for it in the editor.Section with a photoA full-width band. This one has a photo behind it with a dark wash so the words stay readable.In the editor: Layout → SectionOpen garden weekendCome and see the borders in flowerA Section can hold anything. Its background can be a colour, a gradient, a photo or a video.A button inside itGrid of cardsColumns that stack into one on a phone. Narrow your browser window and watch them move.In the editor: Layout → Grid, with a Card in each cellLavenderSun, poor soil, and a trim after flowering.FoxgloveA biennial that seeds itself about.HydrangeaBlue on acid soil, pink on chalk.Buttons and badgesButtons come in solid, soft and outline styles, in three sizes. Badges label things.In the editor: Components → Button, BadgePrimarySecondaryOutlineNewIn stockSold outCalloutsA box for something the reader must not miss, in a tone to suit.In the editor: Components → CalloutOpening late on Thursdays in December.Your order is on its way.The car park is closed this weekend.GradientA coloured panel that blends from one colour to another, for something that should stand out.In the editor: Layout → GradientTwenty per cent off bulbs this weekEnds Sunday.Text and rich textHeadings at six levels, plain text, and rich text with bold, links, lists and quotes.In the editor: Typography → Heading, Text, Rich TextA headingRich text can have bold, italics and links.

Bulleted lists

and numbered ones

And a quote, set apart from the rest.TableRows and columns, with a header row and stripes. You type straight into the cells.In the editor: Components → Table

Order weight

UK mainland

Europe

Up to 500g

£3.95

£9.95

Up to 2kg

£5.95

£14.95

Over £40

Free

£9.95

Fade in as you scrollAny block can fade or slide in as it comes into view. Scroll up and down to see these cards arrive one after another.In the editor: Any block → MotionOneArrives in turn.TwoArrives in turn.ThreeArrives in turn.FourArrives in turn.CairnWebsites for businesses that need more than a brochure. Built, hosted and kept running by us.StartBuildRun© 2026 Cairn. All rights reserved.Built with Cairn.