Element catalog

These are the built-in elements in the ELEMENTS drawer, grouped by the categories the drawer uses. Every one of them ships with a preset — dropping it gives you an element that already has content in it, not an empty box you have to fill before you can see it.

Elements from installed plugins appear under their own groups (Marketplace, Your components) and are not listed here.

tip

Anything on this page can be styled from the Styles panel, targeted by interactions, and made responsive per breakpoint. The attributes below are the element-specific settings in the Attributes panel.

Finding the one you want

You do not have to recognize an element by name. Two places offer them — the Elements tab beside Hierarchy, and the Choose element dialog — and both search and describe them the same way.

Search

Type in Search elements and the categories collapse into a single Best matches list. Searching looks at more than the name: an element's description, its category and its keywords all count, so "space" finds Stack and "sign in" finds the member elements even though neither says so in its title.

Matches on the name always come first — an exact name, then a name starting with what you typed, then a name containing it — and only after those, elements matched on their description or keywords. So typing grid puts Grid at the top rather than burying it under everything whose description happens to mention a grid. Clearing the box brings the curated categories back.

What an element says about itself

Point at an element and a detail view explains it before you commit to it:

• A live preview — the element genuinely rendered, with its preset content and your site's theme, so the colors and type are the ones you will actually get. It is a picture, not a playground: nothing in it is clickable.
• What it is for, in a sentence — written per element rather than generated, so it tells you when to reach for this one instead of the similar one next to it.
• What it will and won't do — whether it holds other elements, which children it accepts, whether it must sit inside something else, whether its text is edited on the canvas, and which plugin provides it.
• Its attributes, and a Learn more link into this page at the right category.

Some elements have nothing to show on their own — a table row, a tab panel — and say so, naming the parent they belong inside rather than showing you an empty box.

A category you cannot see

The element list only offers what this site can actually use. If a plugin is switched off for the site, its category is not shown — and searching will not bring it back, because the search runs over what is on offer. The Members elements are the common case: they appear once User accounts are turned on for the site.

Layout

Element	What it's for
Box	The plain container. No styling of its own — you give it padding, background and borders from the Styles panel. Renders as div, span, p, figure, figcaption, blockquote or pre. For a landmark that needs an accessible name, use Section.
Section	Grouping inside a semantic HTML element (section, article, aside, nav, header, footer) with an accessible label, so the page keeps a meaningful document outline. main is not on the list — see The page's main landmark.
Container	Centers content and caps its maximum width.
Stack	One-dimensional row or column with a gap. A natural frame for a repeat, though every element can repeat.
Grid	Responsive 12-column layout. See Grid below.
Layout slot	Where a bound layout injects the page's own content. Its Component is main unless you change it — see below.

The page's main landmark

Every published page carries exactly one main element: the landmark assistive tech uses to skip past the nav straight to the content, and the target a "skip to content" link needs. You don't have to place it, and you can't accidentally end up with two.

It goes on the page's content region, which the platform works out for you:

• On a page framed by a shared layout, the layout's Layout slot — everything between the chrome. The site nav and the site footer stay outside it, which is the whole point of the landmark.
• On a page with no layout, the Document layer at the top of the hierarchy.

Both of those have a Component attribute if you want to say otherwise. Set the Document layer to main and the slot steps aside; set the slot to section (for a layout whose slot genuinely isn't the page's main content) and the Document layer takes it instead. Choose something other than main in both places and the page ships without one — your call, deliberately made.

Nothing else can claim it: neither Section's element picker, nor a Reusable component placement, nor custom HTML will emit a main, because a second one makes the landmark ambiguous, which is worse than having none.

Every container can be a semantic element

Stack, Container, Grid, Paper, Card, Toolbar Content and App Bar each have a Component attribute offering div, section, article, aside, nav, header and footer. So the row that holds your nav links can be the nav, rather than being wrapped in one more element to say so.

Leave it unset and the element keeps its own default — an App Bar stays a header, a Stack stays a div.

