Component Width decides how much of the available horizontal space a component occupies. At 100% it fills the content area; at any smaller value it becomes narrower and is centered automatically.

Where to find it

In the light-blue Config row of the component card. The drop-down offers eleven values:

Value	Typical use
100% (default)	Almost everything. The component takes the full width of the content area.
90%, 80%, 75%, 70%	A slightly narrower block that stands out from surrounding text, e.g. a video or a quote-like feature box.
66%, 60%, 50%	Narrow blocks such as a single-column links list or a small gallery, centered under the text.
40%, 33%, 25%	Very narrow; use with care — text inside becomes hard to read on medium screens.

Overlay Content is the only component without this setting; it always uses the full width.

How it behaves

• Percent of the content area, not of the screen. If the page has a sidebar, 100% means the main column, not the whole window. If you move the component with Target Placement, the percentage applies to the area you moved it to.
• Always centered. A component narrower than 100% gets equal empty space on its left and right. There is no left- or right-aligned option.
• Items adapt. When a component uses Columns, the item width is calculated from the component width: three columns at 50% are half as wide as three columns at 100%.
• Small screens ignore it. On screens up to 680 pixels wide (phones) every component is displayed at full width, whatever the setting, so that content stays readable.
• Container settings follow the component. Backgrounds, borders and padding apply to the narrowed box, not to the full content area. The empty space on both sides stays transparent.

Example

The two feature boxes below come from the same page; the first is set to 100%, the second to 90%. Notice the equal margins on both sides of the second one.

Tips

• Keep most components at 100% and use a narrower width only to make one block stand out; alternating widths on every component makes the page look ragged.
• For side-by-side arrangements use Columns inside one component rather than two narrow components — two components are always stacked, never placed next to each other.