.text-bg-secondary

.bg-secondary Box

Theme: light (Baseline)

Normaler Text. Link +

Card – sollte helle Fläche haben.
Icon (soll Textfarbe haben)

Theme: dark (Baseline)

Text auf dunklem Grund. Link +

Card – sollte dunklere Fläche haben.
Icon (soll hell sein)

Scheme: primary (bg: primary, text: white)

Text & Links folgen dem Schema. Link +

Card (soll dezent abgesetzt sein)

Scheme: secondary (bg: secondary, text: white)

Kontrolliere Link-Hover (~70% zum BG gemixt). Link

Scheme: dark (bg: #000, text: white)

Text, Border, Muted sollten passen. Link

Scheme: light (bg: light, text: dark)

Dezent heller Hintergrund. Link

Theme: dark + Scheme: dark-extra

Mehr vertikales Padding & Komponentenfeinschliff. Link

Card (soll secondary-bg nutzen)

Scheme: brand-amber (Primary/Links = Amber)

Link +

Scheme: high-contrast

Schwarz/Weiß + Cyan Links. Link

Legacy: .bg-primary.text-white

Dank Bridge sollten Tokens/Variablen trotzdem greifen. Link

Contents

Typography

Button

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it’s still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they’re displayed inline.

Images

Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social

Figures

Placeholder 400x300
A caption for the above image.

Components

Accordion

This is the first item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Buttons

Button group

Scrollspy

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Third heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fourth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fifth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.