Data List

Style

Semantic ink on the label, size scale on label and content, corner radius on items, and host max-width utilities.

Hex doc

Phoenix

Semantic

Use class="ui-{role}" to set the semantic palette of a data list.

Available options: accent, alert, brand, info, success

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.data_list
  class="data-list"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-accent"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-brand"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-alert"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-success"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-info"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>

Size

Use class="ui-size-{size}" to set the size of a data list.

Available options: xs, sm, md (default), lg, xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.data_list
  class="data-list ui-size-sm"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-size-md"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-size-lg"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-size-xl"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a data list.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.data_list
  class="data-list ui-rounded-none"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-rounded-md"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>
<.data_list
  class="data-list ui-rounded-full"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
/>

Max width

Without max-w-*, width comes from component CSS. Default for data-list: md (width: 100%).

Use class="max-w-{step}" to set the maximum width of a data list root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (md)

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

none

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

full

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

9xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

8xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

7xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

6xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

5xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

4xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

3xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

2xs

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

2xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

3xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

4xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

5xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

6xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

7xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

8xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

9xl

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.data_list
  class="data-list"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-none"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-full"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-9xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-8xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-7xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-6xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-5xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-4xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-3xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-2xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-xs"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-sm"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-md"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-lg"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-2xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-3xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-4xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-5xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-6xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-7xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-8xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>

<.data_list
  class="data-list max-w-9xl"
  items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}

/>