List

Ready Added in 2.0.0

Easily create nice looking lists, which come in different styles.

Usage

To apply this component, add the .gls-list class to an unordered or ordered list. The list will now display without any spacing or list-style.

<ul class="gls-list">
    <li></li>
    <li></li>
    <li></li>
</ul>
    • List item 1
    • List item 2
    • List item 3
  • <ul class="gls-list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Style type modifiers

Add one of the following classes to set the marker of a list item.

Class Description
.gls-list-disc Use filled circle as marker.
.gls-list-circle Use a hollow circle as marker.
.gls-list-square Use a filled square as marker
.gls-list-decimal Use decimal numbers as marker. Beginning with 1.
.gls-list-hyphen Use a hyphen as marker 
<ul class="gls-list gls-list-disc">...</ul>

  • Disc

    • List item 1
    • List item 2
    • List item 3

    Circle

    • List item 1
    • List item 2
    • List item 3

    Square

    • List item 1
    • List item 2
    • List item 3

    Decimal

    • List item 1
    • List item 2
    • List item 3

    Hyphen

    • List item 1
    • List item 2
    • List item 3
  • <div class="gls-child-width-expand@s" gls-grid>

    <div>
        <h4>Disc</h4>
        <ul class="gls-list gls-list-disc">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Circle</h4>
        <ul class="gls-list gls-list-circle">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Square</h4>
        <ul class="gls-list gls-list-square">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Decimal</h4>
        <ul class="gls-list gls-list-decimal">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Hyphen</h4>
        <ul class="gls-list gls-list-hyphen">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>

Color modifiers

Add one of the following classes to set the marker color.

Class Description
.gls-list-muted Add this class to mute the marker.
.gls-list-emphasis Add this class to emphasize the marker.
.gls-list-primary Add this class to emphasize the marker with the primary color.
.gls-list-secondary Add this class to emphasize the marker with the secondary color. 
<ul class="gls-list gls-list-disc gls-list-primary">...</ul>

  • Muted

    • List item 1
    • List item 2
    • List item 3

    Emphasis

    • List item 1
    • List item 2
    • List item 3

    Primary

    • List item 1
    • List item 2
    • List item 3

    Secondary

    • List item 1
    • List item 2
    • List item 3
  • <div class="gls-child-width-expand@s" gls-grid>

    <div>
        <h4>Muted</h4>
        <ul class="gls-list gls-list-disc gls-list-muted">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Emphasis</h4>
        <ul class="gls-list gls-list-disc gls-list-emphasis">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Primary</h4>
        <ul class="gls-list gls-list-disc gls-list-primary">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Secondary</h4>
        <ul class="gls-list gls-list-disc gls-list-secondary">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>

Note The color modifiers don’t work in Chrome and Edge because the ::marker pseudo-element is not supported yet. Vote this Chromium issue up, to give it more attention.

Image bullet modifier

Add the .gls-list-bullet class to set a custom image bullet as marker of a list item. Mind, that it can not be combined with color modifiers.

<ul class="gls-list gls-list-bullet">...</ul>

<ul class="gls-list gls-list-bullet">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Divider modifier

Add the .gls-list-divider class to separate list items with lines.

<ul class="gls-list gls-list-divider">...</ul>
    • List item 1
    • List item 2
    • List item 3
  • <ul class="gls-list gls-list-divider">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Striped modifier

Add zebra-striping to a list using the .gls-list-striped class.

<ul class="gls-list gls-list-striped">...</ul>
    • List item 1
    • List item 2
    • List item 3
  • <ul class="gls-list gls-list-striped">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Size modifier

Add one of the following classes to increase or decrease the spacing between list items. You can combine this with any of the other list modifiers.

Class Description
.gls-list-large Increase the spacing between list items.
.gls-list-collapse Remove the spacing between list items. 
<ul class="gls-list gls-list-large">...</ul>

  • Large

    • List item 1
    • List item 2
    • List item 3
    • List item 1
    • List item 2
    • List item 3
    • List item 1
    • List item 2
    • List item 3
    • List item 1
    • List item 2
    • List item 3

    Collapse

    • List item 1
    • List item 2
    • List item 3
    • List item 1
    • List item 2
    • List item 3
    • List item 1
    • List item 2
    • List item 3
    • List item 1
    • List item 2
    • List item 3
  • <h4>Large</h4>

<div class="gls-child-width-expand@s" gls-grid>

    <div>
        <ul class="gls-list gls-list-large">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="gls-list gls-list-large gls-list-disc">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="gls-list gls-list-large gls-list-divider">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="gls-list gls-list-large gls-list-striped">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>

<h4>Collapse</h4>

<div class="gls-child-width-expand@s" gls-grid>

    <div>
        <ul class="gls-list gls-list-collapse">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="gls-list gls-list-collapse gls-list-disc">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="gls-list gls-list-collapse gls-list-divider">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="gls-list gls-list-collapse gls-list-striped">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>