ComboStrap Styling - Color

1 - About

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
The background is defined as being the content plus the padding

3 - Example

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>
A teal card with a black text and a blue border

4 - Value

ComboStrap supports the following color value:

Because the component syntax are a html superset, all other colors value should work

4.1 - Name

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

The default Bootstrap colors are:

4.2 - Gradient

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>

Linear Background Gradient Color

A info note with a light gradient color as background

5 - Info

5.1 - Default Border Attributes

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.

6 - FYI: Bootstrap Color Set

Just for your information, Bootstrap does not assign the same color set by name for a component.

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;
}

7 - Documentation / Reference