List

[list] shortcode arguments
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]
[item] shortcode arguments
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>
<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="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 image list
List image
Item
List image
Item
List image
Item
<list horizontal>
  <item image="//imgplaceholder.com/50x50?font-family=OpenSans">Item</item>
  <item image="//imgplaceholder.com/50x50?font-family=OpenSans">Item</item>
  <item image="//imgplaceholder.com/50x50?font-family=OpenSans">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 *