Build stylish, big block labels for your banners and other sections of content throughout your pages to help them really stand out.
Below we’ve created a couple of examples of the Block Label in action...
The text for your Block Label.
Choose which tag should be associated with your Block Label. HTML uses a series of specialized tags relating to headers. This option allows you to select the right tag for your particular use. The more important the information on the page the larger the label should be.
Choose whether to have your Header adopt the font settings from the Control Center stack or to use the Typeface stack for your font choices.
The default values and settings for headers on your page can be setup within the Foundry Control Center stack. There you can set font sizes, weights, colors and more.
Choose your Block Label font size for each of the 3 responsive breakpoints.
Choose what weight you wish your font to be. The higher the number the more bold the font will be. If using the Typeface stack for your font choice be sure that you are loading the font weight you wish to use within the Typeface stack.
Allows you to set the justification of the Block Label text. You can set the alignment to Left, Center or Right. You also have to option of setting the alignment differently at each of the three breakpoints.
Choose your label’s background and text color. You are able to use the opacity slider to adjust their transparency as well.
Padding inside of the label around the text.
L / R Margin
Sets the margin on the left and right sides of the Block Label. A little left and right margin helps to prevent awkward breaks in the text background.
Allows you to adjust the roundness of the corners of the label’s background.