Side list

The side list is a control to create a basic view with a list of items on the left side and the content corresponding to the item on the right. At the bottom of the list, you can add a button to give your users the option to create a new entry.

The side list is a top level component and cannot be put inside a tab control. Since Cosmo CSS is a pure CSS library, you need to implement the logic yourself.

Show code sample

<div class="cosmo-side-list">
    <nav class="cosmo-side-list__items">
        <a class="cosmo-side-list__item is--active">Side entry 1</a>
        <a class="cosmo-side-list__item">Side entry 2</a>
        <a class="cosmo-side-list__item">Side entry 3</a>
        <button class="cosmo-button is--full-width">Add entry to list</button>
    </nav>
    <div class="cosmo-side-list__content">
        <h1 class="cosmo-title">Side list</h1>
        <p>
            The side list is a control to create a basic view with a list of items on the left side and the content
            corresponding to the item on the right. At the bottom of the list, you can add a button to give your
            users the option to create a new entry.
        </p>
        <p>
            The side list is a top level component and cannot be put inside a tab control. Since Cosmo CSS is a pure
            CSS library, you need to implement the logic yourself.
        </p>
    </div>
</div>