List Groups

Overview

List groups can be created by adding the fc-list-group class to both ordered and unordered lists. This adds some basic styling and supports a few extra styling features.

• By adding the fc-striped class, alternating rows of the list will have a different background color. The colors of these stripes can be set using the fc-accent-{color} class for all default theme colors.
• The outlines of the list group can be styled using the fc-border-{color} class, defined in colors.
• The background and text colors of non-striped rows in the list group can be styled using the fc-bg-{color} and fc-text-{color}classes, defined in colors. These will be overidden by any styling on striped rows when fc-striped is applied.

• List Item 1
• List Item 2
• List Item 3
• List Item 4

<ul class="fc-list-group">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

• List Item 1
• List Item 2
• List Item 3
• List Item 4

<ul class="fc-list-group fc-striped">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

Adding Color

Outlines

• This list has fc-border-primary
• This list has fc-border-primary
• This list has fc-border-primary
• This list has fc-border-primary

<ul class="fc-list-group fc-border-primary">
  <li>List Item</li>
  <li>List Item</li>
</ul>

Stripe Colors

• This list has fc-striped and fc-accent-primary-light
• This list has fc-striped and fc-accent-primary-light
• This list has fc-striped and fc-accent-primary-light
• This list has fc-striped and fc-accent-primary-light

<ul class="fc-list-group fc-striped fc-accent-primary-light">
  <li>List Item</li>
  <li>List Item</li>
</ul>

Striped list groups pair well with adding border colors

• This list has fc-striped, fc-accent-secondary, and fc-border-secondary
• This list has fc-striped, fc-accent-secondary, and fc-border-secondary
• This list has fc-striped, fc-accent-secondary, and fc-border-secondary
• This list has fc-striped, fc-accent-secondary, and fc-border-secondary

<ul class="fc-list-group fc-striped fc-accent-secondary fc-border-secondary">
  <li>List Item</li>
  <li>List Item</li>
</ul>

Background and Text

• This list has fc-bg-primary-light and fc-border-primary
• This list has fc-bg-primary-light and fc-border-primary
• This list has fc-bg-primary-light and fc-border-primary

<ul class="fc-list-group fc-bg-primary-light fc-border-primary">
  <li>List Item</li>
  <li>List Item</li>
</ul>

• This list has fc-bg-primary, fc-text-white, and fc-border-primary-dark
• This list has fc-bg-primary, fc-text-white, and fc-border-primary-dark
• This list has fc-bg-primary, fc-text-white, and fc-border-primary-dark
• This list has fc-bg-primary, fc-text-white, and fc-border-primary-dark

<ul class="fc-list-group fc-bg-primary fc-text-white fc-border-primary-dark">
  <li>List Item</li>
  <li>List Item</li>
</ul>

• This list has fc-border-primary, fc-bg-primary-light, fc-striped, and fc-accent-primary
• This list has fc-border-primary, fc-bg-primary-light, fc-striped, and fc-accent-primary
• This list has fc-border-primary, fc-bg-primary-light, fc-striped, and fc-accent-primary
• This list has fc-border-primary, fc-bg-primary-light, fc-striped, and fc-accent-primary

<ul class="fc-list-group fc-border-primary fc-bg-primary-light fc-striped fc-accent-primary">
  <li>List Item</li>
  <li>List Item</li>
</ul>

• You can mix and match as much as you want
• Feel free to get crazy
• But be prepared for the consequences
• Because this definitely doesn't look good

<ul class="fc-list-group fc-border-secondary fc-bg-success-light fc-text-primary-dark fc-striped fc-accent-primary">
  <li>You can mix and match as much as you want</li>
  <li>Feel free to get crazy</li>
  <li>But be prepared for the consequences</li>
  <li>Because this definitely doesn't look good</li>
</ul>