Card

Cards display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

  • With button link

    preview
    code
    <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">
Ronde van Sotenäs 2023</h3>
<div class="gh-text-label">Challenge</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>
  <dl class="gh-card--meta">
    <div class="gh-card--meta-row">
      <dt>När</dt>
      <dd>07.10.2023</dd>
    </div>
    <div class="gh-card--meta-row">
      <dt>Var</dt>
      <dd>Borås</dd>
    </div>
  </dl>
</div>
<div><a href="#" class="gh-button gh-stretch-link" data-type="primary">Läs mer</a></div>
</div>
    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": "Challenge",
    "size": "",
    "url": "#",
    "image": {
      "url": "/assets/public/media/card-placeholder.jpg",
      "alt": "A cyclist in sunny backlight.",
      "loading": "lazy"
    },
    "button": {
      "text": "Läs mer",
      "type": "primary",
      "size": ""
    },
    "meta": [
      {
        "key": "När",
        "value": "07.10.2023"
      },
      {
        "key": "Var",
        "value": "Borås"
      }
    ]
  }
]

  • With heading link

    preview
    code
    <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">Challenge</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>
    <dl class="gh-card--meta">
      <div class="gh-card--meta-row">
        <dt>När</dt>
        <dd>07.10.2023</dd>
      </div>
      <div class="gh-card--meta-row">
        <dt>Var</dt>
        <dd>Borås</dd>
      </div>
    </dl>
  </div>
</div>
    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": "Challenge",
    "size": "",
    "url": "#",
    "image": {
      "url": "/assets/public/media/card-placeholder.jpg",
      "alt": "A cyclist in sunny backlight.",
      "loading": "lazy"
    },
    "button": "",
    "meta": [
      {
        "key": "När",
        "value": "07.10.2023"
      },
      {
        "key": "Var",
        "value": "Borås"
      }
    ]
  }
]

  • With button and large size

    In this example, the card spans two columns of a three-column grid defined from the parent element through the .gh-grid class and associated variables.

    preview
    code
    <div class="gh-card gh-@container" data-size="large" style="--gh-sm-column: span 2;">
<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">
Ronde van Sotenäs 2023</h3>
<div class="gh-text-label">Challenge</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>
  <dl class="gh-card--meta">
    <div class="gh-card--meta-row">
      <dt>När</dt>
      <dd>07.10.2023</dd>
    </div>
    <div class="gh-card--meta-row">
      <dt>Var</dt>
      <dd>Borås</dd>
    </div>
  </dl>
</div>
<div><a href="#" class="gh-button gh-stretch-link" data-type="primary">Läs mer</a></div>
</div>
    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": "Challenge",
    "size": "large",
    "url": "#",
    "image": {
      "url": "/assets/public/media/card-placeholder.jpg",
      "alt": "A cyclist in sunny backlight.",
      "loading": "lazy"
    },
    "button": {
      "text": "Läs mer",
      "type": "primary",
      "size": ""
    },
    "meta": [
      {
        "key": "När",
        "value": "07.10.2023"
      },
      {
        "key": "Var",
        "value": "Borås"
      }
    ]
  }
]

  • With fewer elements

    preview
    code
    <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>
    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": ""
  }
]

  • With video

    preview
    code
    <div class="gh-card gh-@container">
<figure class="gh-card--media gh-frame">
  <video autoplay="" loop="" playsinline="" muted="" preload="auto" poster="/assets/public/media/card-placeholder.jpg">
    <source src="/assets/public/media/video-placeholder.mp4#t=0.01" type="video/mp4">
  </video>
</figure>
<div class="gh-card--content gh-flow">
<h3 class="gh-card--heading">
Ronde van Sotenäs 2023</h3>
<div class="gh-text-label">Challenge</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>
  <dl class="gh-card--meta">
    <div class="gh-card--meta-row">
      <dt>När</dt>
      <dd>07.10.2023</dd>
    </div>
    <div class="gh-card--meta-row">
      <dt>Var</dt>
      <dd>Borås</dd>
    </div>
  </dl>
</div>
<div><a href="#" class="gh-button gh-stretch-link" data-type="primary">Läs mer</a></div>
</div>
    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": "Challenge",
    "size": "",
    "url": "#",
    "image": {
      "url": "/assets/public/media/card-placeholder.jpg",
      "alt": "A cyclist in sunny backlight.",
      "loading": "lazy"
    },
    "video": {
      "url": "/assets/public/media/video-placeholder.mp4"
    },
    "button": {
      "text": "Läs mer",
      "type": "primary",
      "size": ""
    },
    "meta": [
      {
        "key": "När",
        "value": "07.10.2023"
      },
      {
        "key": "Var",
        "value": "Borås"
      }
    ]
  }
]