Lists

<!-- Unordered -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Ordered -->
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

<!-- Definition -->
<dl>
    <dt>fractal</dt>
    <dd>[noun] a curve or geometric figure, each part of which has the same statistical character as the whole. Fractals are useful in modeling structures (such as eroded coastlines or snowflakes) in which similar patterns recur at progressively smaller scales,
        and in describing partly random or chaotic phenomena such as crystal growth, fluid turbulence, and galaxy formation.</dd>
    <dd>[adjective] relating to or of the nature of a fractal or fractals.</dd>
    <dt>gulp</dt>
    <dd>[verb] swallow (drink or food) quickly or in large mouthfuls, often audibly.</dd>
    <dd>[verb] breathe (air) deeply and quickly.</dd>
    <dd>[verb] make effortful breathing or swallowing movements, typically in response to strong emotion.</dd>
    <dd>[noun] an act of gulping food or drink.</dd>
    <dd>[noun] a large mouthful of liquid hastily drunk.</dd>
    <dd>[noun] a large quantity of air breathed in.</dd>
    <dd>[noun] a swallowing movement of the throat.</dd>
</dl>

<!-- Multiline List Items -->
<ul>
    <li>I stuffed a shirt or two into my old carpet-bag, tucked it under my arm, and started for Cape Horn and the Pacific.</li>
    <li>Quitting the good city of old Manhatto, I duly arrived in New Bedford. It was a Saturday night in December.</li>
    <li>Much was I disappointed upon learning that the little packet for Nantucket had already sailed, and that no way of reaching that place would offer, till the following Monday.</li>
    <li>As most young candidates for the pains and penalties of whaling stop at this same New Bedford, thence to embark on their voyage, it may as well be related that I, for one, had no idea of so doing.</li>
</ul>

<!-- Unordered -->
<ul>
	{{#each items }}
	<li>{{ item }}</li>
	{{/each}}
</ul>

<!-- Ordered -->
<ol>
	{{#each items }}
	<li>{{ item }}</li>
	{{/each}}
</ol>

<!-- Definition -->
<dl>
	{{#each definitions }}
	<dt>{{ term }}</dt>
		{{#each descriptions }}<dd>{{text}}</dd>{{/each}}
	{{/each}}
</dl>

<!-- Multiline List Items -->
<ul>
	{{#each items }}
	<li>{{ item }}</li>
	{{/each}}
</ul>
  • Content:
    ul, ol
    	padding-left: 0
    	padding-left: $spacing4
    
    li
    	margin: 0 0 $spacing1
    
    ul ul, ol ol, ol ul, ul ol
    	margin: $spacing1 0
    	
    
    ul
    	list-style: disc
    ul ul
    	list-style: circle
    ul ul ul
    	list-style: square
    ul ul ul ul
    	list-style: circle
    ul ul ul ul ul
    	list-style: disc
    
    ol
    	list-style: decimal
    ol ol
    	list-style: lower-alpha
    ol ol ol
    	list-style: lower-roman
    ol ol ol ol
    	list-style: decimal
    ol ol ol ol ol
    	list-style: lower-alpha
    
    
    dl 
    	margin: 0 0 $spacing3
    
    dd
    	margin: 0 0 $spacing2 $spacing4
    	line-height: 1.5
    dt
    	margin: $spacing3 0 $spacing1
    	font-weight: 600
  • URL: /components/raw/list/list.sass
  • Filesystem Path: src/components/0-foundation/list/list.sass
  • Size: 567 Bytes
/* Unordered */
{
  "items": [
    {
      "item": "Item 1"
    },
    {
      "item": "Item 2"
    },
    {
      "item": "Item 3"
    }
  ]
}

/* Ordered */
{
  "items": [
    {
      "item": "Item 1"
    },
    {
      "item": "Item 2"
    },
    {
      "item": "Item 3"
    }
  ]
}

/* Definition */
{
  "definitions": [
    {
      "term": "fractal",
      "descriptions": [
        {
          "text": "[noun] a curve or geometric figure, each part of which has the same statistical character as the whole. Fractals are useful in modeling structures (such as eroded coastlines or snowflakes) in which similar patterns recur at progressively smaller scales, and in describing partly random or chaotic phenomena such as crystal growth, fluid turbulence, and galaxy formation."
        },
        {
          "text": "[adjective] relating to or of the nature of a fractal or fractals."
        }
      ]
    },
    {
      "term": "gulp",
      "descriptions": [
        {
          "text": "[verb] swallow (drink or food) quickly or in large mouthfuls, often audibly."
        },
        {
          "text": "[verb] breathe (air) deeply and quickly."
        },
        {
          "text": "[verb] make effortful breathing or swallowing movements, typically in response to strong emotion."
        },
        {
          "text": "[noun] an act of gulping food or drink."
        },
        {
          "text": "[noun] a large mouthful of liquid hastily drunk."
        },
        {
          "text": "[noun] a large quantity of air breathed in."
        },
        {
          "text": "[noun] a swallowing movement of the throat."
        }
      ]
    }
  ]
}

/* Multiline List Items */
{
  "items": [
    {
      "item": "I stuffed a shirt or two into my old carpet-bag, tucked it under my arm, and started for Cape Horn and the Pacific."
    },
    {
      "item": "Quitting the good city of old Manhatto, I duly arrived in New Bedford. It was a Saturday night in December."
    },
    {
      "item": "Much was I disappointed upon learning that the little packet for Nantucket had already sailed, and that no way of reaching that place would offer, till the following Monday."
    },
    {
      "item": "As most young candidates for the pains and penalties of whaling stop at this same New Bedford, thence to embark on their voyage, it may as well be related that I, for one, had no idea of so doing."
    }
  ]
}