Block Label

Thunder Pack addon stack

Build stylish, big block labels for your banners and other sections of content throughout your pages to help them really stand out.

  • Choose which HTML header tag you'd like to assign to the label
  • Set alignment of label uniformly, or differently at each breakpoint
  • Set custom font for label, including using Foundry's Typeface stack
  • Opt for rounded corners on label background

Example

Below we’ve created a couple of examples of the Block Label in action...

Lorem ipsum lectus sem ut dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper aliquet egestas vitae, nibh ante.

Lorem ipsum lectus sem ut dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper aliquet egestas vitae, nibh ante.

Using Block Label

General

Label
The text for your Block Label.

Tag
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.

  • H1: Page Title
  • H2: Sub Title
  • H3: Section
  • H4: Sub Section
  • H5: Small
  • H6: Smallest

Label Font

Font
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.

Font Size
Choose your Block Label font size for each of the 3 responsive breakpoints.

Font Weight
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.

Alignment
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.

Style

Color
Choose your label’s background and text color. You are able to use the opacity slider to adjust their transparency as well.

Inner Padding
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.

Rounded Corners
Allows you to adjust the roundness of the corners of the label’s background.