Set size, borders and effects

This article describes the Styles tab settings that give a block its shape: its size and position, its borders and corners, its shadow, its effects and its transitions. You will be able to set them for each state and each screen.

Before you start

• The settings in this article are in the sidebar’s Styles tab, when a block is selected. They are spread across the Size & Spacing, Borders, Effects and Transitions panels.
• As long as you touch nothing, the block keeps its natural rendering. The values shown in empty fields are not applied to the block.
• The inner and outer margins of the Size & Spacing panel are described in Space your blocks.

Choose where the setting applies

At the top of the Styles tab, two rows decide what you are setting. All the panels in this article write to the chosen state and screen.

A colored dot marks each screen that carries a value for the current state. Screens do not copy one another: a tablet with no value of its own shows the one from Overall, not the one from desktop.

When the block carries a registered style, a field that inherits from it is shown dimmed. Depending on the situation, a button next to the field gives back the style’s value, removes the inheritance or clears your local value.

Set the size of a block

The Custom dimensions section of the Size & Spacing panel sets the width and height of the block.

1. Select the block, open the Styles tab, then the Size & Spacing panel.
2. For a centered container, click a Container width value, for example 1024. The block takes this maximum width and centers itself.
3. For a precise constraint, enter a value in one of the six fields and choose its unit.

Clicking the chosen Container width value a second time does not cancel it. To remove it, click the reset button next to the label.

The ƒ button, next to a field’s label, combines two values, for example 100dvh − 92px for a section that fills the screen under a 92 px header. The middle button switches from addition to subtraction.

In a carousel, one more unit is available: cqi, a share of the carousel’s width. A card set to 33.333cqi − 16px shows three side by side, whatever the screen.

Aspect ratios are set per screen: an image at 21 / 9 on a computer can switch to 4 / 5 on a phone.

Hide a block on a screen

The Hide this block switch removes the block from the page for the chosen screen. To adapt a section to the phone, duplicate it, adapt the copy, then hide each version on the screen where it does not fit.

The next switch makes the block inline, next to its neighbors. Its label follows the block’s layout: Inline block, Inline flex or Inline grid.

The Visibility setting of the Effects panel also hides a block, but keeps its place in the page.

Position a block

The Position menu takes a block out of the normal flow of the page. It is set per state and per screen: a panel stuck in place on a computer can go back to normal on a phone.

As soon as a position other than Default is set on the displayed screen, the Offset section appears with four fields: Top, Right, Bottom and Left. They accept the same units and the same ƒ button as the dimensions.

A Sticky or Fixed block at the top of the screen hides nothing. A link to an anchor, the element reached with the keyboard and the step of a form stop 16 px below it. The site measures its height at each change of size or screen.

The Float setting makes a block float left or right. The neighboring text flows around it.

Manage what overflows

The Overflow setting decides what happens to content larger than its block. The choices are icons, with their name on hover.

Add a border

1. In the Styles tab, open the Borders panel. A preview of the block appears at the top of the panel.
2. Under Border, enter a Thickness in pixels. The style and the color become available.
3. Choose the Style among Solid, Dashed, Dotted or Double.
4. Click the swatch and choose the color.

The Split button, at the right of the row, gives each side its own border: Top, Right, Bottom and Left. The Merge button goes back to a single border. A thickness of 0 erases the border.

Round the corners

The Border radius field is a dropdown list of the radii of your design system, each shown by its value. Choose a radius to apply it to all corners, or None to remove the rounding. The Split button gives each corner its own list.

The design chosen from the catalog can change these values. Buttons, form fields and their dropdown lists take the 4 px radius: editing this step rounds them all at once.

The + button creates a radius and the pencil edits the one that is applied. Only site administrators see these two buttons. The form asks only for a value and a unit (px, em, rem or %). A change applies to all the blocks that use this radius. A value exists only once: a second 8 px radius is refused.

The Switch to advanced mode button shows eight fields with free units, for elliptical corners: a horizontal radius and a vertical radius per corner.

When a radius is set without the overflow being hidden, the panel shows Images may not follow the rounding of the corners. Click Set overflow to Hidden. so that the image follows the rounding.

