Opens in a new tab

Style families

One look for every piece

Every small piece of every Fancy Bricks component shares the same looks, tones, shapes and sizes, so whatever you combine matches. Each row is one family: a button, social links, share links, an icon and tags.

Plain · Brand

Plain · Neutral

Soft · Brand

Soft · Neutral

Outline · Brand

Outline · Neutral

Solid · Brand

Solid · Neutral

Elevated · Brand

Fast to set up

NewDesign

Elevated · Neutral

Fast to set up

NewDesign

Five hover effects

On top of the color change, every interactive piece can grow its icon, grow, rise or turn its icon. Lift rises from a still parent, so the pointer never makes it jump. Nothing moves with reduced motion.

Four shapes

Round is a circle on an icon and a pill on a tag. Rounded and Square follow your site radius. Blob, for icons, is a bubble that turns round on hover.

Shape · Round

Fast to set up

NewDesign

Shape · Rounded

Fast to set up

NewDesign

Shape · Square

Fast to set up

NewDesign

Shape · Blob

On dark backgrounds

The same families adapt by themselves on a dark section.

Plain · Brand

Plain · Neutral

Soft · Brand

Soft · Neutral

Outline · Brand

Outline · Neutral

Solid · Brand

Solid · Neutral

Elevated · Brand

Fast to set up

NewDesign

Elevated · Neutral

Fast to set up

NewDesign

On the brand color

And on the brand color, where the brand tone turns white.

Plain · Brand

Plain · Neutral

Soft · Brand

Soft · Neutral

Outline · Brand

Outline · Neutral

Solid · Brand

Solid · Neutral

Elevated · Brand

Fast to set up

NewDesign

Elevated · Neutral

Fast to set up

NewDesign

Surfaces

Cards, panels and popovers take the same looks and tones. Rounded and Square follow your card radius.

Plain · Brand

A surface in this family.

Plain · Neutral

A surface in this family.

Soft · Brand

A surface in this family.

Soft · Neutral

A surface in this family.

Outline · Brand

A surface in this family.

Outline · Neutral

A surface in this family.

Solid · Brand

A surface in this family.

Solid · Neutral

A surface in this family.

Elevated · Brand

A surface in this family.

Elevated · Neutral

A surface in this family.

Surfaces on dark

The same surfaces on a dark section.

Plain · Brand

A surface in this family.

Plain · Neutral

A surface in this family.

Soft · Brand

A surface in this family.

Soft · Neutral

A surface in this family.

Outline · Brand

A surface in this family.

Outline · Neutral

A surface in this family.

Solid · Brand

A surface in this family.

Solid · Neutral

A surface in this family.

Elevated · Brand

A surface in this family.

Elevated · Neutral

A surface in this family.

Surfaces on the brand color

And on the brand color.

Plain · Brand

A surface in this family.

Plain · Neutral

A surface in this family.

Soft · Brand

A surface in this family.

Soft · Neutral

A surface in this family.

Outline · Brand

A surface in this family.

Outline · Neutral

A surface in this family.

Solid · Brand

A surface in this family.

Solid · Neutral

A surface in this family.

Elevated · Brand

A surface in this family.

Elevated · Neutral

A surface in this family.

Controls

Slider arrows, pause, previous and next, close, menu buttons and accordion icons take the same looks and tones. Sliders use Elevated, round.

Brand · Plain, Soft, Outline, Solid, Elevated

Neutral · Plain, Soft, Outline, Solid, Elevated

Shapes · Round, Rounded, Square, Blob (control and pause)

The icon box takes the look, the tone and the shape; the open item shows the look's hover.

Controls on dark

The same controls on a dark section.

Brand · Plain, Soft, Outline, Solid, Elevated

Neutral · Plain, Soft, Outline, Solid, Elevated

Shapes · Round, Rounded, Square, Blob (control and pause)

The icon box takes the look, the tone and the shape; the open item shows the look's hover.

Controls on the brand color

And on the brand color.

Brand · Plain, Soft, Outline, Solid, Elevated

Neutral · Plain, Soft, Outline, Solid, Elevated

Shapes · Round, Rounded, Square, Blob (control and pause)

The icon box takes the look, the tone and the shape; the open item shows the look's hover.