skip to content

Composing content

By combining Stacks, Grids, and the various components, you can quickly compose responsive layouts like the following “kitchen sink” example.

Light theme

Lorem ipsum dolor sit amet

Iure explicabo quasi tempore tempora deserunt quaerat dignissimos obcaecati placeat dolor. Nihil! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo iure alias ipsum porro ut eaque corrupti, voluptatibus exercitationem iste consequatur?

  • Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum consequatur, rem perferendis sunt distinctio ut corrupti expedita sapiente voluptatem neque? Ratione velit illum delectus laboriosam quas expedita ex, repellendus non?
  • Impedit praesentium ipsam, itaque perspiciatis, voluptatibus ducimus nesciunt facilis nobis nam labore illo minus explicabo natus quo eaque voluptas, dolorum quam architecto sunt! Deserunt, similique quis aliquid ex eaque reprehenderit.
  • Veritatis rerum hic numquam quibusdam eos. Vel magni provident ea? Molestias laborum quos a expedita voluptas dolor ad, officia doloribus ullam illum, atque pariatur, consequatur error? Libero, numquam? Minima, fugit.
  • Dolor distinctio, iusto labore ullam ducimus non praesentium et. Consequatur quisquam odio alias neque sequi modi sit? Ab facere culpa, odit nisi nam dolores repellat facilis ex consequuntur dignissimos molestias.
  • Facilis, fuga totam reiciendis error magnam vitae cupiditate. Aut debitis ipsa cupiditate, quae laudantium repudiandae asperiores nisi. Fuga sunt, suscipit, dolor dolores asperiores labore aliquam eveniet ea aut aliquid molestiae!

Assumenda aliquam sunt exercitationem distinctio adipisci provident id natus commodi quibusdam odit itaque amet, veritatis perspiciatis et ullam labore iste. Ab nobis cupiditate mollitia optio, obcaecati maxime nam molestiae. Nesciunt, fugiat quas!

Sample blockquote:

Very clear, simple, comprehensive. It’s a wonderful voting tool and it definitely influenced positively my decision to vote. Thank you for providing such informative and easy-to-follow pre-voting platform.

Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quae eos laboriosam vero aliquid quam soluta ad officiis quia omnis molestiae optio dolore nesciunt tempora? Dolor doloremque illum quasi exercitationem?

Card 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo qui delectus eos sapiente. Necessitatibus quis ratione praesentium esse culpa accusantium est, tempore qui deleniti molestias fugit doloremque debitis tempora illum.

Card 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse laboriosam recusandae illo non accusamus vero cupiditate aspernatur incidunt nostrum, commodi quos dicta ducimus quidem debitis et reiciendis dolores minima velit.

Iure explicabo quasi tempore tempora deserunt quaerat dignissimos obcaecati placeat dolor. Nihil! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo iure alias ipsum porro ut eaque corrupti, voluptatibus exercitationem iste consequatur?

Basic table with column and row headers
Column 1 Column 2 Column 3
Row 1 / row header Row 1 / cell 2 Row 1 / cell 3
Row 2 / row header Row 2 / cell 2 Row 2 / cell 3
Row 3 / row header Row 3 / cell 2 Row 3 / cell 3

Description list:

Email
shaunbailey@shaunbailey.co.uk

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Lorem ipsum dolor sit amet

Iure explicabo quasi tempore tempora deserunt quaerat dignissimos obcaecati placeat dolor. Nihil! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo iure alias ipsum porro ut eaque corrupti, voluptatibus exercitationem iste consequatur?

  • Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum consequatur, rem perferendis sunt distinctio ut corrupti expedita sapiente voluptatem neque? Ratione velit illum delectus laboriosam quas expedita ex, repellendus non?
  • Impedit praesentium ipsam, itaque perspiciatis, voluptatibus ducimus nesciunt facilis nobis nam labore illo minus explicabo natus quo eaque voluptas, dolorum quam architecto sunt! Deserunt, similique quis aliquid ex eaque reprehenderit.
  • Veritatis rerum hic numquam quibusdam eos. Vel magni provident ea? Molestias laborum quos a expedita voluptas dolor ad, officia doloribus ullam illum, atque pariatur, consequatur error? Libero, numquam? Minima, fugit.
  • Dolor distinctio, iusto labore ullam ducimus non praesentium et. Consequatur quisquam odio alias neque sequi modi sit? Ab facere culpa, odit nisi nam dolores repellat facilis ex consequuntur dignissimos molestias.
  • Facilis, fuga totam reiciendis error magnam vitae cupiditate. Aut debitis ipsa cupiditate, quae laudantium repudiandae asperiores nisi. Fuga sunt, suscipit, dolor dolores asperiores labore aliquam eveniet ea aut aliquid molestiae!

Assumenda aliquam sunt exercitationem distinctio adipisci provident id natus commodi quibusdam odit itaque amet, veritatis perspiciatis et ullam labore iste. Ab nobis cupiditate mollitia optio, obcaecati maxime nam molestiae. Nesciunt, fugiat quas!

Sample blockquote:

Very clear, simple, comprehensive. It’s a wonderful voting tool and it definitely influenced positively my decision to vote. Thank you for providing such informative and easy-to-follow pre-voting platform.

Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quae eos laboriosam vero aliquid quam soluta ad officiis quia omnis molestiae optio dolore nesciunt tempora? Dolor doloremque illum quasi exercitationem?

Card 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo qui delectus eos sapiente. Necessitatibus quis ratione praesentium esse culpa accusantium est, tempore qui deleniti molestias fugit doloremque debitis tempora illum.

Card 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse laboriosam recusandae illo non accusamus vero cupiditate aspernatur incidunt nostrum, commodi quos dicta ducimus quidem debitis et reiciendis dolores minima velit.

Iure explicabo quasi tempore tempora deserunt quaerat dignissimos obcaecati placeat dolor. Nihil! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo iure alias ipsum porro ut eaque corrupti, voluptatibus exercitationem iste consequatur?

Basic table with column and row headers
Column 1 Column 2 Column 3
Row 1 / row header Row 1 / cell 2 Row 1 / cell 3
Row 2 / row header Row 2 / cell 2 Row 2 / cell 3
Row 3 / row header Row 3 / cell 2 Row 3 / cell 3

Description list:

Email
shaunbailey@shaunbailey.co.uk