Style families
Every Fancy Bricks component with small interactive pieces — buttons, cards, icon items, social links, pagination, and more — shares the same five style controls, always in the same order: Look, Tone, Shape, Size, Hover effect. Learn them once and they work the same way everywhere, in every template, in any framework. (Buttons call Look "Style", with its own names — Primary/Secondary/Outline/Ghost — but it's the same axis underneath.)
These aren't picked from an open palette: it's a closed set of options, so every piece in the library looks and behaves consistently.
Look
| Option | What it does |
|---|---|
| Plain | No box. |
| Soft | A tinted box that fills on hover. |
| Outline | A thin edge that fills on hover. |
| Solid | Filled. |
| Elevated | A raised surface with a small shadow. |
Tone
| Option | What it does |
|---|---|
| Brand | Your accent color. |
| Neutral | The text color around it. |
| White | The same on every background — use it for controls sitting over a photo. |
Shape
| Option | What it does |
|---|---|
| Rounded | Follows your site's radius setting. |
| Round | A circle on icons, a pill on text. |
| Square | No radius. |
| Blob | An irregular bubble that turns round on hover (icons only). |
On cards and panels (any "surface" component), Round and Blob aren't offered — only Rounded and Square, both following your site radius.
Size
| Option | What it does |
|---|---|
| Small | — |
| Medium | Default. |
| Large | — |
Surfaces (cards, panels) don't expose a Size control — their size comes from the grid or container around them, not from this setting.
Hover effect
| Option | What it does |
|---|---|
| None | — |
| Grow | The icon grows. |
| Pop | The whole piece grows. |
| Lift | The piece rises a little. |
| Spin | The icon turns once. |
The color always changes on hover and keyboard focus, regardless of which
effect you pick. None of these play with prefers-reduced-motion on.
Where to set them
Select any Fancy Bricks component in Bricks' Structure panel, then open its Style tab in Properties — Look, Tone, Shape, Size and Hover effect are right there, grouped together, in that order.
Common problems
- The component I'm editing doesn't show a Size or a Round/Blob Shape option. It's a surface component (a card or panel) — see the notes under Shape and Size above. That's intentional, not a missing control.
- I changed Tone to Brand but nothing changed. Tone follows your framework's accent color variable. If your framework's accent isn't set yet, Brand and the site's default text can look identical — set your accent color first (see Choosing a framework).