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
    {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>
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
List image
Item
List image
Item
List image
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
<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
List image
Molly
Coordinator
List image
Elyse
Developer
List image
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>
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>

Leave a comment

Your email address will not be published. Required fields are marked *