Elements · Circle text

A showcase of the FBK Circle text component: text that goes round an icon, a photo or nothing, plain, with a ring or on a brand disc, as a link, turning always, on hover or still.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

With your site in dark mode.

See it live: Elements · Circle text 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 ring of text is drawn by the script on the front end: here the text shows under each badge. 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.

Circle text showcase
  Circle text · Light
    Container
      Intro   (FBK Intro)
      Badges
        Cell · Icon, still
          Circle text · Icon, still   (FBK Circle text)
          Label
        Cell · Photo, always (pause button)
          Circle text · Photo, always (pause button)   (FBK Circle text)
          Label
        Cell · With ring, anticlockwise on hover
          Circle text · With ring, anticlockwise on hover   (FBK Circle text)
          Label
        Cell · Brand disc, link, on hover
          Circle text · Brand disc, link, on hover   (FBK Circle text)
          Label
        Cell · Photo as a link, large
          Circle text · Photo as a link, large   (FBK Circle text)
          Label
        Cell · Text only, small
          Circle text · Text only, small   (FBK Circle text)
          Label
  Circle text · Dark
    Container
      Intro   (FBK Intro)
      Badges
        Cell · Icon
          Circle text · Icon   (FBK Circle text)
          Label
        Cell · Photo with ring, link, faded until hover
          Circle text · Photo with ring, link, faded until hover   (FBK Circle text)
          Label
        Cell · Brand disc, link
          Circle text · Brand disc, link   (FBK Circle text)
          Label

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 ×2 (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 Circle text · Icon, still, Circle text · Photo, always (pause button), Circle text · With ring, anticlockwise on hover (+6 more) (FBK Circle text) › Properties: Text, Icon, Photo, Photo alt text · Show or hide group: Hide icon, Hide photo · Link group: HTML tag, Link · Style group: Photo on hover, Style, Tone, Size, Background · Motion group: Motion, Direction.

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

• Hover effects (on by default on the links, each a class you can remove): fbk-circletext--hover turns the ring under the mouse; fbk-circletext--fade shows the photo faded until hover (Photo on hover: Grows); the photo grows and the text takes the accent color on every link.
• To use a badge, copy it into your page and write its text in the Text property: the letters size themselves so the text goes round exactly once. End it with a separator (·).
• Style, size, motion and direction are in its properties (groups Style and Motion); a link: HTML tag a and the link (group Link). Colors and size: the --fbk-circletext-* variables of .fbk-circletext (Style > CSS); the ring band and the disc are its ::before.
• The ring needs "Execute code" enabled for the role; without it the text shows under the badge. Always shows the pause button (moving content longer than 5 seconds must be pausable).

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, 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--dark.

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

Replaces

• 01 - Circular text from Fancy Bricks 1.0

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