ComboStrap Styling - Color

Every ComboStrap UI component can be colorized with one of the following attributes

• color: The color of the text
• background-color: The color of the background
• border-color: The color of the border

With a card

<card background-color="teal" color="black" border-color="blue" width="200px">
A teal [[ui:card|card]] with a black text and a blue border
</card>

ComboStrap supports the following color value:

• name
• RGB

ComboStrap follows the Bootstrap color naming and you may then use the following color names.

The default Bootstrap colors are:

ComboStrap implements also a gradient color naming scheme in order to show a linear color gradient in the background.

Since version 1.2

If you want to have a gradient on your color, just add the gradient- prefix to a color value.

Example with a note:

<note info background-color="gradient-light" >
==== Linear Background Gradient Color ====
 
A [[ui:note|info note]] with a ''light gradient color'' as background
</note>

If you set a border-color attributes, by default ComboStrap will set the following properties if they are not present.

• a width of 1px
• a style of solid (ie a continue line)
• a radius of 0.25rem (round corner)

This is :

• to avoid the confusion to see nothing appearing on the screen
• and to have a consistent styling with bootstrap.

For instance, you got this colors for a Primary button

.btn-primary {
    color: #fff;
    background-color: #075ebb;
    border-color: #075ebb;
}

and this one for a primary note

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

• https://getbootstrap.com/docs/4.0/getting-started/theming/#color