النمط البصري

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

  

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

  

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

  

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

/>