WASHINGTON STATE UNIVERSITY Finance and Administration Information Systems

Block elements

Heading Blocks

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat neque justo, ut fringilla elit vehicula vitae. Duis vitae rutrum nisl. Duis id ante a ante rutrum porttitor. Nulla vitae tempus turpis. Duis rutrum ullamcorper suscipit. Integer lectus eros, bibendum a arcu vel, ultrices vestibulum lorem.

Nullam varius condimentum augue, elementum suscipit magna porttitor at. Ut non odio quis ipsum rhoncus imperdiet. Aliquam id posuere nisl. Nullam semper et semsed molestie. Integer urna ipsum, aliquet eu libero in, lacinia tempor metus. Vivamus porttitor molestie nunc, eu vestibulum enim molestie semper. Sed imperdiet, sem id sodales congue, nisl velit scelerisque velit, id tristique nisl quam ut diam. Duis eleifend metus at molestie fringilla. Proin ac volutpat nulla, vitae blandit mi.

Curabitur elementum aliquet mi in semper. Integer ullamcorper massa tempor finibus bibendum. Mauris et massa ac erat sollicitudin rhoncus. Nunc neque orci, ultricies a cursus nec, vehicula ut nulla. Donec.

Lists – default

  • Chemical Spill Response
  • Chemical Waste Management
  • Emergency Planning, Community Right-to-Know
  • Photographic Waste/Silver Recovery

There is no classes or inline styles applied to the list.  This is the default display.

Strong

  • Chemical Spill Response
  • Chemical Waste Management
  • Emergency Planning, Community Right-to-Know
  • Photographic Waste/Silver Recovery

Adding the class .strong to the lists will try to increase the level of visibility

WEAK

  • Chemical Spill Response
  • Chemical Waste Management
  • Emergency Planning, Community Right-to-Know
  • Photographic Waste/Silver Recovery

Adding the class .weak to the lists will try to decrease the visibility of the list items but not to the point that it is blankly marked.

List-blank

  • Chemical Spill Response
  • Chemical Waste Management
  • Emergency Planning, Community Right-to-Know
  • Photographic Waste/Silver Recovery

Default with inline style applied

  • Chemical Spill Response
  • Chemical Waste Management
  • Emergency Planning, Community Right-to-Know
  • Photographic Waste/Silver Recovery

Nice Number Lists

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Group display Lists

(w/ Nice Number in example)

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

asdf

Sizing the display

Small

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Vestibulum at eros

Normal

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Vestibulum at eros

Large

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Vestibulum at eros

Small

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Vestibulum at eros

Normal

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Vestibulum at eros

Large

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Vestibulum at eros

Mixed list with Nice Numbers

  • Cras justo odio
  • Dapibus ac facilisis in
  • Nice number in number
    • Porta ac consectetur ac
    • Dapibus ac facilisis in
    • Morbi leo risus
    • NOMRAL in Nice Number
      • NOMRAL
      • Dapibus ac facilisis in
      • Morbi leo risus
      • Porta ac consectetur ac
      • Vestibulum at eros
    • Vestibulum at eros
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Moving to DOUBLE DIGITS
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • A Nice Number in a Nice number list group
    • Cras justo odio
    • Dapibus ac facilisis in
    • Nice number in number
      • Morbi leo risus
      • Dapibus ac facilisis in
      • Morbi leo risus
      • NOMRAL in Nice Number
        • Porta ac consectetur ac
        • Dapibus ac facilisis in
        • Morbi leo risus
        • Porta ac consectetur ac
        • Vestibulum at eros
      • Vestibulum at eros
    • Porta ac consectetur ac
    • Vestibulum at eros
    • Cras justo odio
    • Dapibus ac facilisis in
    • list-group in Nice Number
      • Cras justo odio
      • Dapibus ac facilisis in
      • Morbi leo risus
      • Porta ac consectetur ac
      • Vestibulum at eros
    • Porta ac consectetur ac
    • Moving to DOUBLE DIGITS
    • Cras justo odio
    • Dapibus ac facilisis in
    • Morbi leo risus
    • Porta ac consectetur ac
    • Vestibulum at eros
  • Vestibulum at eros

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic example

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
    <li >Cras justo odio</li>
    <li >Dapibus ac facilisis in</li>
    <li >Morbi leo risus</li>
    <li >Porta ac consectetur ac</li>
    <li >Vestibulum at eros</li>
    </ul>

Badges

Add the badges component to any list group item and it will automatically be positioned on the right.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
    <li>
        <span class="badge">14</span>
        Cras justo odio
    </li>
    </ul>

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
<div class="list-group">
    <a href="#" class="active">
        Cras justo odio
    </a>
    <a href="#" class="">Dapibus ac facilisis in</a>
    <a href="#" class="">Morbi leo risus</a>
    <a href="#" class="">Porta ac consectetur ac</a>
    <a href="#" class="">Vestibulum at eros</a>
    </div>

Button items

List group items may be buttons instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element. Don’t use the standard .btn classes here.





<div class="list-group">
    <button type="button">Cras justo odio</button>
    <button type="button">Dapibus ac facilisis in</button>
    <button type="button">Morbi leo risus</button>
    <button type="button">Porta ac consectetur ac</button>
    <button type="button">Vestibulum at eros</button>
    </div>

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
<div class="list-group">
    <a href="#" class="disabled">
        Cras justo odio
    </a>
    <a href="#">Dapibus ac facilisis in</a>
    <a href="#">Morbi leo risus</a>
    <a href="#">Porta ac consectetur ac</a>
    <a href="#">Vestibulum at eros</a>
    </div>

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros
<ul class="list-group">
    <li class="list-group-item-success">Dapibus ac facilisis in</li>
    <li class="list-group-item-info">Cras sit amet nibh libero</li>
    <li class="list-group-item-warning">Porta ac consectetur ac</li>
    <li class="list-group-item-danger">Vestibulum at eros</li>
    </ul>
    <div class="list-group">
    <a href="#" class="list-group-item-success">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item-info">Cras sit amet nibh libero</a>
    <a href="#" class="list-group-item-warning">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item-danger">Vestibulum at eros</a>
    </div>

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
    <a href="#" class="active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
    </div>