Label

Base Foundry stack

Label help your page’s different sections really stand out. The Label stack is great for organization and categorization of your content.

  • Customizable text
  • Style with presets or custom color picker
  • Set alignment for label
  • Rounded corner or pill-shaped label
  • Opt to remove roundness from corners
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Default Color
Primary Color
Info Pill-Shape
Custom Colors

Using Label

General

Label
Insert your own custom text into the Label stack.

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Label stack.

Styling

Style
Use the default Foundry styling for your Label, use one of Foundry’s preset color swatches, or opt to choose the text and background colors for your Label using the RapidWeaver color picker.

Starting with Foundry v2 you're now able to choose to use a custom gradient for your label's background. v2

Alignment
Allows you to set the justification of your Label. You can set the alignment to Left, Center or Right.

Foundry v2 introduces the ability to choose to set the alignment of your label differently at each of the three responsive breakpoints. v2

Pill Shaped
The Label stack defaults to having soft rounded corners. Using this feature you can exaggerate those rounded corners making the small Label into a pill-shaped label.

Remove Rounded Corners
Don’t want rounded corners at all? Enable this feature to have perfectly squared off corners for your Label.

Fonts

Font
You can choose to use the Control Center’s font settings for your or opt to select one of the Typeface stack’s font options. For more information on using Typeface be sure to read the documentation page for it here.

Font Weight
Choose the font weight you wish to use for displaying your Label text. If using Typeface be sure you are loading the associated weight for your Typeface font.

Icon v2

Icon v2
When enabled you'll be able to select an icon to be included in your label.

Alignment v2
Choose whether you'd like the icon to appear on either the left- or right-hand side of your label's text.