KSS Style Guide

<insert-markup>atoms.list-</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-horizontal
1 column
<insert-markup>atoms.list-0</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-invert
invert version
<insert-markup>atoms.list-1</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-icon-pointer
2 columns
<insert-markup>atoms.list-2</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-underlined
underlined list
<insert-markup>atoms.list-3</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-primary
primary version
<insert-markup>atoms.list-4</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
.-table
tabled version
<insert-markup>atoms.list-5</insert-markup>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed vel odio venenatis, mattis risus quis, facilisis nibh
  • Phasellus eget consectetur nisi
  • Donec tellus magna, varius vitae consectetur ac, mollis eget ligula
  • Nam finibus a dolor ut pellentesque
  • Vivamus gravida rhoncus quam, in congue dolor porta vitae
  • Aliquam bibendum tempor ipsum nec fermentum
  • Aenean ultricies libero quam, quis condimentum velit viverra a
Markup: ..\..\styleguide\templates\atoms\content\list.html
<ul class="rocksite-a-list [modifier class]">
	<li class="rocksite-a-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
	<li class="rocksite-a-list__item">Sed vel odio venenatis, mattis risus quis, facilisis nibh</li>
	<li class="rocksite-a-list__item">Phasellus eget consectetur nisi</li>
	<li class="rocksite-a-list__item">Donec tellus magna, varius vitae consectetur ac, mollis eget ligula</li>
	<li class="rocksite-a-list__item">Nam finibus a dolor ut pellentesque</li>
	<li class="rocksite-a-list__item">Vivamus gravida rhoncus quam, in congue dolor porta vitae</li>
	<li class="rocksite-a-list__item">Aliquam bibendum tempor ipsum nec fermentum</li>
	<li class="rocksite-a-list__item">Aenean ultricies libero quam, quis condimentum velit viverra a</li>
</ul>
Source: ../source/scss/components/atoms/content/_list.scss, line 1