Grids

The grids are layout elements that can be used to present and spread the content within a view.

Table of contents

Definition

The grids follow a 12 columns-sizing approach. According the various breakpoints the number of columns varies.

Size S (e.g. Mobile)

  • One single column design.
  • Break point: S < large (1024px)

Size M (e.g. Tablet)

  • 12 columns design with two distinct sections spread across 6 columns ("left section") and 6 columns ("right section").
  • Break point: large (1024px) < M < xlarge (1300px)

Size L (e.g. Desktop)

  • 12 columns design with two distinct sections spread across 5 columns ("left section"), an empty column ("spacer") and 6 columns ("right section").
  • Break point: xlarge (1300px) > L

Usage

Unlike components, the grids can be applied to any HTML elements through the use of utility classes - styles that are available globally.

Card Grid

Commonly use to list information, the global .card-grid style distribute its children according the window size.

On mobile devices, information are listed in a single column, two on medium size devices and three on wider devices.

<div class="card-grid">
  <Card>
    <h2 class="title" slot="start">Title A.</h2>
  </Card>

  <Card>
    <h2 class="title" slot="start">Title B.</h2>
  </Card>
</div>

Showcase

Card 1

Vivamus sed elit diam. Sed velit lectus, pretium ac dui at, accumsan elementum tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pulvinar ante nibh, vel eleifend massa dictum at. Sed porttitor erat id enim pharetra, ut consequat erat interdum. Donec a nibh molestie, pulvinar urna bibendum, congue arcu. Aliquam vel posuere ipsum. Suspendisse commodo dignissim viverra. Aenean auctor magna a ullamcorper finibus. Morbi sed condimentum ipsum. Mauris interdum purus magna, at viverra augue scelerisque eu. Vivamus a tellus faucibus dui convallis iaculis. Curabitur nec pharetra ante. Cras gravida malesuada lacus non ornare.

Card 2

Maecenas mauris dui, efficitur sed semper sed, cursus nec elit. Ut iaculis ex magna, quis porttitor mi sagittis nec. Mauris ut sem luctus, elementum nisl a, sollicitudin felis. Pellentesque venenatis mi id nunc accumsan, ac dictum nisi molestie. Nullam vel nunc augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla blandit risus, sit amet convallis lorem tempor nec. Integer nec magna eget ante pellentesque suscipit non vitae tortor. Sed finibus malesuada ullamcorper. Nunc interdum sagittis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus leo nisl, tincidunt at metus vitae, egestas consectetur enim. Phasellus gravida felis at congue vehicula. Quisque elementum risus quam, a mattis risus luctus sit amet. Pellentesque quis aliquet lectus. Nunc ut quam nisl.

Card 3

Mauris nec dolor elit. Etiam id eros eu neque finibus vehicula ac ut ex. Fusce feugiat ultrices eros, vitae interdum dolor. Praesent ultrices id magna et aliquam. Nam eu dictum odio. Nulla non sem in sapien pulvinar viverra. Maecenas quam mi, porta nec velit eu, fringilla efficitur ligula. Donec quis porttitor purus. Vestibulum feugiat non quam sit amet feugiat. Donec vestibulum ut metus in gravida. Integer iaculis consequat tempus. Praesent varius lorem ante, eu aliquet felis ornare non. Sed in egestas quam. Sed vel nisl felis. Aenean sollicitudin lobortis neque, vitae interdum risus tristique sed.

Content Grid

The .content-grid can be used to present detailed content. It can render up to four elements (.content-a, .content-b, .content-c and .content-d) in two rows and two columns.

<div class="content-grid">
  <h2 class="content-a">Content A.</h2>

  <h2 class="content-b">Content B.</h2>

  <h2 class="content-c">Content C.</h2>

  <h2 class="content-d">Content D.</h2>
</div>

Showcase

Vivamus sed elit diam. Sed velit lectus, pretium ac dui at, accumsan elementum tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pulvinar ante nibh, vel eleifend massa dictum at. Sed porttitor erat id enim pharetra, ut consequat erat interdum. Donec a nibh molestie, pulvinar urna bibendum, congue arcu. Aliquam vel posuere ipsum. Suspendisse commodo dignissim viverra. Aenean auctor magna a ullamcorper finibus. Morbi sed condimentum ipsum. Mauris interdum purus magna, at viverra augue scelerisque eu. Vivamus a tellus faucibus dui convallis iaculis. Curabitur nec pharetra ante. Cras gravida malesuada lacus non ornare.

Quisque id tincidunt nunc. In hac habitasse platea dictumst. Donec molestie diam feugiat justo feugiat ultricies. Mauris sit amet quam mattis, congue justo in, sagittis urna. Quisque vel nisl tempor, mattis nisl eget, sodales risus. In blandit elementum nisi vel sagittis. Fusce ex mi, pulvinar nec iaculis eget, consequat nec turpis. Praesent ultrices egestas sapien eget tempor. Nunc mollis ante est, aliquet porta arcu ultrices suscipit. Cras eu lobortis dui, id facilisis lacus. Maecenas at ex bibendum, volutpat turpis quis, egestas justo. Phasellus mattis erat elit. Integer iaculis blandit dui in molestie. Phasellus quam purus, efficitur in sem non, congue elementum tortor. Vivamus id dui ullamcorper, vulputate risus in, ultricies felis. Nunc in libero ut ante blandit rutrum.

Mauris nec dolor elit. Etiam id eros eu neque finibus vehicula ac ut ex. Fusce feugiat ultrices eros, vitae interdum dolor. Praesent ultrices id magna et aliquam. Nam eu dictum odio. Nulla non sem in sapien pulvinar viverra. Maecenas quam mi, porta nec velit eu, fringilla efficitur ligula. Donec quis porttitor purus. Vestibulum feugiat non quam sit amet feugiat. Donec vestibulum ut metus in gravida. Integer iaculis consequat tempus. Praesent varius lorem ante, eu aliquet felis ornare non. Sed in egestas quam. Sed vel nisl felis. Aenean sollicitudin lobortis neque, vitae interdum risus tristique sed.

Mauris nec dolor elit. Etiam id eros eu neque finibus vehicula ac ut ex. Fusce feugiat ultrices eros, vitae interdum dolor. Praesent ultrices id magna et aliquam. Nam eu dictum odio. Nulla non sem in sapien pulvinar viverra. Maecenas quam mi, porta nec velit eu, fringilla efficitur ligula. Donec quis porttitor purus. Vestibulum feugiat non quam sit amet feugiat. Donec vestibulum ut metus in gravida. Integer iaculis consequat tempus. Praesent varius lorem ante, eu aliquet felis ornare non. Sed in egestas quam. Sed vel nisl felis. Aenean sollicitudin lobortis neque, vitae interdum risus tristique sed.