Chap
List
List shortcode arguments
Classes
Typebulleted ordered link
Axishorizontal vertical
Variationdivided celled selection animated relaxed very relaxed
Sizemini tiny small medium large big huge massive
Floatleft floated right floated
Otherinverted
Item shortcode arguments
Classes
Stateactive disabled
Menudropdown
hrefThe href/url/link argument can be used to specify a link.
iconName of the icon to use.
headerLists only: Header text.
imageLists only: Image link to use.
altLists only: Alternative text for the image.
activeWildcard 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]
[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
Item
Item
[list bulleted]
  [item]Item[/item]
  [item]Item[/item]
  [item]Item[/item]
[/list]
Ordered list
Item
Item
Item
[list ordered]
  [item]Item[/item]
  [item]Item[/item]
  [item]Item[/item]
[/list]
[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
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
    <ul>
      <li>List in list</li>
      <li>Using HTML</li>
    </ul>
  [/item]
  [item]Item[/item]
[/list]
Notes
Shortcodes cannot contain themselves, so substitutes can be used to create nested lists.
List item headers
Fruit
Apples
Fruit
Pears
Fruit
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]
[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
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
© GitHub, Inc.
[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
Molly
Coordinator
Elyse
Developer
Eve
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
Mini
Lorem ipsum dolor sit amet.
Tiny
Lorem ipsum dolor sit amet.
Small
Lorem ipsum dolor sit amet.
Medium
Lorem ipsum dolor sit amet.
Large
Lorem ipsum dolor sit amet.
Big
Lorem ipsum dolor sit amet.
Huge
Lorem ipsum dolor sit amet.
Massive
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
Company Analysis
We will work with you to fully understand your business and your target audience to inform our marketing strategy.
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.
Brand Creation
We can create a brand that stands out and truly reflects your business and the message you want to convey.
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.
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.
[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]