Cards · Downloads
Downloadable resources as cards: the file type in a tag, the title, size and date, and a download link.
Full-page views: desktop, phone and dark mode
At 1440px wide.
At 390px wide.
With your site in dark mode.
See it live: Cards · Downloads on fancybricks.co — the live preview, and the button that copies it.
Structure
This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.
Cards · Downloads
Container
Intro (FBK Intro)
Intro · Button (FBK Button)
Resources
Card grid (FBK Card grid)
Card · Website launch checklist (FBK Card)
Website launch checklist · Type tile
Website launch checklist · Type icon
Website launch checklist · Type
Website launch checklist · Meta
Website launch checklist · Foot
Website launch checklist · Foot text
Website launch checklist · Arrow
Card · Content planning sheet (FBK Card)
Content planning sheet · Type tile
Content planning sheet · Type icon
Content planning sheet · Type
Content planning sheet · Meta
Content planning sheet · Foot
Content planning sheet · Foot text
Content planning sheet · Arrow
Card · Social media templates (FBK Card)
Social media templates · Type tile
Social media templates · Type icon
Social media templates · Type
Social media templates · Meta
Social media templates · Foot
Social media templates · Foot text
Social media templates · Arrow
Card · Small business report 2026 (FBK Card)
Small business report 2026 · Type tile
Small business report 2026 · Type icon
Small business report 2026 · Type
Small business report 2026 · Meta
Small business report 2026 · Foot
Small business report 2026 · Foot text
Small business report 2026 · Arrow
Card · Privacy policy starter (FBK Card)
Privacy policy starter · Type tile
Privacy policy starter · Type icon
Privacy policy starter · Type
Privacy policy starter · Meta
Privacy policy starter · Foot
Privacy policy starter · Foot text
Privacy policy starter · Arrow
Card · Brand guide template (FBK Card)
Brand guide template · Type tile
Brand guide template · Type icon
Brand guide template · Type
Brand guide template · Meta
Brand guide template · Foot
Brand guide template · Foot text
Brand guide template · Arrow
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.
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.
- Paste the template in Bricks first — see Copy and paste.
- 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.
- Select Intro · Button (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
- 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.
- Select Card · Website launch checklist, Card · Content planning sheet, Card · Social media templates (+3 more) (FBK Card) › Properties: Title, Title level, Text, Hide text · Style group: Highlight, Title size, Look, Tone, Shape, Photo overlay, Padding, Photo hover, Background · Layout group: HTML tag, Layout.
Finish by hand
- Each file is an FBK Card (HTML tag li): the file type tile (icon and format) in the
media slot, the title (its link points at the file, with the download attribute, and
covers the card), one line, and in the content slot the size and date (a
<time>with its datetime) and the Download foot. Duplicate a card to add a file. - With files in the media library, a Bricks query loop over attachments can fill the cards: {post_title}, the file URL and its date.
- Hover: the grid's Hover motion (Lift) raises the card; the class
.fbk-wf-files--motionfills the type tile, colors the title and moves the arrow down (states: %root%.fbk-card:has(a[href]):hover and :has(:focus-visible)). Remove it for still cards.
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; the state screen readers need is already set
(aria-hidden).
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.