Pick anything but div and an Accessible label field appears beside it. Fill it in whenever the page has two landmarks of the same kind: a site nav and a footer nav are both announced as "navigation" until one of them says which. One nav on a page can go unnamed; two cannot.

main is on none of these lists; see below.

Light or dark, whatever the visitor picked

Section, Container, Stack, Box and Grid have a Color scheme attribute — Match the site, Always light or Always dark — that keeps that part of the page in one mode, with everything inside it using your site's colors for that mode. See Keep one part of the page light or dark.

Which link groups want to be a nav

nav marks a major block of navigation, not every group of links — the more you place, the less each one tells a visitor.

• Your site nav — yes. One per page.
• Your footer's link columns — yes, but one nav around the whole set, not one per column. Six columns marked individually is six regions all called "navigation".
• A mega menu inside the site nav — no. It is part of the nav it opens from, and a nav inside a nav is a landmark that says nothing new. What those panels need is a correct expand/collapse state on the trigger, which the Nav menu element handles.
• A mobile drawer — yes, and name it, since it and the desktop nav are the same links twice. (If the desktop nav is hidden with display: none at that width it leaves the accessibility tree entirely, and only one is ever announced.)
• A legal or social row — no. It is a utility row, not a navigation block; leaving it unmarked keeps the landmarks that matter easy to find.
• Breadcrumbs and Pagination are the two exceptions worth marking beyond the above, each named for what it is.

header and footer for your site chrome

main is only half the picture: assistive tech and search engines also look for the banner and contentinfo regions around it. Those are yours to place.

• A Reusable component placement renders as the component's own root element — the placement adds nothing of its own to the page. To make one placement a landmark, use Change it on this page only → Which part? → Whole component → Component on it: set the nav's to header and the footer's to footer, and the published page carries both landmarks around the slot's main, without a wrapper between them.
• A Section anywhere inside a page can be header or footer too. So can any of the containers listed above.
• The Document layer takes the same list, for a document that is one region — a layout that is nothing but chrome, say. Picking a landmark other than main there leaves the page without a main, as above.

Set the element in one place, not on several nested inside each other: a footer Section inside a footer Section is two contentinfo regions where you meant one.

Grid

Grid does both jobs in one element, matching Material UI's current API:

• Turn Container on for the row. It gets Spacing, Row spacing, Column spacing and Columns (the row is divided into 12 by default).
• Leave Container off for a cell, and give it a Span.

Span and Offset are typed as text so one field covers every breakpoint:

You type	You get
6	Half the row at every size
auto	Just wide enough for the content
grow	All the space the other cells don't take (Span only)
xs:12 md:4	Full width on mobile, a third from md up

Breakpoint keys are xs, sm, md, lg and xl; xs:12, md:4 with commas works too. If part of what you type can't be read, the whole value is ignored rather than half-applied — a layout that silently differs from what you typed is worse than one that plainly doesn't work.

Surface

Element	What it's for
Paper	A themed surface. Elevation 0–24 raises it with a shadow; the Outlined variant swaps the shadow for a border (and hides the elevation control, which does nothing there).
Card	A surface for one subject, composed from Card Header (title + subheader), Card Content (the padded body) and Card Actions (the button row). Each piece is its own element, so you can select, style and reorder them.
Accordion	A header that expands to reveal its details, built from Accordion Summary and Accordion Details. See Accordion below.

Accordion

Start expanded controls whether visitors arrive with the panel open. On the canvas the panel is always shown open regardless — collapsed details can't be selected or styled. Preview and the published site both behave the way you configured it, so what ships is never in doubt.

Accordion Summary takes an optional Header links to. Leave it empty and the whole header row toggles the panel, which is what every accordion does by default. Point it at a page and the row splits in two: the header text becomes a link to that page, and the chevron beside it becomes the toggle. That split is the only way a header can do both — a link placed inside the toggle button is invalid markup and unreachable by keyboard. It is what lets a mobile drawer offer Product both as a group to open and as a page to visit.

The FAQ preset drops three complete panels at once.

Navigation

