Every block, explained

Start hereBuilding with blocksEvery block, explainedA short guide to every block in the editor's Add block palette, in the same groups the palette uses: what each one is for, and the settings you will reach for most.Why your palette may look differentSome blocks only appear when a part of Cairn is switched on for your site. A Form block needs Forms, a Booking block needs Bookings, and so on; each one is marked below. Modules are switched on by whoever set up your site.Two blocks are optional even when their module is on: Catalogue grid and Latest posts. An administrator turns them on under Settings → CMS → Optional blocks. Turning one off later never removes it from pages that already use it.Below the four groups, the palette also lists your Reusable blocks. See Reusable blocks. Type in Search blocks… to find any block by name.The palette, grouped as on this page.Layout

Section: a full-width band of the page, with its own background, photo or video, padding and light or dark Text tone. Most pages are a stack of these. Sticky keeps a section at the top of the screen as visitors scroll (used for headers), and Shrink on scroll makes it slimmer once they do. See How blocks work.

Flex: lines blocks up in a row or a column. Direction, Gap, Align and Justify decide the spacing; Collapse into a menu folds the row behind a ☰ button on small screens.

Grid: columns of cells you drop blocks into. Placed gives a fixed layout where cells can span (Edit grid layout); Deck flows any number of cells in order. Stack on mobile puts the columns one above another on phones; Column widths makes columns unequal, such as "2fr 1fr".

Card: a padded box with a background, Corners and Shadow. Link (whole card) makes all of it clickable, and First block runs edge to edge lets a picture at the top fill the card.

Border: a box with a line round it (or only some sides), with its own padding and background.

Gradient: a box filled with a blend between a From colour and a To colour at an Angle.

Tabs: content split across tabs that visitors click between. Name the tabs under Tabs, then drop blocks into each one.

Accordion: questions or headings that open to show their content, as in a list of FAQs. Name them under Sections; Open the first section shows the first one open.

Scroll Area: a box with a Max height that scrolls on its own when its content is longer.

Spacer: empty space between blocks. Choose a Height preset, or a Custom height, and Hide on mobile if the gap is only needed on big screens.

Container: a plain box with a Max width, padding and background. You will mostly meet it in imported pages; for a styled band of a page, use a Section.

Typography

Heading: a title. Level (H1 to H6) says how important it is to search engines and screen readers; Size changes only how big it looks. Use one H1 a page, then H2 for each band.

Rich Text: paragraphs with bold, italics, links and lists, typed straight onto the page. Alignment is set per paragraph from the toolbar above the text. Text size, Font and Max width (keeps lines a comfortable length) are in its settings.

Text: a single line or short run of text with its own Size, Weight, Font, Color and Align. Handy for a small label or a big number; for paragraphs use Rich Text.

Media

Image: a picture from your media library. Always fill in Alt text (a short description for people who cannot see it). Aspect ratio, Object fit and Position decide how it is cropped; Click to enlarge (lightbox) opens it full screen; Caption (optional) adds a line under it.

Icon: a small symbol from the icon library, or your own. Optionally add a Label (optional), a Link (optional), or a coloured Tile behind the icon.

Video: a YouTube or Vimeo video, or a video file, from its Video URL.

Carousel: a slider of pictures. Manage slides adds them, each with an optional title and description. Caption position can be Below image, Over image or Text only (quotes), which turns it into a rotating set of testimonials.

Logo: your site's logo from Settings → General, or a Custom image. Variant picks the light or dark version; Height (px), Height on phones and Shrink height set its size. See Logo, icons, header and footer.

Embed: another website's widget inside your page, such as a map or booking calendar, from its Embed URL (it must start with https://). Fill in Title (accessibility) to say what it is.

Components: everyday blocks

Button: a link that looks like a button. Set its Label and Link (href), then a Variant (primary, secondary or outline), Size, an optional Icon, and Full width for a button that fills its column.

Link: a plain text link, with its own Size, Weight, Colour, Underline and an optional Icon. Open in a new tab is for links that leave your site.

Link list: a stack of links with the current page highlighted, as in a sidebar of related pages. Edit them under Links; Style and Row height set the look.

Nav: your site menu. It shows the menu from the Menu screen, so there is nothing to type here; its settings decide the look, the dropdown colours and whether clicking a parent item Opens its menu or Goes to its page. See The site menu.

Breadcrumbs: the trail that shows where a page sits, such as Home › Shop › Beers, built from your Pages list. It shows nothing on the home page.

Badge: a small label, such as "New" or "Sold out", with a Variant, Size and optional Icon.

Callout: a coloured box for a note or warning. Choose a Variant (Info, Success, Warning or Error), add an optional Title, then drop text into it.

Separator: a dividing line. Set its Style, Thickness, Width and Colour, or turn its Orientation to vertical between blocks in a row.

Table: rows and columns of text. Click a cell on the canvas to type in it; add a Caption (optional) to say what the table shows.

Hours: your opening times, with an optional Note (bank holidays, last orders) and Show kitchen times. The times themselves are part of your site's setup; ask whoever set up your site to change them.

OpenNow: a small "Open now" or "Closed" message that updates as the day goes on, worked out from the same opening hours. Set the words for When open and When closed.

PayPal button: a PayPal Buy Now or Donate button. Make the button on PayPal's website, then paste its code into Paste PayPal's button code.

Components that need a moduleThese blocks show your site's own data, so each needs the module named in brackets. Most are hidden from the palette while their module is off. If one is already on a page and its module is later switched off, it simply disappears from the live page; select it in the editor and a note says why.

Form (Forms): shows one of the forms you built on the Forms screen; pick it under Form. See Forms.

Lead capture (Leads): a quick contact form with name, email, and optional phone and message. Set the Heading, Button text and Success message; replies arrive in Leads. See Leads.

Catalogue (Catalogue): a searchable, browsable list of a catalogue's items. Choose the Catalogue, and Show only a category (optional). See The catalogue.

Catalogue grid (Catalogue, optional): a catalogue shown as a wall of picture tiles, with Columns, Tile style, a Visitor toolbar for search and sorting, and how each item's own page looks.

Latest posts (Catalogue, optional): the newest few items of a catalogue as article teasers, such as a blog strip on the home page, shown as a grid or a slider.

Basket (Shop): a bag icon with the number of items, linking to the basket. Put it in your header, outside the folding menu, so phones show it beside the ☰. See Setting up the shop.

Booking form (Bookings): lets visitors book a table, a room, a place or an appointment, and pay online if the service takes payment. Tick the Services it offers, or none for all. See Bookings.

Booking details (Bookings): the guest's own booking — view, pay the balance, add to calendar, cancel. Put it on one page; every booking email links there.

Book button (Bookings): a button that takes the guest to the booking form with a service already chosen.

Bookable services (Bookings): cards of what can be booked, with pictures, prices and a Book button each.

Booking availability (Bookings): the next free time for a service, or a month calendar of free days, linking to the booking form.

Members only (Members): hides whatever you drop inside it from anyone who is not signed in as a member (or, under Visible to, a particular kind of member). Visitors who can't see it get your Heading, Message and a button instead. See Members.

File list (Members and Media): a list of the files in one Media folder, to download, such as minutes or newsletters for members.

Website audit (Website audit): a box where visitors type their web address and get a free check of their site. It appears only on sites set up to offer it.

← How blocks workReusable blocks →Getting startedPagesBuilding with blocksNavigation and lookMediaForms and leadsCatalogueShopBookings and membersRunning the siteCairnWebsites for businesses that need more than a brochure. Built, hosted and kept running by us.StartBuildRun© 2026 Cairn. All rights reserved.Built with Cairn.