# List-inline

## Default

The List UI object creates blocky list items with a keyline separator out of
a `ul` or `ol`.

<div class="example">
    <ul class="gs-o-list-ui">
        <li class="gs-o-list-ui__item">Item 1</li>
        <li class="gs-o-list-ui__item">Item 2</li>
        <li class="gs-o-list-ui__item">Item 3</li>
        <li class="gs-o-list-ui__item">Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-ui">
    <li class="gs-o-list-ui__item">Item 1</li>
    <li class="gs-o-list-ui__item">Item 2</li>
    <li class="gs-o-list-ui__item">Item 3</li>
    <li class="gs-o-list-ui__item">Item 4</li>
</ul>
```

## Subtle

A subtle border variant of the list ui (the lines are a lighter colour)

<div class="example">
    <ul class="gs-o-list-ui--subtle">
        <li class="gs-o-list-ui__item">Item 1</li>
        <li class="gs-o-list-ui__item">Item 2</li>
        <li class="gs-o-list-ui__item">Item 3</li>
        <li class="gs-o-list-ui__item">Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-ui--subtle">
    <li class="gs-o-list-ui__item">Item 1</li>
    <li class="gs-o-list-ui__item">Item 2</li>
    <li class="gs-o-list-ui__item">Item 3</li>
    <li class="gs-o-list-ui__item">Item 4</li>
</ul>
```

## Top no border

A variant that has no border on the top of the list

<div class="example">
    <ul class="gs-o-list-ui--top-no-border">
        <li class="gs-o-list-ui__item">Item 1</li>
        <li class="gs-o-list-ui__item">Item 2</li>
        <li class="gs-o-list-ui__item">Item 3</li>
        <li class="gs-o-list-ui__item">Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-ui--top-no-border">
    <li class="gs-o-list-ui__item">Item 1</li>
    <li class="gs-o-list-ui__item">Item 2</li>
    <li class="gs-o-list-ui__item">Item 3</li>
    <li class="gs-o-list-ui__item">Item 4</li>
</ul>
```

## Bottom no border

A variant that has no border on the bottom of the list

<div class="example">
    <ul class="gs-o-list-ui--bottom-no-border">
        <li class="gs-o-list-ui__item">Item 1</li>
        <li class="gs-o-list-ui__item">Item 2</li>
        <li class="gs-o-list-ui__item">Item 3</li>
        <li class="gs-o-list-ui__item">Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-ui--bottom-no-border">
    <li class="gs-o-list-ui__item">Item 1</li>
    <li class="gs-o-list-ui__item">Item 2</li>
    <li class="gs-o-list-ui__item">Item 3</li>
    <li class="gs-o-list-ui__item">Item 4</li>
</ul>
```

## Flush

A variant that has no padding on the left of the list items

<div class="example">
    <ul class="gs-o-list-ui--top-no-border">
        <li class="gs-o-list-ui__item--flush">Item 1</li>
        <li class="gs-o-list-ui__item--flush">Item 2</li>
        <li class="gs-o-list-ui__item--flush">Item 3</li>
        <li class="gs-o-list-ui__item--flush">Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-ui--top-no-border">
    <li class="gs-o-list-ui__item--flush">Item 1</li>
    <li class="gs-o-list-ui__item--flush">Item 2</li>
    <li class="gs-o-list-ui__item--flush">Item 3</li>
    <li class="gs-o-list-ui__item--flush">Item 4</li>
</ul>
```

## [Link](#link)

A variant that has links

<div class="example">
    <ul class="gs-o-list-ui">
        <a href="#link" class="gs-o-list-ui__link">Item 1</a>
        <a href="#link" class="gs-o-list-ui__link">Item 2</a>
        <a href="#link" class="gs-o-list-ui__link">Item 3</a>
        <a href="#link" class="gs-o-list-ui__link">Item 4</a>
    </ul>
</div>

```html
<ul class="gs-o-list-ui">
    <a href="#link" class="gs-o-list-ui__link">Item 1</a>
    <a href="#link" class="gs-o-list-ui__link">Item 2</a>
    <a href="#link" class="gs-o-list-ui__link">Item 3</a>
    <a href="#link" class="gs-o-list-ui__link">Item 4</a>
</ul>
```

<link rel="stylesheet" href="https://bbc.github.io/grandstand/assets/css/grandstand-latin-flexbox-4.1.0.enhanced.css">
