Attribute Reference

Every setting in the composer's Modify drawer, explained in plain language — what it does, when to reach for it, and what to watch out for.

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. The widget and each collection also have a gear in their header: Widget Settings and Collection Settings style the outermost box rather than one row or column. 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.

Looking for a component’s own settings? Those live with the component, because each component offers a different set — an image has no Content Text and a text component has no alt text. See RuleCMS Components. The pages below are the column, row, widget, and collection settings.

You do not have to come here to find a page. Every setting in the drawer has a small information icon just after its name. Clicking it opens that setting’s page in a new tab, so you can read it without losing your place in the composer.

The 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.
Widget Settings	The box every row sits inside — size, spacing, colour, and visibility for the whole embed.	You are styling how the widget sits on the host page, not one row or column inside it.
Collection Settings	The box every row of a collection sits inside — the same kinds of settings as Widget Settings, applied wherever that collection is embedded.	You are styling a reused block, not the outer widget and not one row inside the collection.

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

Four 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.
Using a CSS variable instead of a typed value — point a setting at a name your own site defines, instead of typing a number.
Reset and Clear attributes — how the pills at the top of each section restore a fresh drop or strip that section bare, and why they only touch the section they sit in.

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.
Horizontal Alignment	Horizontal Alignment	Where the column's children sit across its width when the column is a flex container.
Vertical Alignment	Vertical Alignment	Where the column's children sit from top to bottom when they are not all the same height.
Flex Wrap Setting	Flex Wrap Setting	Whether children that no longer fit wrap onto a new line, or stay on one line and squeeze.
Align Content	Align Content	How multiple wrapped lines of children pack from top to bottom inside the column.
Flex Direction	Flex Direction	The main axis children follow inside the column: row, column, or reversed.
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.
Background Image	Background Image	A picture painted behind the column content, with control over how it is scaled, placed, and tiled.
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.
CSS Classes	CSS Classes	Attach your own CSS class names to the column so your site's stylesheet can style it.
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 — layout, spacing, colour, typography, and visibility — with the same per-device controls as Selected Column.

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.
Row Margin	Margin	Space around the outside of the row band.
Row Padding	Padding	Space inside the row, between the row edges and its columns.
Row Width	Width	How wide the row band is.
Row Height	Height	How tall the row band is.
Row Min Width	Min Width	The smallest width the row is allowed to shrink to.
Row Max Width	Max Width	The largest width the row is allowed to grow to.
Row Min Height	Min Height	The smallest height the row is allowed to shrink to.
Row Max Height	Max Height	The largest height the row is allowed to grow to.
Row Overflow	Overflow	What happens when row content does not fit the row box.
Row Overflow X	Overflow X	Horizontal overflow behaviour for the row.
Row Overflow Y	Overflow Y	Vertical overflow behaviour for the row.
Row Border	Border	Border around the row band.
Row Border Radius	Border Radius	How rounded the row corners are.
Row Box Shadow	Box Shadow	Drop shadow behind the row band.
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.
Align Content	Align Content	How multiple wrapped lines of columns pack from top to bottom inside the row.
Row Flex Direction	Flex Direction	The main axis columns follow inside the row: row, column, or reversed.
Gap	Gap	The space between columns inside the row.
Row Background Color	Background Color	Fill colour behind the row band.
Row Background Image	Background Image	A picture painted behind the whole row band.
Row Text Color	Text Color	Default text colour inherited by content inside the row.
Row Typography	Typography	Font and text settings inherited by content inside the row.
Row Font Family	Family	Font family inherited from the row.
Row Font Size	Size	Font size inherited from the row.
Row Font Weight	Weight	Font weight inherited from the row.
Row Font Style	Style	Font style (for example italic) inherited from the row.
Row Line Height	Line height	Line height inherited from the row.
Row Letter Spacing	Letter spacing	Letter spacing inherited from the row.
Row Text Align	Align	Text alignment inherited from the row.
Row Text Decoration	Decoration	Text decoration inherited from the row.
Row Text Transform	Transform	Text transform inherited from the row.
Row Opacity	Opacity	Transparency of the entire row band and its contents.
Row CSS Classes	CSS Classes	Attach your own CSS class names to the row's flex wrapper so your site's stylesheet can style the band.
Hide Row	Hide Row	Hide the entire row for one or more device sizes.

Settings on the widget as a whole — the box every row sits inside. Open them from the gear in the widget header. Size, spacing, border, shadow, overflow, and hiding are left out while editing so the canvas keeps its full drag-and-drop surface; open Preview to see those applied.

