List

Styles for listings

Summary

The list-feature is designed for listings without list-signs. It offers content-lists with different features.

Markup and examples

<ul class="list">
    <li class="item">...</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Horizontal

A list can be displayed horizontally.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Lists can be aligned horizontally with floatings through the classes left floated and right floated.

© Amaryllis Systems GmbH
Terms Privacy Contact
About Us Jobs

Bullet Liste

Lists can be displayed with the classes bullet as bullet list.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Lists can be displayed with the class bullet and square-bullet as bullet list with square bullets.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Lists can be displayed with the class bullet and trademark-bullet as bullet list with trademark bullets.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Lists can be displayed with the class bullet and copyright-bullet as bullet list with copyright bullets.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Lists can be displayed with the class bullet and check-bullet as bullet list with check bullets.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Lists can be displayed with the class bullet and the items with one of the *-bullet classes as bullet list with different bullets.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

Numerical list

Lists can be displayed as numerical list with the class numeric.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Round numeric listing-characters are received with .numeric.round-bullet

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. also with a frame through .numeric.round-bullet.border-bullet

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. or in other roundings .numeric.square-bullet.border-bullet

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Separated/divided lists

Lists can be divided with a separator through the CSS-class divided.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. the horizontal lists as well.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

With the class spacing you can get a larger distance to the icons or images.

AmaryllisSystems/Amaryllis-UI
Updated 10 minutes earlier
AmaryllisSystems/Amaryllis-Doku-UI
Updated 22 minutes earlier
AmaryllisSystems/Amaryllis-Tpl
Updated 34 minutes earlier

If you want the frame for the first and last item, it is .boxed

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
AmaryllisSystems/Amaryllis-UI
Updated 10 minutes earlier
AmaryllisSystems/Amaryllis-Doku-UI
Updated 22 minutes earlier
AmaryllisSystems/Amaryllis-Tpl
Updated 34 minutes earlier
Helen
Christian
Daniel
Daniel
Christian
Helen
Helen
Christian
Daniel

Inverted List

With the class inverted the colors can be turned into the inverted style for the application on inverted backgrounds (e.g. in navs or .bg-inverted)

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. for horizontalas well,

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. divided,

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. numerical with .numeric.inverted

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. horizontal divided and ..

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. spacing divided Lists.

AmaryllisSystems/Amaryllis-UI
Updated 10 minutes earlier
AmaryllisSystems/Amaryllis-Doku-UI
Updated 22 minutes earlier
AmaryllisSystems/Amaryllis-Tpl
Updated 34 minutes earlier

Component colors are supported as well.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. also inverted!

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

as well as for bullets

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. and inverted.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

.. or numerical..

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

and inverted!

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

also as .basic

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6