Joran design system

Grid: Item Centered 

<div class="o-grid">
    <div class="o-prose o-grid__item--self-center">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag.</p>
    </div>
    <figure class="c-figure">

        <img class="c-figure__media" src="https://source.unsplash.com/800x800/daily" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

        <figcaption class="c-figure__caption">
            This is the caption
        </figcaption>
    </figure>

</div>
 
<div class="o-grid">
    <div class="o-prose o-grid__item--self-center">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag.</p>
    </div>
    {% render '@figure', { src:'https://source.unsplash.com/800x800/daily'}, true %}
</div>
 
/* No context defined. */
  • Content: 
    /* ======================================================================
   # _objects.grid-css
   ====================================================================== */

.o-grid {
  @apply
    grid
    gap-4
    md:grid-cols-2
    print:grid-cols-2
   ;

  @extend .u-break-inside-avoid;
}

/* -----------------------------------
# Items
----------------------------------- */

.o-grid__item--self-center {
  @apply
    self-center
   ;
}

@screen md {
  .o-grid__item--left {
    grid-column: 1;
    grid-row: 1;
  }

  .o-grid__item--right {
    grid-column: 2;
    grid-row: 1;
  }
}

.o-grid__item--pushed {
  @apply
    md:col-start-2
    print:col-start-2
  ;
}
  • URL: /components/raw/grid/_objects.grid.css
  • Filesystem Path: src/components/03-Objects/grid/_objects.grid.css
  • Size: 673 Bytes

Grid

Permet d’afficher du contenu sur deux colonnes.

Variantes

Pushed

Le contenu s’affiche à droite sur desktop

Centered

Permet de centrer le contenu verticalement. Peut être utiliser avec une combinaison texte et image.

Reversed

Permet d’inverser les colonne gauche et droite sur desktop alors que sur mobile l’ordre est respecté.