Setting	Label in the drawer	What it does
Widget Margin	Margin	Space around the outside of the whole widget, between it and the host page.
Widget Padding	Padding	Space inside the widget edges, before the first row starts.
Widget Width	Width	How wide the whole widget is on the host page.
Widget Height	Height	How tall the whole widget is.
Widget Min Width	Min Width	The smallest width the widget is allowed to shrink to.
Widget Max Width	Max Width	The largest width the widget is allowed to grow to on the host page.
Widget Min Height	Min Height	The smallest height the widget is allowed to shrink to.
Widget Max Height	Max Height	The largest height the widget is allowed to grow to.
Widget Overflow	Overflow	What happens when widget content does not fit the widget box.
Widget Overflow X	Overflow X	Horizontal overflow behaviour for the whole widget.
Widget Overflow Y	Overflow Y	Vertical overflow behaviour for the whole widget.
Widget Border	Border	Border around the whole widget.
Widget Border Radius	Border Radius	How rounded the widget corners are.
Widget Box Shadow	Box Shadow	Drop shadow behind the whole widget.
Widget Gap	Gap	The vertical space between the rows of the widget.
Widget Background Color	Background Color	Fill colour behind every row of the widget.
Widget Background Image	Background Image	A picture painted behind every row of the widget.
Widget Text Color	Text Color	Default text colour inherited by content inside the widget.
Widget Typography	Typography	Font and text settings inherited by content inside the widget: family, size, weight, style, line height, letter spacing, alignment, decoration, and transform.
Widget Font Family	Family	Font family inherited from the widget.
Widget Font Size	Size	Font size inherited from the widget.
Widget Font Weight	Weight	Font weight inherited from the widget.
Widget Font Style	Style	Font style (for example italic) inherited from the widget.
Widget Line Height	Line height	Line height inherited from the widget.
Widget Letter Spacing	Letter spacing	Letter spacing inherited from the widget.
Widget Text Align	Align	Text alignment inherited from the widget.
Widget Text Decoration	Decoration	Text decoration inherited from the widget.
Widget Text Transform	Transform	Text transform inherited from the widget.
Widget Opacity	Opacity	Transparency of the entire widget and its contents.
Widget CSS Classes	CSS Classes	Attach your own CSS class names to the widget's outermost element so your site's stylesheet can style the embed.
Hide Widget	Hide Widget	Hide the entire widget for one or more device sizes.

Collection Settings

Settings on the collection as a whole — the box every row sits inside, wherever the collection is embedded. Open them from the gear in the collection header. The same canvas exclusions as Widget Settings apply while editing.

Setting	Label in the drawer	What it does
Collection Margin	Margin	Space around the outside of the whole collection, between it and the parent.
Collection Padding	Padding	Space inside the collection edges, before the first row starts.
Collection Width	Width	How wide the whole collection is in its parent.
Collection Height	Height	How tall the whole collection is.
Collection Min Width	Min Width	The smallest width the collection is allowed to shrink to.
Collection Max Width	Max Width	The largest width the collection is allowed to grow to in its parent.
Collection Min Height	Min Height	The smallest height the collection is allowed to shrink to.
Collection Max Height	Max Height	The largest height the collection is allowed to grow to.
Collection Overflow	Overflow	What happens when collection content does not fit the collection box.
Collection Overflow X	Overflow X	Horizontal overflow behaviour for the whole collection.
Collection Overflow Y	Overflow Y	Vertical overflow behaviour for the whole collection.
Collection Border	Border	Border around the whole collection.
Collection Border Radius	Border Radius	How rounded the collection corners are.
Collection Box Shadow	Box Shadow	Drop shadow behind the whole collection.
Collection Gap	Gap	The vertical space between the rows of the collection.
Collection Background Color	Background Color	Fill colour behind every row of the collection.
Collection Background Image	Background Image	A picture painted behind every row of the collection.
Collection Text Color	Text Color	Default text colour inherited by content inside the collection.
Collection Typography	Typography	Font and text settings inherited by content inside the collection: family, size, weight, style, line height, letter spacing, alignment, decoration, and transform.
Collection Font Family	Family	Font family inherited from the collection.
Collection Font Size	Size	Font size inherited from the collection.
Collection Font Weight	Weight	Font weight inherited from the collection.
Collection Font Style	Style	Font style (for example italic) inherited from the collection.
Collection Line Height	Line height	Line height inherited from the collection.
Collection Letter Spacing	Letter spacing	Letter spacing inherited from the collection.
Collection Text Align	Align	Text alignment inherited from the collection.
Collection Text Decoration	Decoration	Text decoration inherited from the collection.
Collection Text Transform	Transform	Text transform inherited from the collection.
Collection Opacity	Opacity	Transparency of the entire collection and its contents.
Collection CSS Classes	CSS Classes	Attach your own CSS class names to the collection's outermost element so your site's stylesheet can style the embed.
Hide Collection	Hide Collection	Hide the entire collection for one or more device sizes.

Ideas worth reading once

The handful of ideas 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.
Using a CSS variable instead of a typed value	—	Point a setting at a named value your own site already defines — a brand colour, a spacing step — instead of typing the number or colour into RuleCMS.
Reset and Clear attributes	—	Two pills at the top of each settings section: Reset puts that section back to a fresh drop, and Clear strips it bare. They only touch the section they sit in.

Settings you may not see

Column and row settings apply to every column and every row, and widget and collection settings apply to every widget and every collection, so those lists above are the same whatever you have selected. The Selected Component section is the one that changes: each component declares which settings it accepts, which is why those pages live under RuleCMS Components rather than here.

If your team has brought its own components into RuleCMS through a component library, those components can declare settings that are not documented anywhere on this site. Ask whoever maintains the library.

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

RuleCMS Components — the settings that belong to the component itself.
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.