Element	What it's for
Page Link	A link that targets a page, a content collection's listing page, one of its entries, or its RSS feed — by id, so it survives slug renames. Renders as a button or as a text link. See Linking to a listing, an entry, or a feed.
Link Container	A box that is itself one link, so a whole card is the click target. See Link Container below.
App bar / Toolbar Content	The site header frame. The app bar is the band; Toolbar Content is the row inside it that holds the brand, the links and the actions, and it may only be dropped into an app bar. On a Sticky or Fixed app bar, Shrink when scrolled? compacts it to the dense height once the visitor scrolls, and Hide while scrolling down? slides it out of view on the way down and back on the way up. Use either or both.
Nav menu / Mega menu	Dropdown and full-width navigation menus.
Drawer / Menu Button	A panel that slides in from the left, right, top or bottom. Open it with a Menu Button or an interaction. Width applies to left/right drawers; top and bottom sheets span the viewport, and the control is hidden for them. The Mobile Nav preset wires a hamburger, a drawer and a desktop link row in one insert.
Tabs / Tab Panel	A tab strip and its panels. See Tabs below.
Breadcrumbs	The trail showing where a page sits. Fill it with Page Links so it survives renames, and leave the current page as plain Typography — linking a page to itself is the classic breadcrumb mistake. Set Collapse above to fold a long trail into an ellipsis.
Pagination	A page picker. See Pagination below.
Language switcher / Theme mode switcher	Locale and light/dark controls. The theme mode switcher is hidden on published pages while the theme's Dark scheme is off.
Table of Contents	An "On this page" list built from the headings of a Markdown element on the same page.

Where a link opens

Page Link and Button both carry an Open link in dropdown once they point at a page or a URL:

• Same tab — the default, and what you want for navigation inside your own site. The visitor keeps their back button and their history.
• New tab — for a download, a PDF, or an outside site you want them to come back from. Whether the browser makes that a tab or a window is the visitor's own setting, not something the page gets to decide.
• Custom window name — reveals a Window name box. Every link sharing a name reuses that one window instead of opening another, so a set of links can drive a single companion window. Leave the box empty and the link behaves as Same tab.

Links that open elsewhere are marked up so the new page can't reach back into the one it came from. Link Container has the same choice as a simple Open in a new tab switch, which applies to external destinations only.

Linking to a listing, an entry, or a feed

The Page picker is a search box. Type and it looks through four kinds of target, grouped as you go:

• Pages — your site's pages.
• Collection listings — the page at /{collection} that lists a collection's entries, such as your blog's /blog. Each reads like Blog (/blog) — collection listing, so a listing is never mistaken for a page with the same name.
• RSS feeds — a collection's feed, reading like Blog (/blog/rss.xml) — RSS feed.
• Entries — a single post, reading like Hello (/blog/hello) — Blog entry · published. The status is there because a link to a draft goes nowhere until the draft is published.

Pages, listings and feeds are a handful of targets, so they are all there before you type. Entries are not: a site can hold thousands, so they are searched rather than listed. Type the beginning of an entry's address — "hello" finds hello-world — and the picker asks for a few matches per collection. Leave the box empty and it offers the entries most recently worked on.

Picking any of them stores the target itself, not its address. Rename the collection's slug, or the entry's, and every link follows, just as a page link follows its page. An entry link is assembled from both names at render time, so renaming the collection moves every link to every entry inside it. For a listing it makes no difference whether the collection has a list template page: without one, the link opens the built-in listing.

Deleting the collection warns you first: its delete dialog names the published pages, layouts and components that link to its listing, so you can point those links elsewhere. If the collection is deleted anyway, or its slug is cleared, the link stops navigating, the canvas flags it as a broken link, and the picker shows ⚠ Unavailable collection listing (…) — the same treatment an unpublished page gets. Pick the listing again or clear the link. A typed /blog in External URL gets none of this: it never follows a rename, nothing warns you when it stops working, and the delete dialog does not count it.

An entry link behaves the same way, and it answers to publishing as well as to deletion: a post that is unpublished, deleted, or scheduled for a time that has not arrived has no address yet, so the link renders as nothing on the live page rather than as an address the site would 404 on. The picker shows ⚠ Unavailable entry (…). Publish the post and every link to it starts working — you do not need to reopen the pages that link to it.

