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:

You can also use a CSS Color name.

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 - Generator

Generating or choosing attractive color is not easy. The color generator may help you in this task.

8 - Documentation / Reference

Powered by ComboStrap