Text-media · Project case study

A project page for a portfolio: the title and a column of project details, a wide photo, then the challenge, the solution and the results with three figures that count up.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

With your site in dark mode.

See it live: Text-media · Project case study on fancybricks.co — the live preview, and the button that copies it.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: The figures count up only on the front end; in the builder they show their final value.. Save and open the page to see the full result.

Structure

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

Text-media · Project case study
  Container
    Case study
      Head
        Intro   (FBK Intro)
        Project details
          Detail · Client row
            Detail · Client
            Detail · Client value
          Detail · Year row
            Detail · Year
            Detail · Year value
          Detail · Services row
            Detail · Services
            Detail · Services value
          Detail · Team row
            Detail · Team
            Detail · Team value
          Detail · Live app row
            Detail · Live app
            Detail · Live app value
      Wide photo   (FBK Image)
      Chapters
        Chapter · The challenge
          The challenge · Title
          The challenge · Text
            Challenge · Text
        Chapter · Our solution
          Our solution · Title
          Our solution · Text
            Solution · Text
            Solution · Checks   (FBK Check list)
              Check · One screen per invoice, with taxes filled in for you   (FBK Check item)
              Check · Clients, items and prices remembered after the first time   (FBK Check item)
              Check · A design system the team now ships every feature with   (FBK Check item)
        Chapter · The results
          The results · Title
          The results · Text
            Results · Text
            Results · Figures wrap
              Figures   (FBK Counters)
                Figure · Minutes   (FBK Counter)
                Figure · Late payments   (FBK Counter)
                Figure · Teams   (FBK Counter)
      Foot
        Start a project   (FBK Button)
        Next case study   (FBK Button)
    Counter (JS)

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 Wide photo (FBK Image) › Properties: Image, Alt text · Shape group: Proportion, Shape, Decoration, Border · Size and loading group: Loading, Width, Max width, Alignment · Caption group: Caption, Hide caption.
4. Select Solution · Checks (FBK Check list) › Properties: Style group: Look, Tone, Shape, Size, Background · Layout group: Columns, Lines between rows.
5. Select Check · One screen per invoice, with taxes filled in for you, Check · Clients, items and prices remembered after the first time, Check · A design system the team now ships every feature with (FBK Check item) › Properties: Text, Included.
6. Select Figures (FBK Counters) › Properties: Layout group: Columns, Background.
7. Select Figure · Minutes, Figure · Late payments, Figure · Teams (FBK Counter) › Properties: Figure, Prefix, Suffix, Label, Text, Icon · Show or hide group: Hide icon, Hide label, Hide text · Style group: Look, Tone, Shape, Rule, Icon tone, Size, Alignment, Layout, HTML tag, Background.
8. Select Start a project, Next case study (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
9. Spacing, sizes, color and timing with no property of their own: the CSS variables below.

CSS variables

These are the only values in the template meant to be changed by hand. Copy the block, paste it, edit the numbers.

The Custom CSS field of this template's own element, with one of its variables as a real example.

/* «Case study» · class .fbk-wf-case */
.fbk-wf-case {
  /* Hairlines: project details and chapters */
  --fbk-t-line: color-mix(in srgb, currentColor 16%, transparent);
}

Paste the block in the element's Style → CSS field (the selector is already in it), or set the same variables on the class itself to change every copy at once. The values are your framework's variables, so they follow your site: Choosing a framework.

Requirements

• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• A new layout with no FB 1.0 or 2.0 original. Link to it from your portfolio grid or case study cards.
• Project details are a description list (dl): each row is a div with a dt (the term) and a dd (the value). Duplicate a row to add one; the last one holds a link to the live site.
• The wide photo is an FBK Image (16:9): put a screenshot or a photo of the work and describe it in its Alt text. Each chapter is a row with its title (h3) on one side and the text on the other; the solution has an FBK Check list, the results an FBK Counters list with three FBK Counter.
• Motion: the figures count up once when they come into view (the Counter script after them keeps reduced motion and screen readers right); the buttons sweep and the Ghost draws its line; the site link takes the hover ink. The rest has no link, so it stays still.

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-wf-case__chapter, .fbk-wf-case__head, .fbk-counters, .fbk-intro.
• 767px and below — .fbk-checks, .fbk-counters, .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, aria-label).

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--light, fbk-section--soft, fbk-section--dark.

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