Lists

The List component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

API

Examples

Below is a collection of simple to complex examples.

Basic

This is a basic example.

Disabled

You cannot interact with disabled List.

Dense

Smol

Avatar and Icons

We can add avatars and icons to out lists.

Nested

Using the ListGroup component you can create infinite levels of depth and set custom offsets.

Subheading and Dividers

Lists can contain multiple subheaders and dividers.

Lists can receive an alternative nav styling that reduces the width ListItem takes up as well as adding a border radius.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.



Last Updated: 2021-09-02