Components
Fancy Bricks templates are built from nine reusable Bricks components. Drop any of them into your own layout and they follow the same style families as everywhere else in the library.
This page is an overview; a full page per component, with every option spelled out, is still being written.
| Component | What it's for | Its own options |
|---|---|---|
| FBK Intro | A section's heading block: eyebrow + title (in an <hgroup>) + lead text + an actions slot. | Eyebrow style, heading level (H1–H3), title highlight (color/half/pill/box/underline/curve), title size, align, accent line, layout (1 column or split 2-col in a few ratios), scheme (auto/light/dark/brand), spacing, slider reveal. |
| FBK Card | A surface with a media slot, title, text, a content slot and an actions slot. | Tag (div/li/article), photo-background style, padding (S/M/L), layout (vertical/horizontal), photo hover, scheme — plus Look/Tone/Shape as a surface (no Round/Blob, no Size). |
| FBK Button / FBK Action button | A link (or a real <button>, for popups and JS interactions) with text and an optional icon. | Icon + position, Style (Primary/Secondary/Outline/Ghost/White/White outline), Tone, Size, Width (auto/full), hover effect (color change/sweep/icon reveal/brackets/pulse/plus/glow/icon nudge), shadow. |
| FBK Quote | A testimonial: quote, star rating, avatar, name, role, date. | Layout (Classic/Top/Header), Look/Tone/Shape, a separate tone for the stars and shape for the avatar, show/hide per part. |
| FBK Image | A photo with a consistent shape and border treatment. | Aspect ratio, shape (radius/square/soft/circle/arch/pill/bevel/scoop), decoration (frame/float/block/corners/dots), border, width, align, optional caption. |
| FBK Marquee | An infinite scrolling strip — logos, cards, text or a query loop — with a built-in pause button (WCAG 2.2.2). | Direction, height, speed, item style (plain/dividers/cards), logo tone, gap, edge fade. Requires code execution. |
| FBK Social | Social links (Facebook, Instagram, X, LinkedIn, plus hidden YouTube/TikTok). | Look/Tone/Shape/Size/Hover effect, show/hide names. |
| FBK Icon item | Icon + title + text, for features, contact rows, steps or mini-cards. | Layout (stacked/inline/boxed), Look/Tone/Shape/Size/Hover effect. |
Every one of these (apart from Button, Image and Marquee, which have their own specialized controls in the same spirit) shares the same Look / Tone / Shape / Size / Hover effect group described in Style families.