Color

Convey meaning through color with a handful of color utility classes. Includes support for styling text and background colors via the semantic @color attribute.

Colors

Colorize text and backgrounds with color utilities. The @color attribute provides a semantic way to apply standard Bootstrap color themes.

.text-bg-primary

.text-bg-secondary

.text-bg-success

.text-bg-danger

.text-bg-warning

.text-bg-info

.text-bg-light

.text-bg-dark

<div color="primary">.text-bg-primary</div>
<div color="secondary">.text-bg-secondary</div>
<div color="success">.text-bg-success</div>
<div color="danger">.text-bg-danger</div>
<div color="warning">.text-bg-warning</div>
<div color="info">.text-bg-info</div>
<div color="light">.text-bg-light</div>
<div color="dark">.text-bg-dark</div>

<div outputclass="text-bg-primary">.text-bg-primary</div>
<div outputclass="text-bg-secondary">.text-bg-secondary</div>
<div outputclass="text-bg-success">.text-bg-success</div>
<div outputclass="text-bg-danger">.text-bg-danger</div>
<div outputclass="text-bg-warning">.text-bg-warning</div>
<div outputclass="text-bg-info">.text-bg-info</div>
<div outputclass="text-bg-light">.text-bg-light</div>
<div outputclass="text-bg-dark">.text-bg-dark</div>

Base DITA Elements

Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.

Section Decoration

This section has a primary color background.

This div has a success color background.

        This pre has a warning color background.

This is a long quote with a danger color background.

Table 1. Table Decoration
Entry 1	Entry 2

Note: This is a note with a primary color theme.

<section color="primary">
  <title>Section Decoration</title>
  <p>This section has a primary color background.</p>
</section>

<div color="success" padding="3">
  <p>This div has a success color background.</p>
</div>

<pre color="warning">
  This pre has a warning color background.
</pre>

<lq color="danger" padding="1">
  This is a long quote with a danger color background.
</lq>

<table color="info" padding="1" width="100">
  <title>Table Decoration</title>
  ...
</table>

<note color="primary">
  This is a note with a primary color theme.
</note>

<section outputclass="text-bg-primary">
  <title>Section Decoration</title>
  <p>This section has a primary color background.</p>
</section>

<div outputclass="text-bg-success p-3">
  <p>This div has a success color background.</p>
</div>

<pre outputclass="text-bg-warning">
  This pre has a warning color background.
</pre>

<lq outputclass="text-bg-danger p-1">
  ...
</lq>

<table outputclass="text-bg-info p-1 w-100">
  ...
</table>

<note color="primary">
  ...
</note>

Specialized Elements

Many specialized components also support the @color attribute for consistent theming.

Card Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

This is the first item's accordion body.

An item
A second item

<card color="success" width="50">
  <title>Card Title</title>
  <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</card>

<accordion color="info">
  <accordion-item id="accordion_color_1" outputclass="show">
    <title>Accordion Item #1</title>
    <p>This is the first item's accordion body.</p>
  </accordion-item>
</accordion>

<list-group width="50" color="danger">
  <li>An item</li>
  <li>A second item</li>
</list-group>

<carousel color="dark" width="50" indicators="yes">
  <carousel-item>
    <image href="..."/>
  </carousel-item>
</carousel>

<section outputclass="card text-bg-success w-50">
  ...
</section>

<bodydiv outputclass="accordion accordion-info">
  ...
</bodydiv>

<ul outputclass="list-group list-group-item-danger w-50">
  ...
</ul>

<ul outputclass="carousel carousel-dark w-50">
  ...
</ul>

Text Color

For text-only colorization, the @outputclass attribute remains the primary method.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

<p outputclass="text-primary">.text-primary</p>
<p outputclass="text-secondary">.text-secondary</p>
<p outputclass="text-success">.text-success</p>
<p outputclass="text-danger">.text-danger</p>
<p outputclass="text-warning bg-dark">.text-warning</p>
<p outputclass="text-info bg-dark">.text-info</p>