ComboStrap Styling - Skin attribute (Emphasis Control)

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:

Since version 1.4

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