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.

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-accent

bg-inverse

<div outputclass="bg-primary fg-contrast-primary">bg-primary</div>
<div outputclass="bg-secondary fg-contrast-secondary">bg-secondary</div>
<div outputclass="bg-success fg-contrast-success">bg-success</div>
<div outputclass="bg-danger fg-contrast-danger">bg-danger</div>
<div outputclass="bg-warning fg-contrast-warning">bg-warning</div>
<div outputclass="bg-info fg-contrast-info" >bg-info</div>
<div outputclass="bg-accent fg-contrast-accent">bg-accent</div>
<div outputclass="bg-inverse fg-contrast-inverse">bg-inverse</div>

<div color="primary">bg-primary</div>
<div color="secondary">bg-secondary</div>
<div color="success">bg-success</div>
<div color="danger">bg-danger</div>
<div color="warning">bg-warning</div>
<div color="info">bg-info</div>
<div color="accent">bg-accent</div>
<div color="inverse">bg-inverse</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.

Animal	Gestation
Elephant (African and Asian)	19-22 months
Giraffe	15 months
Rhinoceros	14-16 months
Hippopotamus	7 1/2 months

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

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

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

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

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

<table outputclass="theme-primary p-1 w-100">
  <tgroup cols="2">
    <thead>
      <row>
        <entry>Animal</entry>
        <entry>Gestation</entry>
      </row>
    </thead>
    <tbody>
      <row outputclass="theme-info">
       ...
      </row>
      <row outputclass="theme-success">
       ...
      </row>
      <row>
        <entry>...</entry>
        <entry outputclass="theme-danger">...</entry>
      </row>
      <row>
        <entry>...</entry>
        <entry>...</entry>
      </row>
    </tbody>
  </tgroup>
</table>

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

<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="primary" padding="1" width="100">
  <tgroup cols="2">
    <thead>
      <row>
        <entry>Animal</entry>
        <entry>Gestation</entry>
      </row>
    </thead>
    <tbody>
      <row color="info">
        ...
      </row>
      <row color="success">
        ...
      </row>
      <row>
        <entry>...</entry>
        <entry color="danger">...</entry>
      </row>
      <row>
        ...
      </row>
    </tbody>
  </tgroup>
</table>

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

Specialized Elements

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

Success Card

Card Title

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

Accordion Item #1

This is the first item's accordion body.

An item
A second item

<img src="..." class="img-thumbnail bg-warning"/>

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

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

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

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

<thumbnail href="..." color="warning"/>

<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 open="yes">
    <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="inverse" width="50" indicators="yes">
  <carousel-item>
    <image href="..."/>
  </carousel-item>
  <carousel-item>
    <image href="..."/>
  </carousel-item>
  <carousel-item>
    <image href="..."/>
  </carousel-item>
</carousel>

Text Color

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

fg-primary

fg-secondary

fg-success

fg-danger

fg-warning

fg-info

<p outputclass="fg-primary">fg-primary</p>
<p outputclass="fg-secondary">fg-secondary</p>
<p outputclass="fg-success">fg-success</p>
<p outputclass="fg-danger">fg-danger</p>
<p outputclass="fg-warning">fg-warning</p>
<p outputclass="fg-info">fg-info</p>