Contact · Channel cards

Three linked cards to call, write or visit: an icon, the channel, the number, address or email in large type and a short note; the whole card is the link.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

With your site in dark mode.

See it live: Contact · Channel cards 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.

Contact · Channels
  Container
    Intro   (FBK Intro)
    Channels
      Channel · Call us
        Card · Call us
          Call us · Icon box
            Call us · Icon
          Call us · Channel
          Call us · Detail
          Call us · Note
          Call us · Arrow
      Channel · Write to us
        Card · Write to us
          Write to us · Icon box
            Write to us · Icon
          Write to us · Channel
          Write to us · Detail
          Write to us · Note
          Write to us · Arrow
      Channel · Visit us
        Card · Visit us
          Visit us · Icon box
            Visit us · Icon
          Visit us · Channel
          Visit us · Detail
          Visit us · Note
          Visit us · 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.

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.

Finish by hand

• Each card is one link (Card · Call us…): set its URL in the link settings (tel:, mailto: or a map link) and change the channel, detail and note texts. The icon box is a Soft · Neutral · Round piece of the style families (it fills on hover by itself); change the icon on … · Icon.
• Hover and keyboard focus: the class .fbk-cchan--motion on Channels lifts the card a little, turns its edge to the color of the titles and moves the arrow on (remove it for still cards).
• Three columns on desktops; from the tablet breakpoint down, one card per row with the icon beside the texts (grid columns of .fbk-cchan__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-cchan, .fbk-cchan__card, .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, 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--soft, fbk-section--light, fbk-section--dark.

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