Unordered List

  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
= codeBlender "list-ul", "atom", { array: current_page.data.list }
<ul>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Facilisis in pretium nisl aliquet
</li>

</ul>


Ordered List

  1. Lorem ipsum dolor sit amet
  2. Facilisis in pretium nisl aliquet
= codeBlender "list-ul", "atom", { array: current_page.data.list, type: "ol" }
<ol>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Facilisis in pretium nisl aliquet
</li>

</ol>


Unstyled List

  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
= codeBlender "list-ul", "atom", { array: current_page.data.list, extraClass: "list-unstyled" }
<ul class='list-unstyled'>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Facilisis in pretium nisl aliquet
</li>

</ul>


In-line List

  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
= codeBlender "list-ul", "atom", { array: current_page.data.list, extraClass: "list-inline" }
<ul class='list-inline'>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Facilisis in pretium nisl aliquet
</li>

</ul>


Inline List Linked

= codeBlender "list-ul", "atom", { array: current_page.data.list1, extraClass: "list-inline" }
<ul class='list-inline'>
<li class=' popMe active' data-container='body' data-content='This feature is not available in this survey.' data-original-title='GfK Research' data-placement='auto'>
Lorem ipsum dolor sit amet
</li>
<li>
<a href='http://drykiss.com' target='_blank'>
Drykiss SEO and developement
</a>
</li>

</ul>


Resources Useful websites and tutorials

Title URL
Bootstrap List http://getbootstrap.com/css/#type-lists

Tasks

Task Date
Need to push in another list for unordered lists also
Show some examples of how to use frontmatter arrays, inline arrays, data arrays