Text media · Mini cards

A centered intro over four small linked cards with a thumbnail and an accent bar.

See it live: Text media · Mini cards on fancybricks.co — the live preview, and the button that copies it.

Or open the preview on its own — narrow the window to see it on a phone — and in dark mode.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Text media · Mini cards
  Container
    Intro   (FBK Intro)
    Card grid   (FBK Card grid)
      Mini card · Guatapé by boat   (FBK Mini card)
      Mini card · Coffee region valleys   (FBK Mini card)
      Mini card · Colombian waterfalls   (FBK Mini card)
      Mini card · Caribbean coast   (FBK Mini card)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Intro (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
3. Select Card grid (FBK Card grid) › Properties: Layout group: Columns · Hover effects group: Hover motion, Photo zoom, Photo color, Border light, Reveal text, Hide effects script.
4. Select Mini card · Guatapé by boat, Mini card · Coffee region valleys, Mini card · Colombian waterfalls (+1 more) (FBK Mini card) › Properties: Thumbnail, Title, Link, Title tag, Text · Show or hide group: Hide text, Hide thumbnail · Style group: Look, Tone, Shape, Accent, Hover effect, HTML tag, Background.

Finish by hand

• Each card is an FBK Mini card: thumbnail, title and link in its properties (the whole card is clickable). Show the text line, change the style or drop the accent bar there too.
• For a dark band add fbk-section--dark to the section.
• The color that fills the card on hover or keyboard focus (as in the original) is the Mini card Hover effect property: Fill (class fbk-minicard--fill); Title color for a calmer card.

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-intro.
• 767px and below — .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion.

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

With your site in dark mode this section turns dark too — the class fbk-section--auto-dark on the section does it. Remove the class to keep it light.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--soft, fbk-section--light, fbk-section--dark.

How the library follows your site's color scheme: Dark mode and preview.

Replaces

• 01 - Content from Fancy Bricks 2.0

What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.