HiVolda Styleguide

Lists 

<!-- Default -->
<ul class="">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>


<!-- Block Inline -->
<ul class="list-block-inline">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>


<!-- Clean List -->
<ul class="list-clean">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>


<!-- Icon List -->
<ul class="list-icons">

    <li><a href="mailto:studentsorvis@hivolda.no" class="icon-envelope">studentsorvis@hivolda.no</a></li>

    <li><a href="tel:70075018" class="icon-phone">70 07 50 18</a></li>

</ul>


<!-- Horizontal List -->
<ul class="list-horizontal">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>


<ul class="{{ class }}">
  {% for item in items %}
  <li>{{ item.text }}</li>
  {% endfor %}
</ul>
 
/* Default */
{
  "items": [
    {
      "text": "List item 1"
    },
    {
      "text": "List item 2"
    },
    {
      "text": "List item 3"
    }
  ]
}


/* Block Inline */
{
  "items": [
    {
      "text": "List item 1"
    },
    {
      "text": "List item 2"
    },
    {
      "text": "List item 3"
    }
  ],
  "class": "list-block-inline"
}


/* Clean List */
{
  "items": [
    {
      "text": "List item 1"
    },
    {
      "text": "List item 2"
    },
    {
      "text": "List item 3"
    }
  ],
  "class": "list-clean"
}


/* Icon List */
{
  "items": [
    {
      "text": "<a href=\"mailto:studentsorvis@hivolda.no\" class=\"icon-envelope\">studentsorvis@hivolda.no</a>"
    },
    {
      "text": "<a href=\"tel:70075018\" class=\"icon-phone\">70 07 50 18</a>"
    }
  ],
  "class": "list-icons"
}


/* Horizontal List */
{
  "items": [
    {
      "text": "List item 1"
    },
    {
      "text": "List item 2"
    },
    {
      "text": "List item 3"
    }
  ],
  "class": "list-horizontal"
}

No notes defined.