Cover

Cover displays content across the entire screen and should attract extra attention. Often with an actionable information.

  • With all elements

    preview
    code
    <section class="gh-cover">
  <div class="gh-cover--wrap gh-wrap">
  <figure class="gh-cover--media gh-media-filter">
    <img src="/assets/public/media/cover-placeholder.jpg" alt="A runner in sunglasses." loading="lazy">
  </figure>
  <div class="gh-cover--pattern"></div>
  <div class="gh-cover--overlay"></div>
  <div class="gh-cover--content">
    <div class="gh-text-label">Coaching</div>
      <h1 class="gh-heading-xxlarge">Smidig och effektiv träning för alla</h1>
      <a href="#" class="gh-button gh-margin-block" data-type="primary">Läs mer</a>
    </div>
  </div>
</section>
    data
    [
  {
    "title": "Smidig och effektiv träning för alla",
    "tag": "Coaching",
    "url": "#",
    "pattern": "true",
    "overlay": "true",
    "color": "",
    "image": {
      "url": "/assets/public/media/cover-placeholder.jpg",
      "alt": "A runner in sunglasses.",
      "loading": "lazy"
    },
    "button": {
      "text": "Läs mer",
      "type": "primary",
      "size": ""
    }
  }
]

  • Only the media

    preview
    code
    <section class="gh-cover">
  <div class="gh-cover--wrap gh-wrap">
    <figure class="gh-cover--media gh-media-filter" style="--gh-media-filter-color: var(--gh-color-secondary-40);">
      <img src="/assets/public/media/promo-placeholder.jpg" alt="A runner in sunglasses." loading="lazy">
    </figure>
  </div>
</section>
    data
    [
  {
    "title": "",
    "tag": "",
    "url": "",
    "pattern": "false",
    "overlay": "false",
    "color": "secondary-40",
    "image": {
      "url": "/assets/public/media/promo-placeholder.jpg",
      "alt": "A runner in sunglasses.",
      "loading": "lazy"
    },
    "button": ""
  }
]

  • With video

    preview
    code
    <section class="gh-cover">
  <div class="gh-cover--wrap gh-wrap">
  <figure class="gh-cover--media gh-media-filter">
    <video autoplay="" loop="" playsinline="" muted="" preload="auto" poster="/assets/public/media/cover-placeholder.jpg">
      <source src="/assets/public/media/video-placeholder.mp4#t=0.01" type="video/mp4">
    </video>
  </figure>
  <div class="gh-cover--pattern"></div>
  <div class="gh-cover--overlay"></div>
  <div class="gh-cover--content">
    <div class="gh-text-label">Coaching</div>
      <h1 class="gh-heading-xxlarge">Smidig och effektiv träning för alla</h1>
      <a href="#" class="gh-button gh-margin-block" data-type="primary">Läs mer</a>
    </div>
  </div>
</section>
    data
    [
  {
    "title": "Smidig och effektiv träning för alla",
    "tag": "Coaching",
    "url": "#",
    "pattern": "true",
    "overlay": "true",
    "color": "",
    "image": {
      "url": "/assets/public/media/cover-placeholder.jpg",
      "alt": "A runner in sunglasses.",
      "loading": "lazy"
    },
    "video": {
      "url": "/assets/public/media/video-placeholder.mp4"
    },
    "button": {
      "text": "Läs mer",
      "type": "primary",
      "size": ""
    }
  }
]