FBK Circle text
Text that runs around a circle, with an icon or photo in the middle.
- Used in 1 template
- 15 options
- Native Bricks element
One FBK Circle text, as in the first example below. Change anything from the panel after you paste it.
In the annual plan, $99/year. See plans
Every FBK Circle text variation
Live from the demo site. Switch the width and the background, or open it full screen.
Loading demo…
The options
Every property of the component, in the order the Bricks panel shows them.
| Option | Choices | Default |
|---|---|---|
| TextIt goes round the circle once: the letters grow or shrink to fit. End it with a separator (·) so the end and the start don't touch. Screen readers read it as written. | Any text | Fancy Bricks · Templates for Bricks · |
| Icon | Any icon | — |
| Photo | Any image | — |
| Photo alt textLeave it empty when the photo is decoration. | Any text | — |
| Hide icon | On or off | Off |
| Hide photo | On or off | On |
| Photo on hoverAs a link: the photo grows a little under the mouse; Faded until hover also shows it faded and gray until then (always in color on touch screens). | Grows, Faded until hover | Grows |
| HTML taga: the whole badge is a link (set it below); the text is its name. | div, a (link) | div |
| LinkOnly with the HTML tag a. | Any link | — |
| StyleWith ring: a band behind the text, for photos and color. Disc: a full disc in the tone's color (Brand: your accent color; Neutral: the heading color). | Text only, With ring, Disc | Text only |
| ToneThe color of the icon, the hover and the disc. Brand: your accent color. Neutral: the heading color. | Brand, Neutral, White | Brand |
| Size | S (6em), M (8em), L (10.5em) | M (8em) |
| BackgroundDark or Brand when the badge sits on a dark or brand background you made. | Auto, Light, Dark, Brand | Auto |
| MotionAlways: it never stops, so it shows a pause button (WCAG 2.2.2). On hover: only under the mouse. Nothing turns for visitors who ask for reduced motion. | Always (pause button), On hover, Still | Still |
| Direction | Clockwise, Anticlockwise | Clockwise |
Related components
All components
Questions, answered
Short answers about FBK Circle text.
Do I need a template to use FBK Circle text?
No. Copy it from this page and paste it anywhere in Bricks. It also comes with every template that uses it.
What happens if I change FBK Circle text on my site?
Every instance follows: the design lives in the component and its classes, not in each copy.
Does it work with my framework?
Yes. Copy it for Fancy Framework, Automatic.css or Core Framework, and it uses your colors and sizes.
Every component comes inside a template
Browse the library, copy a section, and the components it uses come with it.