## List item

### Single list element

Basic layout structure for list elements. The content inside the elements serves just as an example.

Example Markup

// One row

1
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017

// One row - with horizontal action menu

1
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017

// Two rows

2 4
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017
primary label somelabel Hendrerit in vulputate velit esse molestie praesent.somelabel somelabel

2 3
vs
This is a SluglineDolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 11:08, 22.03.2017
article in progress Reuters desk:Politics Related: 4 6

2 3
This is a SluglineDolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 11:08, 22.03.2017
op
article in progress Reuters desk:National Related: 3 4

1 3
This is also a SluglineDelenit augue duis dolore te feugait nulla facilisi dolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis. 11:12, 21.03.2017
vs
article published Reuters desk:Politics Related: 4 6

2 3
vs
This is a SluglineDolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 11:08, 22.03.2017
article in progress Reuters desk:Politics Related: 4 6

// Draggable item

1
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017

// Planning item

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis.11:08, 22.03.2017
Hendrerit in vulputate velit esse molestie praesent. 3 4

// Planning item with avatars

vs
sd
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis. 11:08, 22.03.2017
Hendrerit in vulputate velit esse molestie praesent. 3 4

// Item with colored dot indicator

1
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017

                                1

                                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.
                                    11:08, 22.03.2017

                        ...

                                1

                                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.
                                    11:08, 22.03.2017

                        ...

                                2
                                4

                                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.
                                    11:08, 22.03.2017

                                    primary labelsomelabelHendrerit in vulputate velit esse molestie praesent.somelabelsomelabel

                        ...

                                1

                                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.
                                    11:08, 22.03.2017

                        ...

                                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis.11:08, 22.03.2017

                                       Hendrerit in vulputate velit esse molestie praesent.  3   4

                        ...

                                    vs
                                    sd
                                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis.
                                    11:08, 22.03.2017

                                       Hendrerit in vulputate velit esse molestie praesent.  3   4

                        ...

                                1

                                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.
                                    11:08, 22.03.2017

                        ...

### List item group

Structure for list elements groups. The content inside the elements serves just as an example.

Default group (no space between list items): add wrapper div with class `sd-list-item-group`.

If you need some space between list items, add modifier to default one, so the class is `sd-list-item-group sd-list-item-group--space-between-items`.

Example Markup

// Default group (shadow class goes in the group div)

1
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017
2
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017
3
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017

// Group with space between list items (shadow class goes in list item)

1
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017
4
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017
3
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 11:08, 22.03.2017

                                    1

                                        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.
                                        11:08, 22.03.2017

                            ...

                                    1

                                        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.
                                        11:08, 22.03.2017

                            ...

### Nested list items

Structure...

Example Markup

// Group with space between list items (shadow class goes in list item)

P
Scheduled SluglinePellentesque libero tortor, tincidunt et, tincidunt eget semper nec quam. 12:50, 15.09.2017
(3) Hide nested items Show nested items
Draft Lipsum Ipsum agenda:Sport agenda Molestie consequatvel illum dolore eu feugiat nulla facilisis. 13:00–14:00, 15.09.2017
P
Rescheduled Lipsum Ipsum agenda:Sport agenda Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. 13:00–14:00, 15.09.2017
P
Scheduled Lipsum Ipsum agenda:Sport agenda In enim justo rhoncus ut 13:00–14:00, 15.09.2017
Draft SluglineVestibulum ullamcorper mauris at ligula vestibulum volutpat pretium libero. 12:50, 15.09.2017
(2) Hide nested items Show nested items
Draft Slugline Lipsum agenda:Daily agenda Molestie consequatvel illum dolore eu feugiat nulla facilisis. 13:00–14:00, 15.09.2017
P
Rescheduled Slugline Ipsum agenda:Daily agenda Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. 13:00–14:00, 15.09.2017
P
Draft SluglineDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. 13:49, 16.09.2017
Postoned Lipsum SlugDuis autem vel eum iriure dolor illum dolore. 12:50, 15.09.2017
(2) Hide nested items Show nested items
Draft Lipsum Slug Ipsum agenda:Politics agenda Molestie consequatvel illum dolore eu feugiat nulla facilisis. 13:00–14:00, 15.09.2017
P
Scheduled Lipsum Slug lipsum agenda:Politics agenda Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. 13:00–14:00, 15.09.2017