How this reference works
Click any component on the composer canvas and a drawer opens on the right with three sections: Selected Component, Selected Column, and Entire Row. Between them they hold every setting that changes how your content looks. This reference has one page per setting, written for the person doing the work rather than the person who built it.
The three scopes, and why it matters which one you use
The same visual result can often be reached from more than one scope, and picking the right one saves a great deal of work later.
| Scope | What it controls | Reach for it when |
|---|---|---|
| Selected Component | The content itself — the words, the image, the HTML tag the text becomes. | You are changing what is on the page rather than how it is arranged. |
| Selected Column | The box around the component: spacing, size, colour, borders, typography. | You are changing how one piece of content looks or how much room it takes. |
| Entire Row | How the columns in a horizontal band are arranged together. | Several columns need to line up, spread out, or wrap onto a new line. |
Typography is the clearest example. Setting a font on the column means every piece of text inside it inherits that font, so a whole section stays consistent and you have one place to change it later. Setting it on each component instead gives you the same look today and nine places to edit tomorrow.
Start here
Two ideas turn up on nearly every page below. Reading them once will make the rest quicker.
- Setting a different value per device — how the “Same value for all resolutions” checkbox works.
- Choosing a unit: px, %, em, rem, vh, vw — what each measurement is relative to, and which to pick.
Selected Component
Settings that belong to the component itself — its words, its image, its tag. This list changes with the component you have selected, because each one declares the settings it accepts.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Content Text | Content Text | The words a text component displays. |
| Enclosing Tag | Enclosing Tag | What kind of HTML element your text becomes — a heading, a paragraph, or a piece of inline text. |
| Content Title | Content Title | A separate title string for components that display a heading alongside their body content. |
| Icon Name | Icon Name | Which icon an icon component displays, chosen from a searchable list. |
| Media Selector | Media Selector | Pick the image an image component displays from your team's media library. |
| Image Alt Text | Image Alt Text | A short written description of the image, read aloud to visitors who cannot see it. |
| Image Intrinsic Width | Image Intrinsic Width | The image's real pixel width, which lets the browser reserve the right space before the picture arrives. |
| Image Intrinsic Height | Image Intrinsic Height | The image's real pixel height, used with the width so the browser can hold the right space open. |
| Image Sizes | Image Sizes | Tells the browser how wide the image will be on screen, so it can download the right version. |
| Image Loading | Image Loading | Whether the image downloads immediately or waits until the visitor scrolls near it. |
| Image Fetch Priority | Image Fetch Priority | How urgently the browser should download this image compared with everything else. |
| Cloudinary Transformations | Cloudinary Transformations | Extra instructions for cropping, resizing, and adjusting the image as it is delivered. |
| Cloudinary Cloud Name | Cloudinary Cloud Name | Which Cloudinary account the image is served from. Normally filled in for you. |
| Image Public ID | Image Public ID | The identifier of a specific image inside a Cloudinary account. Normally filled in for you. |
Selected Column
Settings on the box that holds the component. Spacing, size, colour, borders, and typography all live here, and every column offers the same list.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Add / Remove Column | Add/Remove Column | Duplicate the selected column to its right, or delete it from the row. |
| Margin | Margin | The empty space pushed outward from the edges of the column, separating it from its neighbours. |
| Padding | Padding | The cushioning inside the column, between its edges and the content sitting in it. |
| Width | Width | How wide the column should be across the page. |
| Height | Height | How tall the column should be. |
| Min Width | Min Width | A floor for the column's width — it will never shrink narrower than this. |
| Max Width | Max Width | A ceiling for the column's width — it will never grow wider than this. |
| Min Height | Min Height | A floor for the column's height — it can grow taller, but never shorter. |
| Max Height | Max Height | A ceiling for the column's height — it will never grow taller than this. |
| Overflow | Overflow | What happens to content that is too big for the column: show it, hide it, or make it scroll. |
| Overflow X | Overflow X | What happens to content that is too wide for the column. |
| Overflow Y | Overflow Y | What happens to content that is too tall for the column. |
| Border | Border | A visible line drawn around the edge of the column. |
| Border Radius | Border Radius | How rounded the corners of the column are. |
| Box Shadow | Box Shadow | A soft shadow behind the column that makes it look raised off the page. |
| Gap | Gap | The space between the items inside the column, when the column arranges them in a row or grid. |
| Background Color | Background Color | The colour that fills the column behind its content. |
| Text Color | Text Color | The colour of the text in the column, which everything inside it inherits. |
| Typography | Typography | The group of nine text settings on the column: family, size, weight, style, line height, letter spacing, alignment, decoration, and transform. |
| Font Family | Typography → Family | Which typeface the text in the column is set in. |
| Font Size | Typography → Size | How large the text in the column is. |
| Font Weight | Typography → Weight | How bold or light the text in the column is. |
| Font Style | Typography → Style | Whether the text in the column is upright or italic. |
| Line Height | Typography → Line height | How much vertical space each line of text occupies, which sets the gap between lines. |
| Letter Spacing | Typography → Letter spacing | How much space sits between individual characters. |
| Text Align | Typography → Align | Whether the text in the column lines up on the left, the right, the centre, or both edges. |
| Text Decoration | Typography → Decoration | Lines drawn through the text: underline, strikethrough, or overline. |
| Text Transform | Typography → Transform | Force the text into capitals, lower case, or title case without retyping it. |
| Opacity | Opacity | How see-through the whole column is, from fully solid to invisible. |
| Hide Column | Hide Column | Remove the column from the page entirely, either everywhere or only on chosen device sizes. |
Entire Row
Settings on the horizontal band that holds the columns, controlling how those columns are arranged within it.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Add / Remove Row | Add/Remove | Duplicate the whole row, including every column in it, or delete the row from the widget. |
| Horizontal Alignment | Horizontal Alignment | Where the columns sit across the row, and how any leftover space between them is shared out. |
| Vertical Alignment | Vertical Alignment | Where the columns sit from top to bottom within the row when they are not all the same height. |
| Flex Wrap Setting | Flex Wrap Setting | Whether columns that no longer fit drop onto a new line, or stay on one line and squeeze. |
Ideas worth reading once
Two things that come up on nearly every page above. Reading these first will save you time on all the others.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Setting a different value per device | — | Most settings can hold one value for every screen, or separate values for phone, tablet, and desktop. |
| Choosing a unit: px, %, em, rem, vh, vw | — | A plain-language guide to the six measurement units RuleCMS offers, and which one to reach for. |
Settings you may not see
The Selected Column and Entire Row lists are the same for every column and row. The Selected Component list is not: each component declares which settings it accepts, so a text component offers text settings and an image component offers image settings. If a setting listed above is missing from your drawer, the component you have selected does not use it.
The reverse can also happen. If your team has brought its own components into RuleCMS through a component library, those components can declare settings that are not documented here. Ask whoever maintains the library to add a page for them.
When a component is a reference to a collection, the Selected Component section shows collection actions instead of attributes — see Collections for what those do.
Where to go next
- The Composer — the palette, the canvas, and how the drawer fits into the editing surface.
- Widgets — creating and managing the widgets you compose.
- Publishing — getting your changes onto staging and production.