List

January 11, 2017bywebsevendev

Classes

Type	`bulleted` `ordered` `link`
Axis	`horizontal` `vertical`
Variation	`divided` `celled` `selection` `animated` `relaxed` `very relaxed`
Size	`mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
Float	`left floated` `right floated`
Other	`inverted`

Classes

State	`active` `disabled`
Menu	`dropdown`

href The href/url/link argument can be used to specify a link.

icon Name of the icon to use.

header Lists only: Header text.

image Lists only: Image link to use.

alt Lists only: Alternative text for the image.

active Wildcard pattern to match with the current URL. If match is found .active class is added.

List

Apples

Pears

Oranges

<list>
  <item>Apples</item>
  <item>Pears</item>
  <item>Oranges</item>
</list>

Icon list

User

user@user.com

www.user.com

@user

<list>
  <item icon="user">User</item>
  <item icon="mail" url="mailto:user@user.com">user@user.com</item>
  <item icon="linkify" url="https://user.com">www.user.com</item>
  <item icon="facebook" url="https://facebook.com">@user</item>
</list>

Bulleted list

Item

<list bulleted>
  <item>Item</item>
  <item>Item</item>
  <item>Item</item>
</list>

Ordered list

Item

<list ordered>
  <item>Item</item>
  <item>Item</item>
  <item>Item</item>
</list>

Link list

Item Item Item

<list>
  <item url="#">Item</item>
  <item url="#">Item</item>
  <item url="#">Item</item>
</list>
<list link>
  <item url="#">Item</item>
  <item url="#">Item</item>
  <item url="#">Item</item>
</list>

Nested lists

Item

List in list

Using shortcodes

Item

List in list
Using HTML

Item

<list bulleted>
  <item>Item</item>
  <item>Item
    <ui list role="list">
      <div item role="listitem">List in list</div>
      <div item role="listitem">Using shortcodes</div>
    </ui>
  </item>
  <item>Item
    {lt}ul{gt}
      {lt}li{gt}List in list{lt}/li{gt}
      {lt}li{gt}Using HTML{lt}/li{gt}
    {lt}/ul{gt}
  </item>
  <item>Item</item>
</list>

Shortcodes cannot contain themselves, so substitutes can be used to create nested lists.

List item headers

Apples

Pears

Oranges

<list divided very relaxed>
  <item header="Fruit" icon="top aligned red apple">Apples</item>
  <item header="Fruit" icon="middle aligned yellow heart">Pears</item>
  <item header="Fruit" icon="bottom aligned orange circle">Oranges</item>
</list>

Horizontal link list

184 posts

E-mail

Website

<list horizontal link>
  <item icon="archive" url="#">184 posts</item>
  <item icon="mail" url="#">E-mail</item>
  <item icon="linkify" url="#">Website</item>
</list>

Horizontal image list

Item

Item

<list horizontal>
  <item image="//placehold.co/50x50">Item</item>
  <item image="//placehold.co/50x50">Item</item>
  <item lazyload image="//placehold.co/51x51">Item</item>
</list>

Shortcode demo

Terms Privacy Contact

About Us Jobs

<list right floated horizontal>
  <item disabled>© GitHub, Inc.</item>
  <item url="#">Terms</item>
  <item url="#">Privacy</item>
  <item url="#">Contact</item>
</list>
<list horizontal>
  <item url="#">About Us</item>
  <item url="#">Jobs</item>
</list>

Sub header in a list

Coordinator

Developer

Project Manager

<list horizontal>
  <item image="/avatars/1s.png">
    <subheader>Molly</subheader>
    Coordinator
  </item>
  <item image="/avatars/2s.png">
    <subheader>Elyse</subheader>
    Developer
  </item>
  <item image="/avatars/3s.png">
    <subheader>Eve</subheader>
    Project Manager
  </item>
</list>

List sizes

Lorem ipsum dolor sit amet.

<list mini bulleted><item header="Mini">Lorem ipsum dolor sit amet.</item></list>
<list tiny bulleted><item header="Tiny">Lorem ipsum dolor sit amet.</item></list>
<list small bulleted><item header="Small">Lorem ipsum dolor sit amet.</item></list>
<list bulleted><item header="Medium">Lorem ipsum dolor sit amet.</item></list>
<list large bulleted><item header="Large">Lorem ipsum dolor sit amet.</item></list>
<list big bulleted><item header="Big">Lorem ipsum dolor sit amet.</item></list>
<list huge bulleted><item header="Huge">Lorem ipsum dolor sit amet.</item></list>
<list massive bulleted><item header="Massive">Lorem ipsum dolor sit amet.</item></list>

Ordered list with headers

We will work with you to fully understand your business and your target audience to inform our marketing strategy.

Using the outcomes from the Company Analysis, we will put together a plan for the most effective marketing strategy to get the best results for your business.

We can create a brand that stands out and truly reflects your business and the message you want to convey.

We will put together a detailed and specific style guide that covers all areas of your brand to ensure that anything produced in the future is on brand.

We will create a unique and visually pleasing logo to reflect your overall brand to be used in all areas of your marketing.

<list large ordered>
  <item header="Company Analysis">We will work with you to fully understand your business and your target audience to inform our marketing strategy.</item>
  <item header="Strategy Planning">Using the outcomes from the Company Analysis, we will put together a plan for the most effective marketing strategy to get the best results for your business.</item>
  <item header="Brand Creation">We can create a brand that stands out and truly reflects your business and the message you want to convey.</item>
  <item header="Style Guides">We will put together a detailed and specific style guide that covers all areas of your brand to ensure that anything produced in the future is on brand.</item>
  <item header="Logo Design">We will create a unique and visually pleasing logo to reflect your overall brand to be used in all areas of your marketing.</item>
</list>

Demos

Documentation

Social media

Newsletter