The same entries appear everywhere the Page picker does — Button, Image, Link Container, Tabs links, an Accordion Summary's header link, a form's redirect, and a component's Link property.

Link Container

Put an icon, a heading and a description inside a Link Container and the whole box goes to its Page or External URL. Keep other links out of it: a link inside a link is invalid, and browsers move the inner one out of the box. Use Typography for the title.

A screen reader names a link by reading the text inside it. A box holding only an icon, or an image with no alt text, has nothing to read, so it is announced as just "link". Until that is fixed, the Accessible label field shows a warning. Fix it with one of these:

• Accessible label — what a screen reader says for the link, such as Datasets product page. Leave it empty when the box has text inside, which already names the link. It takes a binding like any text field.
• Duplicate of another link — for a box that repeats a link right beside it, like the arrow on a card whose title already links to the same page. Screen readers and the Tab key skip the box, so those visitors reach the page once, from the title. A click or tap on the arrow still works. Leave it off when the box is the only link to its destination, or keyboard users can't get there.

Tabs

Type the tab names into Tabs, one per line. Then each Tab Panel child names the tab it belongs to in Shows under tab (capitalisation and surrounding spaces are ignored).

Panels are matched by label, not by position, so reordering them in the hierarchy never shuffles your content. The preset ships three tabs with three matching panels, so you only touch the matching if you add a panel yourself.

On the canvas every panel is shown stacked, each captioned with the tab it belongs to — a hidden panel can't be edited, and a caption with a name you don't recognize is a label typo you can see. Preview and the published site show one at a time.

Tabs that go to another page

A row like Blog · Changelog · Newsroom isn't really a tab strip — it's navigation between three separate pages. Give a tab a page and it becomes one: pick the target in Tab 1 link, Tab 2 link and so on. A picker appears for each tab you've named, up to the first eight. Those tabs render as real links — a visitor can ⌘-click or middle-click one into a new tab, and search engines follow them — and they stop switching panels.

Leave the link unset for the tab of the page the row is already on — a page that links to itself helps nobody. The first tab with no link is the one the row opens on and marks as the current page, so give that tab the name of the page you're placing the row on. Mixing the two is fine: unlinked tabs keep revealing their own Tab Panel.

Link every tab and there is no current one to mark: the row renders with no indicator. That's the signal you've linked the tab you're standing on. A tab pointing at a page that has since been deleted goes inert — no link, and no panel either — so re-point it after you remove a page.

As soon as one tab has a link the whole row is marked up as navigation rather than as a tab list, which is what it now is. Give it a name in Accessible label so it doesn't land in a screen reader's landmark list as another "Tabs".

Pagination

Pagination renders the control and highlights the page a visitor picks. It does not by itself change what the rest of the page shows — wire an interaction to it for that.

Text

Element	What it's for
Typography	One run of text — a headline, a label, a paragraph. The element you edit inline on the canvas.
Markdown	A whole document, held as markdown source in one element. For policies, terms and anything whose real source is a .md file. See Long documents in markdown.
Entry Body	A content entry's markdown body, on an entry-template page.

Data Display

Element	What it's for
List	A vertical list. Optional sticky Heading, plus Dense and Disable padding.
List Item	One row, with Divider, Align items, Dense, Disable gutters and Disable padding.
List Item Text	Primary and secondary text, plus Inset to line the text up with rows that have an icon or avatar.
Collection entries and friends	Content collections — entry lists, bodies, related posts, share bars.
Custom HTML	Sanitized markup you supply.

Media

Element	What it's for
Image	An image with fit, size and radius controls, an optional link, and an automatic responsive srcSet for media-library URLs. See Image below.
Video	A video file from your media library, poster first. See Video.
Icon	Any icon from the icon picker.
Image List / Image List Item	A dense gallery. See Image List below.

Image

A picture from your media library is delivered in several widths, and each visitor's browser downloads the one that fits the space the image takes on their screen — a phone gets a small file, a wide desktop a larger one. You do not set anything for this.