The Corner shape field changes the shape of a rounded corner: Round, Scoop, Notch, Bevel or Squircle, between square and circle. It stays grayed out as long as no radius is set.

Add a box shadow

A shadow is an entry of your design system, like a color. You create it once and place it on as many blocks as you want. Editing it edits it on all the blocks that carry it.

1. In the Borders panel, open the Box shadow list and choose a shadow, for example Elevation 2.
2. To remove it, choose None. The block takes back the shadow of its registered style if it carries one.

Each site receives five shadows, Elevation 1 to Elevation 5. Each stacks a sharp black shadow at 30% and a diffuse black shadow at 15%. They move away and soften as the level goes up.

You can edit the layers of a shadow that comes with your site: your version applies to your site. A shadow that comes with your site cannot be renamed or deleted.

Create a shadow

1. To the right of the Box shadow list, click +. The form opens with one layer.
2. Enter a Name. This field is required, because the name identifies the shadow in the list.
3. In the Layer 1 card, set the X and Y offset, the Blur and the Spread, in pixels, then the color.
4. To stack a second shadow, click Add a layer.
5. Click Save. The shadow is placed on the block.

A shadow has up to eight layers. The first is painted on top of the following ones: the Move up and Move down arrows change their order. Saving is refused if the name is empty, or if a layer sets no offset, no blur, no spread and no color.

The pencil, next to +, edits the chosen shadow. The form shows Your changes will apply to every block that uses it. For an effect specific to one block, create a shadow instead.

Lift a card on hover

1. On the Default state, choose Elevation 1 in Box shadow.
2. Switch to the Hover state and choose Elevation 3.
3. Go back to the Default state and add a 200 ms transition as in the “Smooth a state change” section.

The card lifts under the pointer and comes back down smoothly.

Transform a block

With the Effects panel, you rotate, move, enlarge or skew a block without changing the space it takes up in the page. It opens by itself when an effect is already set.

The transformations stay applied during the block’s animations: a skewed card slides while staying skewed.

Set a block’s appearance

A filter and a clip path are created with the + button of their field and edited with the pencil. These buttons, like those for shadows and radii, are reserved for site administrators: other roles choose from the list. Like a shadow, they serve all the blocks that carry them. The Effects panel’s filter acts on the block itself. The backdrop filter acts on what is behind the block: it is described in Color a block.

Cut a block into a shape

The clip builder first asks for a Shape. All values are percentages of the block’s size: the same clip suits a banner and a small card.

An opacity, a filter or a clip set on the block cannot be combined with an entrance animation, which animates them itself. Set each on one side only.

Keep the focus ring

A visitor who navigates with the keyboard sees where they are thanks to the focus ring. Links, buttons, form fields, switches, checkboxes and accordion questions receive a 2 px ring when they take keyboard focus. Its color follows the element’s text color. It does not appear with the mouse.

The Outline setting of the Effects panel draws a line around the block without changing its size, unlike a border. It requires a Thickness in pixels, a Style and a color. The Offset field, from −99 to 99 px, appears as soon as a thickness is set.

To replace the focus ring with your own, set the outline on the Focus state. Your outline is shown in place of the ring.

Smooth a state change

With the Transitions panel, a state change glides instead of jumping: a color, a shadow or a border that changes on hover, on focus or when a checkbox is checked. Without a transition, the change is instant.

1. Select the block, choose the Default state and open the Transitions panel.
2. Click Add transition. A row appears.
3. Under Properties, leave All, or choose Custom to name the properties concerned.
4. Set the Duration (ms), the Timing function and the Delay (ms).
5. Hover over the preview bar to see the chosen rhythm.

Several rows can stack: the color in 200 ms and the shadow in 500 ms, each at its own pace.

A visitor can ask for less motion, in their device settings or with an animation selector. They then see nothing move on hover or focus. The rotation, translation, scale and skew of the Hover and Focus states do not apply. The changes of color, background, border, shadow, opacity and filter stay visible, smoothly.

See also

• Space out your blocks
• Save a block’s style
• Animate a block
• Color a block