Card grid

The grid is a layout component that controls the composition of other elements. In this case cards.

  • Four columns grid

    preview
    code
    <section class="gh-@container">
  <div class="gh-wrap gh-flow">
    <div class="gh-flex" style="--gh-place: space-between; --gh-align: baseline;">
      <h3 class="gh-heading-large">Four columns grid</h3>
      <a class="gh-text-label" href="#">Visa alla</a>
    </div>
    <ul class="gh-grid" role="list" style="--gh-sm-columns: 2; --gh-md-columns: 3; --gh-lg-columns: 4; --gh-gap: var(--gh-space-large) var(--gh-space-small);">
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
    </ul>
    <a class="gh-button gh-margin-block" style="--gh-margin-block: var(--gh-space-medium) 0;" href="#" data-type="outline-dark">Visa alla stories</a>
  </div>
</section>
    data
    [
  {
    "title": "Ronde van Sotenäs 2023",
    "text": "En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.",
    "tag": "",
    "size": "",
    "url": "#",
    "image": {
      "url": "/assets/public/media/card-placeholder.jpg",
      "alt": "A cyclist in sunny backlight.",
      "loading": "lazy"
    },
    "button": "",
    "meta": ""
  }
]

  • Three columns grid

    preview
    code
    <section class="gh-@container">
  <div class="gh-wrap gh-flow">
  <div class="gh-flex" style="--gh-place: space-between; --gh-align: baseline;">
    <h3 class="gh-heading-large">Three columns grid</h3>
    <a class="gh-text-label" href="#">Visa alla</a>
  </div>
  <ul class="gh-grid" role="list" style="--gh-sm-columns: 2; --gh-md-columns: 3; --gh-gap: var(--gh-space-large) var(--gh-space-small);">
    <li>
      <div class="gh-card gh-@container">
      <figure class="gh-card--media gh-frame">
        <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
      </figure>
      <div class="gh-card--content gh-flow">
        <h3 class="gh-card--heading">
          <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
        </h3>
        <div class="gh-text-label"></div>
          <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="gh-card gh-@container">
      <figure class="gh-card--media gh-frame">
        <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
      </figure>
      <div class="gh-card--content gh-flow">
        <h3 class="gh-card--heading">
          <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
        </h3>
        <div class="gh-text-label"></div>
          <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="gh-card gh-@container">
      <figure class="gh-card--media gh-frame">
        <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
      </figure>
      <div class="gh-card--content gh-flow">
        <h3 class="gh-card--heading">
          <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
        </h3>
        <div class="gh-text-label"></div>
          <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="gh-card gh-@container">
      <figure class="gh-card--media gh-frame">
        <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
      </figure>
      <div class="gh-card--content gh-flow">
        <h3 class="gh-card--heading">
          <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
        </h3>
        <div class="gh-text-label"></div>
          <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="gh-card gh-@container">
      <figure class="gh-card--media gh-frame">
        <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
      </figure>
      <div class="gh-card--content gh-flow">
        <h3 class="gh-card--heading">
          <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
        </h3>
        <div class="gh-text-label"></div>
          <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="gh-card gh-@container">
      <figure class="gh-card--media gh-frame">
        <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
      </figure>
      <div class="gh-card--content gh-flow">
        <h3 class="gh-card--heading">
          <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
        </h3>
        <div class="gh-text-label"></div>
          <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
        </div>
      </div>
    </li>
  </ul>
  <a class="gh-button gh-margin-block" style="--gh-margin-block: var(--gh-space-medium) 0;" href="#" data-type="outline-dark">Visa alla stories</a>
  <div>
</section>
    data
    [
  {
    "title": "Ronde van Sotenäs 2023",
    "text": "En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.",
    "tag": "",
    "size": "",
    "url": "#",
    "image": {
      "url": "/assets/public/media/card-placeholder.jpg",
      "alt": "A cyclist in sunny backlight.",
      "loading": "lazy"
    },
    "button": "",
    "meta": ""
  }
]

  • Two columns grid

    preview
    code
    <section class="gh-@container">
  <div class="gh-wrap gh-flow">
    <div class="gh-flex" style="--gh-place: space-between; --gh-align: baseline;">
      <h3 class="gh-heading-large">Two columns grid</h3>
      <a class="gh-text-label" href="#">Visa alla</a>
    </div>
    <ul class="gh-grid" role="list" style="--gh-sm-columns: 2; --gh-gap: var(--gh-space-large) var(--gh-space-small);">
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
      <li>
        <div class="gh-card gh-@container">
        <figure class="gh-card--media gh-frame">
          <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
        </figure>
        <div class="gh-card--content gh-flow">
          <h3 class="gh-card--heading">
            <a href="#" class="gh-stretch-link" aria-label="Ronde van Sotenäs 2023">Ronde van Sotenäs 2023</a>
          </h3>
          <div class="gh-text-label"></div>
            <p>En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.</p>
          </div>
        </div>
      </li>
    </ul>
    <a class="gh-button gh-margin-block" style="--gh-margin-block: var(--gh-space-medium) 0;" href="#" data-type="outline-dark">Visa alla stories</a>
  </div>
</section>
    data
    [
  {
    "title": "Ronde van Sotenäs 2023",
    "text": "En riktigt fin sommartradition som vi nu arrangerar för åttonde året i rad och där vi njuter av Sotenäs fantastiska natur på cykel.",
    "tag": "",
    "size": "",
    "url": "#",
    "image": {
      "url": "/assets/public/media/card-placeholder.jpg",
      "alt": "A cyclist in sunny backlight.",
      "loading": "lazy"
    },
    "button": "",
    "meta": ""
  }
]