Foehn Design System

List 

<!-- Default -->
<ul>
    <li>pommes</li>
    <li>oranges</li>
    <li>pêches</li>
</ul>


<!-- Unstyled -->
<ul class="list-unstyled">
    <li><a href="#">L'aide et les soins à domicile</a></li>
    <li><a href="#">Centre d'accueil temporaire</a></li>
    <li><a href="#">Court-séjour en EMS</a></li>
    <li><a href="#">Plus</a></li>
</ul>


<!-- Ordered -->
<ol>
    <li>Adresse de livraison.</li>
    <li>Paiement.</li>
    <li>Confirmation.</li>
</ol>


<!-- Inline -->
<ul class="list-inline">
    <li>pommes</li>
    <li>oranges</li>
    <li>pêches</li>
</ul>


<!-- Default -->
<ul{% if class %} class="{{class}}"{% endif %}>
  {%- for item in list -%}
  <li{% if item.class %} class={{ item.class}}{% endif %}>{{ item.item | safe }}</li>
  {%- endfor -%}
</ul>

<!-- Unstyled -->
<ul{% if class %} class="{{class}}"{% endif %}>
  {%- for item in list -%}
  <li{% if item.class %} class={{ item.class}}{% endif %}>{{ item.item | safe }}</li>
  {%- endfor -%}
</ul>

<!-- Ordered -->
<ol>
  {%- for item in list -%}
  <li>{{ item.item }}</li>
  {%- endfor -%}
</ol>

<!-- Inline -->
<ul{% if class %} class="{{class}}"{% endif %}>
  {%- for item in list -%}
  <li{% if item.class %} class={{ item.class}}{% endif %}>{{ item.item | safe }}</li>
  {%- endfor -%}
</ul>
 
/* Default */
{
  "list": [
    {
      "item": "pommes"
    },
    {
      "item": "oranges"
    },
    {
      "item": "pêches"
    }
  ]
}


/* Unstyled */
{
  "list": [
    {
      "item": "<a href=\"#\">L'aide et les soins à domicile</a>"
    },
    {
      "item": "<a href=\"#\">Centre d'accueil temporaire</a>"
    },
    {
      "item": "<a href=\"#\">Court-séjour en EMS</a>"
    },
    {
      "item": "<a href=\"#\">Plus</a>"
    }
  ],
  "class": "list-unstyled"
}


/* Ordered */
{
  "list": [
    {
      "item": "Adresse de livraison."
    },
    {
      "item": "Paiement."
    },
    {
      "item": "Confirmation."
    }
  ]
}


/* Inline */
{
  "list": [
    {
      "item": "pommes"
    },
    {
      "item": "oranges"
    },
    {
      "item": "pêches"
    }
  ],
  "class": "list-inline"
}
  • Content: 
    @charset 'UTF-8';

/**
 * List
 */

ul {
  list-style-type: disc;
}

ol,
ul {
  padding-left: 40px;
}

/**
 * multi column list
 */
ul.vd-list-columns {
  @include media-breakpoint-up(sm) {
    column-count: 2;
  }
}
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: src/components/01-atoms/list/_list.scss
  • Size: 217 Bytes

No notes defined.