Design tab controls
Look up the sections of the Design tab and the controls in each one. Use it when you need the exact label of a control, or want to know why an element shows fewer sections.
The example on this page is the Header in the Post hero section of the Blog site.
Which elements show which sections
The tab can show 14 sections, in a fixed order. Studio shows only the sections the element's style group declares, so some elements show fewer than 14.
| Element | Sections it shows |
|---|---|
| Built-in components such as Header and Box | All 14. |
| Image | 13, without Typography. |
| Text | None. The built-in Text component declares no style groups, so the tab says "No properties available for the selected component." |
| A component your developer registered | Only the sections its style group declares. |
Design tab sections and their controls
| Section | What you set |
|---|---|
| Class | One or more classes, in the field under Add Class. |
| Size | Width and Height. Show More adds Min-Width, Max-Width, Min-Height and Max-Height. Width and Height also offer the keywords auto, stretch and fit-content. |
| Spacing | Margin and padding on each side, in a box marked MARGIN and PADDING. |
| Position | Position (Sticky, Relative, Absolute or Fixed), edge offsets for Sticky, Absolute and Fixed, and Z-index. |
| Typography | Font, Weight, Size, Line Height, Letter Spacing, Color, Align and Style (Italic, Underline, Strikethrough). |
| Transform | Move, Rotate, Scale and Skew. Each has X, Y and Z controls, except Skew, which has X and Y. |
| Media | One control, labeled Size, that sets how an image or video fills its box: Fill, Contain, Cover, None or Scale Down. |
| Background | A list of backgrounds. Each one is an image, a solid color, a linear gradient or a radial gradient. |
| Layout | Display (Block, None, Flex or Grid). Flex adds direction, align, gap and wrap. Grid adds columns, rows, align and gap. |
| Visibility | Opacity and Visibility (Visible or Hidden). |
| Effects | Cursor, Blending and Filters. |
| Border | Style (Solid, Dashed or Dotted), Width, Color and Radius. |
| Overflow | X and Y, each set to Auto, Visible, Clip, Hidden or Scroll. |
| Shadow | Box shadows. Each shadow has Inset or Outset, X, Y, Blur, Spread and Color. |
To use these controls on the canvas, see Style on the canvas. To choose which sections a component offers, see Make your components styleable.