Moon Liveview Storybook

Storybook
- What is Moon DS?
- Customization
- Installation
- Migration to V3
- Tokens
- Actions
- Containers & layout
- Content display
  - Accordion
  - Avatar
  - Carousel
  - List
  - Table
- Forms & selection controls
- Indicators & status
- Messaging & feedback
- Navigation

- 0.8.1

What is Moon DS?
What is Moon DS?
Customization
Customization
Icons
Icons
Installation
Installation
Migration to V3
Migration to V3
Tokens
Tokens
Button
Actions Button
Icon Button
Actions Icon Button
Bottomsheet
Containers & layout Bottomsheet
Drawer
Containers & layout Drawer
Popover
Containers & layout Popover
Accordion
Content display Accordion
Avatar
Content display Avatar
Carousel
Content display Carousel
List
Content display List
Table
Content display Table
Authenticator
Forms & selection controls Authenticator
Checkbox
Forms & selection controls Checkbox
Chip
Forms & selection controls Chip
Dropdown
Forms & selection controls Dropdown
Input
Forms & selection controls Input
Inset Select
Forms & selection controls Inset Select
Radio
Forms & selection controls Radio
Radio Group
Forms & selection controls Radio Group
Segmented Control
Forms & selection controls Segmented Control
Select
Forms & selection controls Select
Switch
Forms & selection controls Switch
Textarea
Forms & selection controls Textarea
Badge
Indicators & status Badge
Circular Progress
Indicators & status Circular Progress
Linear Progress
Indicators & status Linear Progress
Loader
Indicators & status Loader
Placeholder
Indicators & status Placeholder
Tag
Indicators & status Tag
Alert
Messaging & feedback Alert
Modal
Messaging & feedback Modal
Snackbar
Messaging & feedback Snackbar
Tooltip
Messaging & feedback Tooltip
Breadcrumbs
Navigation Breadcrumbs
Menu Item
Navigation Menu Item
Pagination
Navigation Pagination
Tabs
Navigation Tabs

List

Moon Design System Website

View package HEX

View repository GitHub

Default Open in playground

Label 1
Label 2
Label 3

<.list >
  <.list_item>
    <:start_content>
      <.icon name="star" />
    </:start_content>
    Label 1
    <:end_content>
      <.icon name="star" />
    </:end_content>
  </.list_item>
  <.list_item>
    <:start_content>
      <.icon name="star" />
    </:start_content>
    Label 2
    <:end_content>
      <.icon name="star" />
    </:end_content>
  </.list_item>
  <.list_item>
    <:start_content>
      <.icon name="star" />
    </:start_content>
    Label 3
    <:end_content>
      <.icon name="star" />
    </:end_content>
  </.list_item>
</.list>