قائمة البيانات · النمط البصري

    <.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 data-list--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 data-list--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 data-list--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 data-list--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 data-list--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."}
    ])
  }
/>

  

    <.data_list
  class="data-list data-list--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 data-list--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 data-list--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 data-list--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-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-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-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."}
    ])
  }
/>