List

A standard list

Schnoodle

Your new dog

Thanks for being my owner

Im so glad you chose to bring me home from the shelter...

What a walk

Man i am so tired that walk today really was too far...

Sorry about your old dog

Is this your address? I'm getting dropped off from the SPCA...

<div class="wojo list">
  <div class="item"> 
    <img src="images/demo/avatar.jpg" class="wojo avatar image" alt="">
    <div class="content">
      <div class="header">Schnoodle</div>
      Your new dog </div>
    <div class="list">
      <div class="item"> <i class="mail outline icon"></i>
        <div class="content"> 
        <a class="header">Thanks for being my owner</a>
          <div class="description">...</div>
        </div>
      </div>
      <div class="item"> <i class="mail outline icon"></i>
        <div class="content"> 
        <a class="header">What a walk</a>
          <div class="description">...</div>
        </div>
      </div>
      <div class="item"> <i class="map icon"></i>
        <div class="content"> 
        <a class="header">Sorry about your old dog</a>
          <div class="description">...</div>
        </div>
      </div>
    </div>
  </div>
</div>

Bulleted

A list can mark items with a bullet

<div class="wojo bulleted list">
  <div class="item">Cats</div>
  <div class="item">Horses</div>
  <div class="item">Dogs
    <div class="list">
      <div class="item">Labradoodles</div>
      <div class="item">Shiba Inu</div>
      <div class="item">Mastiff</div>
    </div>
  </div>
</div>

Ordered

A list can be ordered numerically

1. Cats
2. Horses
3. Dogs
1. Labradoodles
2. Shiba Inu
3. Mastiff

<ol class="wojo list">
  <li>Cats</li>
  <li>Horses</li>
  <li>Dogs</li>
    <ol>
      <li>Labradoodles</li>
      <li>Shiba Inu</li>
      <li>Mastiff</li>
    </ol>
</ol>

Icon

A list item can have an icon

<div class="wojo list">
  <a class="item">
    <i class="right triangle icon"></i>
    How do you know your...
  </a>
  <a class="item">
    <i class="right triangle icon"></i>
    When is it ok to send your...
  </a>
  <a class="item">
    <i class="right triangle icon"></i>
    Can you get your dog back from...
  </a>
  <a class="item">
    <i class="right triangle icon"></i>
    Is trespassing on a farm...
  </a>
</div>

Content

A list can have groups of content that can be floated left or right

View Listing

New York Dog Fair

View Listing

Dog Appreciation Day

<div class="wojo divided list">
  <div class="item">
    <div class="right floated tiny teal wojo button">View Listing</div>
    <img class="wojo avatar image" src="images/demo/avatar.jpg">
    <div class="content">
      <div class="header">New York Dog Fair</div>
    </div>
  </div>
  <div class="item">
    <div class="right floated tiny teal wojo button">View Listing</div>
    <img class="wojo avatar image" src="images/demo/avatar.jpg">
    <div class="content">
      <div class="header">Dog Appreciation Day</div>
    </div>
  </div>
</div>

Horizontal List

A list can be formatted horizontally

Snickerdoodle

An excellent companion

Poodle

A poodle, its pretty basic

<div class="wojo horizontal list">
  <div class="item">
    <img class="wojo avatar image" src="images/demo/avatar.jpg">
    <div class="content">
      <div class="header">Snickerdoodle</div>
      An excellent companion
    </div>
  </div>
  <div class="item">
    <img class="wojo avatar image" src="images/demo/avatar.jpg">
    <div class="content">
      <div class="header">Poodle</div>
      A poodle, its pretty basic
    </div>
  </div>
</div>