ComboStrap Styling - Skin attribute (Emphasis Control)
Table of Contents
1 - About
skin is a ComboStrap styling attribute that defines the emphasis level of your component by applying a set of standard styling attribute on:
- and elevation.
Since version 1.4
2 - Articles Related
3 - Syntax
<component skin="filled">
where the skin value is one of:
- contained
- filled (default)
- outline
- text
4 - Skin and Emphasis Level
Name | Emphasis Level | Text Color | Background Color | Border Color | Elevation |
---|---|---|---|---|---|
Contained | High | 🗸 | 🗸 | 🗸 | 🗸 |
Filled (Default) | Medium | 🗸 | 🗸 | 🗸 | |
Outline | Low | 🗸 | 🗸 | ||
Text | Normal | 🗸 |
5 - Example
5.1 - Button
With a button
<btn secondary skin="contained">Contained</btn>
<btn secondary skin="filled">Filled</btn>
<btn secondary skin="outline">Outline</btn>
<btn secondary skin="text">Text</btn>
5.2 - Note
With a note
<note skin="contained">A Contained Note</note>
<note skin="filled">A Filled Note</note>
<note skin="outline">An Outlined Note</note>
<note skin="text">A Textual Note</note>
A Contained Note
A Filled Note
An Outlined Note
A Textual Note
5.3 - Card
With a card
<card primary skin="contained" spacing="my-2">A Contained Card</card>
<card primary skin="filled" spacing="my-2">A Filled Card</card>
<card primary skin="outline" spacing="my-2">An Outlined Card</card>
<card primary skin="text" spacing="my-2">A Textual Card</card>
A Contained Card
A Filled Card
An Outlined Card
A Textual Card