Add and style Blocks

Blocks are working pieces of a site that you would otherwise have to build by hand: carousels that slide, accordions that open, notices that come in and close, a showreel hero, a media grid, a 3D ring and a text cylinder. Each one is made of ordinary layers you can restyle freely, and it keeps working in Preview, on your published site and in the exports.

Use a Block whenever a design needs behaviour that a prototype link cannot fake well, such as a real FAQ or a product carousel.

Add a Block

1. Press Blocks in the toolbar at the bottom of the canvas.
2. Find one by scrolling the groups or typing in Search blocks. Each card plays what its Block does while you point at it.
3. Click a card to add the Block to the selected frame, or to the middle of the view. Or drag it onto the canvas or into a frame.

The Block arrives selected, and the library stays open so you can place another.

There are 16 Blocks:

Kind	Blocks	Read more
Carousel	Carousel, Picture carousel, Testimonials, Products, Logo strip	Carousels
Accordion	Accordion, FAQ list, Details, Steps	Accordions
Notice	Notice, Banner, Promo notice	Notices
Hero and grid	Showreel hero, Media grid	Showreel hero and Media grid
3D	3D ring, Text cylinder	3D ring and Text cylinder

It arrives in your style

A Block does not arrive grey. It reads your file for a heading, body text, an accent colour, a surface, the ink colour and a corner radius, by what your layers use most and then by name, and dresses itself in them. A colour bound to a variable stays bound, so the Block follows your modes (Dark, for example) and any later change to the variable. Anything your file has nothing for keeps the Block’s own default.

Restyle it

Every part of a Block is a layer. Change its fills, type, padding, corners and sizes as you would anywhere else: it keeps working. Select a layer inside a Block and the Design tab says which Block it belongs to, with a button to select the whole Block.

Most Blocks are built with auto layout, so they grow with their content and fit the frame they sit in. See Auto layout.

Set what it does

Select the Block itself and the Design tab shows a section named after it (Carousel, Accordion, Notice, 3D ring and so on) with its settings: how many slides or items, what starts open, whether it plays on its own, where it sits on the window. Each change is one Undo and shows on the canvas at once. The settings for each kind are in the articles linked above.

Carousels, the Showreel hero, the Media grid and the 3D ring have Add pictures: choose several pictures at once and each becomes a slide, project, tile or card. Say what each one shows in its alt text.

Blocks and breakpoints

A Block inside a breakpoint has its own settings for that width. The section says which screen and width they are for. Once you change one there, it stops following the main screen’s, so you can show one slide at a time on a phone and three on a computer. See Breakpoints.

Catches

• Deleting a part a Block needs (a carousel’s arrows, a notice’s Close) stops that part working. The section warns you by name: undo the deletion, or turn the option off.
• Some Blocks look different while you edit. Accordions show every item open, the 3D ring and the Showreel hero lie flat, and the Text cylinder is a list, so everything can be edited. Preview and your site show the real thing.
• People who ask for less motion get a still version: nothing plays on its own, and every Block stays usable.
• Putting a video in a slide or tile uses the Design tab’s video fill, which is on Pro. A video already in a file plays on any plan.

Blocks are on every plan.