Free Bric: TextBloc

Quick Start

Step 1. Add the bric to a page that has elements you want to control.

Step 2. Using any or all of the Target Element Fields, type a selector for that element.

p, #myid, .myclass h2

You can add multiple selectors in the field (each targeting a different element), just separate them with a comma.

Step 3. Set the maximum and minimum font-sizes you want the font to show.
Hint: use the mobile view to set the minimum and desktop view to set the maximum to your liking. This makes things sooo easy.

Step 4: The other settings such as Line Heights are optional. Here’s a quick run down.

Each of the settings below are optional.

Min Line Height = The smallest line-height. It scales with the font-size.
Max Line Height = The biggest line-height. It scales with the font-size.
Min Width = width that controls the small font size.
Max Width = width that controls the large font size.
Get width = Calculate the width from the parent or the element itself.

I am having problems using textbloc with carousel. When in preview, the the first slide text is correct, but when it goes to the next slides, the text is too small until you change the width of the window, then it corrects itself.

Haven’t tested for this, but I’ll take a look and see what’s up.

Hi, thank you for the Bric,
In your example, the class is in brackets, not me. What am I doing wrong?textbl-hero textbl

Regards Stefan

Hi @stefan,

This looks like you have 2 versions of the bric. The lower image looks like the latest release.


The parenthesis are not part of the code, they were used to group the targeted elements Now I use slashes instead.

As I released new version, I tried to improve on my original concept. At the time of the first release there was no established pattern for what I wanted to do. I thought to myself it wouls be nice to have a placeholder that actually provides feedback about what the bric is targeting so you can know this information at a glance. It helps so you don’t have to click on the bric to see what it’s targeting!

I played around with different formats. The idea is that each new target element gets separated into groups. I didn’t like the looks or readability of the parenthesis and eventually changed to forward slashes instead. (looks cleaner and better readability.)

Since the release of TextBloc, Norm has quite nicely rolled some of the things I’ve been doing into the API to make it easier and to have a standard look for these type of Brics.

Hi Whittfield,
Thank you for the informations. Now I know that everything is right.
Greeting Stefan