NCC Digital Design Guide

Inline List 

<ul class="list-inline">
    <li><a href="#">Inline list item</a></li>
    <li><a href="#">Inline list item</a></li>
    <li><a href="#">Inline list item</a></li>
    <li><a href="#">Inline list item</a></li>
</ul>
 
<ul class="list-inline">
	<li><a href="#">{{text}}</a></li>
	<li><a href="#">{{text}}</a></li>
	<li><a href="#">{{text}}</a></li>
	<li><a href="#">{{text}}</a></li>
</ul>
 
{
  "text": "Inline list item"
}
  • Content: 
    .list-inline {
	list-style: none;
	margin: 0;
	padding: 0;
	
	li {
		display: inline-block;
		list-style: none;
		margin-right: 0.5em;
		
		&:last-of-type {
			margin-right: 0;
		}
	}
}
  • URL: /components/raw/inline-list/_inline-list.scss
  • Filesystem Path: src/patterns/patterns/lists/inline-list/_inline-list.scss
  • Size: 185 Bytes

There are no notes for this item.