How Aglyn knows how big the image shows. Every published page works it out from where the image sits, with nothing for you to do and nothing to re-save:

• a size you gave the image itself — a pixel Width, or a pixel Height with the width left on auto (a logo set 56px tall is as wide as its picture is at that height), including different sizes per screen size;
• the layout around it — a Grid cell set to xs:12 md:4 is a third of the page from tablet width up, an image in a grid of three equal columns is a third, the gaps between them come off, and a Container stops the slot growing past its max width.

On top of that, the Besigner measures how wide each image renders at the screen size you are looking at, and saving or publishing the page stores it with the image — which covers layouts the rules above cannot read. Check the page on another device in the preview switcher (XS - Mobile, MD, LG…) before you save and that size is measured too. Only when nothing at all is known does the browser assume the image is as wide as the screen.

The first image of the page itself — not the logo in your header — is treated as the page's main picture: it starts loading with the page at high priority, unless it is measured as small (a logo or an icon placed at the top of a page).

Sizes (advanced) overrides all of this with an HTML sizes value used exactly as you type it, for example (min-width: 900px) 33vw, 100vw. Leave it empty unless you know you need it — a wrong value makes visitors download a file that is too large or blurry.

The file's address carries a version that changes when you Replace the file in the media library, so visitors' browsers keep each version as long as they like, and pick up a replacement the next time the page is built.

Image List

Pick a Variant:

• Standard — a plain grid.
• Quilted — tiles can span several columns and rows. Set Column span / Row span on the tiles; only this variant reads them.
• Masonry — every image keeps its own aspect ratio. Row height is ignored here (and hidden), because a fixed height would crop exactly what masonry exists to preserve.
• Woven — alternating tile sizes.

Each tile holds an ordinary Image element, so galleries get the same responsive srcSet and lazy loading as an image anywhere else. Fill in Caption for a caption bar, or leave it blank for no bar at all.

Forms

Forms and their fields, covered with the feature they belong to — see Forms.

Commerce

Product grids and cart companions, covered with the feature they belong to — see Commerce.

Members

The member sign-in and sign-up elements, covered in Member accounts.

Input

Buttons and widgets.

The calculator elements belong to no built-in feature. They come from Calculators, a plugin you install from the marketplace, and appear under Input once it is installed:

Element	What it's for
Function Widget	Runs one of your no-code functions on the live site and shows what it returns — a quote calculator, a shipping estimate, a score. Function name is the function from the site's Functions card; the widget draws an input per parameter — a number box, a switch or a list, under the label and starting value the function sets — a run button you can relabel, and the result under a Result label prefix. Results to show lists several named results instead of one, one per line as `name
Calculator	A container bound to one of your functions. Everything inside it reads that function: place Calculator Inputs and Calculator Results anywhere in it, between whatever stacks, grids and text the design calls for. Function name is the function from the site's Functions card. The results are always current; there is no run button.
Calculator Input	Asks one parameter of the Calculator it sits in. Ask as picks the control: Automatic follows the parameter (a list when it has choices, a number box for a number, a switch for a true/false), and Quick picks draws buttons that set the value, so 10, 25, 50, 100 can sit beside a number box on the same parameter. Choices overrides the function's own, as value: Label, value: Label.
Calculator Result	Shows one value of the Calculator it sits in: Value is a parameter or variable of the function, or empty for its return value. Style it like any text. Text the function wraps in **two asterisks** is emphasized, nothing is drawn while the value is empty, and Read changes aloud announces it to a screen reader — turn that on for one result, usually the sentence.
Show When	A container inside a Calculator that appears only while one of the function's values is true, a number other than zero, or text that is not empty — a table row a filter can remove, a note that applies to one choice. Show when it is not inverts it.

Related

• The Besigner
• Video — posters, preload, captions and the lightbox
• Drag-and-drop hierarchy — which elements accept which children
• Long documents in markdown — the Markdown and Table of contents elements
• Responsive styling
• Interactions & custom HTML