Sections and templates

Sections

A section is a reusable, editable tree: a hero, a pricing table, a testimonial row. The library holds several hundred brand-neutral sections in more than thirty categories, all styled with theme tokens so they match your project the moment they land.

Open the insert panel with +, pick a category, and press Add on a section. It becomes ordinary elements on your page, fully editable. Sections are also copied into the canvas from the library clipboard with Cmd/Ctrl + Shift + V.

Save as section turns any container into a section in your own library, with a name and a category.

Website templates

A website template is a whole site: pages, menus, theme and sections for a given industry. The insert panel's Templates tab previews each one; Add into frame brings its pages into your project. Templates cover agencies, e-commerce, portfolios, restaurants, SaaS and more, and every template's design contract is documented in a DESIGN.md so a designer can extend it.

Industry starters

The project wizard offers industry starters that compose sections by kind and position, giving a complete first draft in one step.

Dynamic sections

A section can declare a data source, so a product grid section arrives already bound to live products. See Data binding.

Styles, states and animations

Theme Studio

On this page

Sections

Website templates

Industry starters

Dynamic sections