- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Label SASS Reference
Description
You can change the styles of the components by using SASS Reference.
Variables
The following table lists the SASS variables in the project's settings file that makes this component's default styles to get customized.
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$label-background It represents the label's default background color. |
Color | $primary-color |
2 |
$label-color It represents the label's default text color. |
Color | foreground($label-background) |
3 |
$label-font-size It represents the label's default font size. |
Number | 0.8rem |
4 |
$label-padding It represents the label's default internal padding. |
Number | 0.33333rem 0.5rem |
5 |
$label-radius It represents the label's default radius. |
Number | $global-radius |
Mixins
To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.
label
@include label;
It is used to generate a label's base styles.
foundation_media.htm
Advertisements
To Continue Learning Please Login
Login with Google