Site header

  • With masonry layout

    preview
    code
    <!-- Component: Site header -->
                <header class="gh-site-header gh-grid gh-@container" data-type="masonry">
                <!-- Site header element: Navbar -->
                <div class="gh-site-header--navbar gh-flex">
                <div class="gh-site-header--column gh-background-primary">
                  <div class="gh-wrap" style="--gh-max-width: none;">
                    <!-- Site header element: Brand logo -->
                    <div class="gh-site-header--brand gh-flex">
                      <a class="gh-flex" href="#">
                        <svg width="156" height="24" viewBox="0 0 156 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <g clip-path="url(#clip0_206_46617)">
                            <path d="M2.06477 5.76842C2.04776 4.90247 2.21551 4.04298 2.55662 3.24842C2.85558 2.55946 3.29747 1.94341 3.85238 1.44194C4.3813 0.970831 4.99375 0.60526 5.65733 0.364573C6.95925 -0.121524 8.39019 -0.121524 9.69211 0.364573C10.3555 0.605607 10.9679 0.971141 11.4971 1.44194C12.0518 1.94357 12.4937 2.55958 12.7928 3.24842C13.1341 4.04295 13.302 4.90244 13.2852 5.76842V6.96194H9.93721V5.76842C9.93721 4.95114 9.71309 4.34898 9.26486 3.96194C8.81749 3.58727 8.25469 3.38222 7.67366 3.38222C7.09262 3.38222 6.52982 3.58727 6.08245 3.96194C5.63422 4.34882 5.4101 4.95098 5.4101 5.76842V18.2326C5.4101 19.0507 5.63422 19.6528 6.08245 20.0391C6.52964 20.4141 7.09251 20.6194 7.67366 20.6194C8.2548 20.6194 8.81767 20.4141 9.26486 20.0391C9.71277 19.6528 9.93689 19.0507 9.93721 18.2326V13.7904H0.661895L0 10.807H13.2833V18.2323C13.3034 19.1036 13.1354 19.9689 12.7909 20.7679C12.489 21.4505 12.0474 22.0607 11.4952 22.5583C10.9662 23.0293 10.3538 23.3949 9.69021 23.6357C8.38829 24.1218 6.95735 24.1218 5.65543 23.6357C4.99174 23.3952 4.37925 23.0296 3.85048 22.5583C3.29806 22.0609 2.85641 21.4507 2.55472 20.7679C2.2104 19.9689 2.04256 19.1036 2.06287 18.2323L2.06477 5.76842Z" fill="currentColor" />
                            <path d="M27.0604 18.4973C27.0666 19.2377 26.9211 19.9714 26.633 20.6523C26.0782 21.9638 25.0443 23.0086 23.7465 23.5692C23.0824 23.8536 22.3684 24.0002 21.6471 24.0002C20.9259 24.0002 20.2119 23.8536 19.5478 23.5692C18.2498 23.0088 17.2158 21.9639 16.6611 20.6523C16.3728 19.9715 16.2273 19.2377 16.2336 18.4973V0.199219H19.5796V18.1661C19.5796 19.0059 19.7764 19.6246 20.17 20.022C20.568 20.4052 21.0965 20.6189 21.6462 20.6189C22.1958 20.6189 22.7244 20.4052 23.1223 20.022C23.5161 19.6247 23.7129 19.0061 23.7127 18.1661V0.199219H27.0588L27.0604 18.4973Z" fill="currentColor" />
                            <path d="M30.3076 0.199219H33.6537V23.8013H30.3076V0.199219Z" fill="currentColor" />
                            <path d="M36.9004 0.199219H41.8538C43.7561 0.199219 45.2103 0.735214 46.2163 1.80721C47.2223 2.87921 47.7253 4.37649 47.7251 6.29906V17.3379C47.7251 19.5479 47.1947 21.1776 46.1339 22.2269C45.0731 23.2762 43.5478 23.8011 41.5579 23.8018H36.9004V0.199219ZM40.2462 20.6189H41.788C42.7282 20.6189 43.3952 20.3814 43.7891 19.9063C44.1831 19.4313 44.3799 18.6855 44.3795 17.6688V6.29858C44.3795 5.37058 44.1937 4.65234 43.8219 4.14386C43.4501 3.63538 42.7722 3.3809 41.788 3.38042H40.2462V20.6189Z" fill="currentColor" />
                            <path d="M50.875 0.199219H60.8471V3.38042H54.221V10.3085H59.994V13.4909H54.221V20.4204H60.8471V23.8018H50.875V0.199219Z" fill="currentColor" />
                            <path d="M63.0117 0.199219H67.9646C69.8673 0.199219 71.3216 0.735214 72.3276 1.80721C73.3337 2.87921 73.8366 4.37649 73.8364 6.29906V17.3379C73.8364 19.5479 73.306 21.1776 72.2452 22.2269C71.1844 23.2762 69.6591 23.8011 67.6692 23.8018H63.0117V0.199219ZM66.3575 20.6189H67.8989C68.8387 20.6189 69.5057 20.3814 69.9 19.9063C70.2942 19.4313 70.491 18.6855 70.4904 17.6688V6.29858C70.4904 5.37058 70.3045 4.65234 69.9328 4.14386C69.561 3.63538 68.883 3.3809 67.8989 3.38042H66.3575V20.6189Z" fill="currentColor" />
                            <path d="M83.4082 0.199219H86.7542V10.3095H90.8866V0.199219H94.2327V23.8013H90.8874V13.2924H86.755V23.8008H83.4082V0.199219Z" fill="currentColor" />
                            <path d="M96.4961 0.199219H106.468V3.38042H99.8421V10.3085H105.615V13.4909H99.8421V20.4204H106.468V23.8018H96.4961V0.199219Z" fill="currentColor" />
                            <path d="M107.747 0.199219H113.127C117.063 0.199219 119.031 2.50858 119.031 7.1273C119.062 8.33602 118.844 9.53796 118.392 10.6575C117.928 11.6809 117.136 12.5163 116.145 13.0284L119.753 23.8018H116.21L113.094 13.7244H111.093V23.8018H107.747V0.199219ZM111.093 10.7405H112.996C113.478 10.7607 113.959 10.6759 114.406 10.4919C114.739 10.3414 115.019 10.0931 115.21 9.7793C115.41 9.42734 115.538 9.03838 115.587 8.63546C115.718 7.58989 115.718 6.53174 115.587 5.48618C115.536 5.07396 115.396 4.67805 115.177 4.32625C114.967 4.00401 114.663 3.75513 114.308 3.61345C113.835 3.44175 113.334 3.36298 112.832 3.38138H111.093L111.093 10.7405Z" fill="currentColor" />
                            <path d="M120.639 5.76841C120.622 4.90247 120.79 4.04298 121.131 3.24841C121.43 2.55948 121.872 1.94345 122.427 1.44194C122.956 0.970916 123.568 0.605355 124.232 0.364573C125.534 -0.121524 126.965 -0.121524 128.267 0.364573C128.93 0.605602 129.543 0.971136 130.072 1.44194C130.627 1.9435 131.068 2.55952 131.368 3.24841C131.709 4.04303 131.876 4.90248 131.859 5.76841V18.2321C131.88 19.1034 131.712 19.9686 131.368 20.7677C131.066 21.4503 130.624 22.0605 130.072 22.5581C129.543 23.0291 128.93 23.3947 128.267 23.6355C126.965 24.1215 125.534 24.1215 124.232 23.6355C123.568 23.3949 122.956 23.0293 122.427 22.5581C121.875 22.0606 121.433 21.4504 121.131 20.7677C120.787 19.9687 120.619 19.1034 120.639 18.2321V5.76841ZM123.985 18.2321C123.985 19.0502 124.209 19.6523 124.657 20.0386C125.105 20.4136 125.668 20.6189 126.249 20.6189C126.83 20.6189 127.393 20.4136 127.84 20.0386C128.288 19.6523 128.512 19.0502 128.512 18.2321V5.76841C128.512 4.95065 128.288 4.34833 127.84 3.96145C127.393 3.58678 126.83 3.38175 126.249 3.38175C125.668 3.38175 125.105 3.58678 124.657 3.96145C124.209 4.34833 123.985 4.95065 123.985 5.76841V18.2321Z" fill="currentColor" />
                            <path d="M133.924 0.199219H143.896V3.38042H137.27V10.3085H143.043V13.4909H137.27V20.4204H143.896V23.8018H133.924V0.199219Z" fill="currentColor" />
                            <path d="M156 6.99575H152.654V6.23302C152.672 5.52537 152.484 4.82795 152.112 4.22758C151.752 3.66406 151.145 3.38238 150.292 3.38254C149.898 3.36628 149.507 3.45747 149.16 3.64654C148.878 3.81107 148.641 4.04482 148.471 4.32622C148.3 4.62253 148.184 4.94781 148.127 5.28622C148.06 5.66365 148.027 6.0464 148.029 6.42983C148.025 6.82241 148.042 7.21491 148.078 7.60582C148.102 7.89638 148.185 8.17869 148.324 8.43454C148.467 8.6798 148.664 8.88935 148.898 9.04774C149.222 9.26267 149.568 9.44056 149.931 9.57814L152.49 10.6087C153.142 10.8443 153.752 11.1859 154.295 11.6201C154.742 11.9914 155.105 12.4547 155.361 12.9792C155.625 13.544 155.797 14.1486 155.869 14.7691C155.962 15.5335 156.006 16.3031 156 17.0731C156.007 18.0042 155.908 18.933 155.705 19.8413C155.536 20.6304 155.206 21.3754 154.738 22.0293C154.27 22.6529 153.655 23.1484 152.95 23.471C152.092 23.8478 151.162 24.0289 150.227 24.0014C149.452 24.0075 148.683 23.8607 147.964 23.5694C147.294 23.3048 146.684 22.9074 146.168 22.4008C145.653 21.8941 145.243 21.2883 144.962 20.6191C144.664 19.9179 144.513 19.1615 144.52 18.3981V17.1391H147.865V18.1999C147.859 18.8027 148.05 19.3906 148.406 19.8739C148.767 20.3713 149.374 20.62 150.226 20.6198C150.682 20.6426 151.137 20.5575 151.555 20.3714C151.859 20.2178 152.111 19.9753 152.277 19.6754C152.454 19.3306 152.56 18.9529 152.588 18.5654C152.632 18.1237 152.654 17.6374 152.654 17.1067C152.659 16.5976 152.637 16.0885 152.588 15.5817C152.563 15.2452 152.468 14.9177 152.31 14.6203C152.165 14.3752 151.962 14.1702 151.719 14.0237C151.398 13.8347 151.063 13.6686 150.719 13.5266L148.324 12.5321C146.881 11.9357 145.913 11.1457 145.421 10.1621C144.928 9.17838 144.682 7.94639 144.683 6.46607C144.678 5.61259 144.8 4.7632 145.043 3.94607C145.26 3.19623 145.622 2.49761 146.11 1.89118C146.597 1.30379 147.207 0.833641 147.897 0.515021C148.691 0.157599 149.554 -0.0177907 150.423 0.00142449C151.207 -0.00822744 151.984 0.14996 152.703 0.465582C153.366 0.756624 153.967 1.17298 154.475 1.69222C154.955 2.18364 155.34 2.76296 155.606 3.39934C155.865 4.01248 155.999 4.67213 156 5.33878L156 6.99575Z" fill="currentColor" />
                            <path d="M81.9959 13.7486L81.334 10.3672H93.6599V13.7486H81.9959Z" fill="currentColor" />
                          </g>
                          <defs>
                            <clipPath id="clip0_206_46617">
                              <rect width="156" height="24" fill="currentColor" />
                            </clipPath>
                          </defs>
                        </svg>
                      </a>
                      <span class="gh-text-label gh-text-xxsmall">Index</span>
                    </div>
                  </div>
                </div>
                <div class="gh-site-header--column gh-background-accent">
                <div class="gh-wrap gh-flex" style="--gh-gap: var(--gh-space-large); --gh-place: end; --gh-max-width: none;">
                <div class="gh-flex" style="--gh-min-width: 100%;">
                <div class="gh-flex" style="--gh-place: space-between; --gh-gap: var(--gh-space-small); --gh-min-width: 100%;">
                  <!-- Site header element: Nav -->
                  <nav class="gh-site-header--nav">
                    <ul class="gh-site-header--nav-list gh-flex" role="list">
                      <li><a class="gh-site-header--nav-link" aria-current="page" href="#">Races</a></li>
                      <li><a class="gh-site-header--nav-link" href="#">Coaching</a></li>
                      <li><a class="gh-site-header--nav-link" href="#">Events</a></li>
                    </ul>
                  </nav>
                  <!-- Site header element: Action triggers -->
                  <div class="gh-site-header--actions">
                    <ul class="gh-site-header--actions-list gh-flex" role="list">
                      <li>
                        <button type="button" class="gh-site-header--actions-trigger">
                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.75 18C3.5375 18 3.35938 17.9277 3.21563 17.7831C3.07187 17.6385 3 17.4594 3 17.2456C3 17.0319 3.07187 16.8542 3.21563 16.7125C3.35938 16.5708 3.5375 16.5 3.75 16.5H20.25C20.4625 16.5 20.6406 16.5723 20.7844 16.7169C20.9281 16.8615 21 17.0406 21 17.2544C21 17.4681 20.9281 17.6458 20.7844 17.7875C20.6406 17.9292 20.4625 18 20.25 18H3.75ZM3.75 12.75C3.5375 12.75 3.35938 12.6777 3.21563 12.5331C3.07187 12.3885 3 12.2094 3 11.9956C3 11.7819 3.07187 11.6042 3.21563 11.4625C3.35938 11.3208 3.5375 11.25 3.75 11.25H20.25C20.4625 11.25 20.6406 11.3223 20.7844 11.4669C20.9281 11.6115 21 11.7906 21 12.0044C21 12.2181 20.9281 12.3958 20.7844 12.5375C20.6406 12.6792 20.4625 12.75 20.25 12.75H3.75ZM3.75 7.5C3.5375 7.5 3.35938 7.42771 3.21563 7.28313C3.07187 7.13853 3 6.95936 3 6.74563C3 6.53188 3.07187 6.35417 3.21563 6.2125C3.35938 6.07083 3.5375 6 3.75 6H20.25C20.4625 6 20.6406 6.07229 20.7844 6.21687C20.9281 6.36147 21 6.54064 21 6.75437C21 6.96812 20.9281 7.14583 20.7844 7.2875C20.6406 7.42917 20.4625 7.5 20.25 7.5H3.75Z" fill="currentColor" />
                          </svg>
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- Site header element: Subnav -->
                <!--<nav class="gh-site-header--subnav">
                <ul class="gh-site-header--subnav-list gh-flex" role="list">
                  <li><a class="gh-site-header--subnav-link" aria-current="page" href="#">Personlig coaching</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Träningsprogram</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Företag</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Coacher</a></li>
                </ul>
              </nav>-->
            </div>
            <!-- Site header element: CTA buttons -->
            <div class="gh-site-header--buttons gh-flex">
              <a class="gh-button" data-type="secondary" href="#">Skapa konto</a>
              <a class="gh-button" data-type="outline-light" href="#">Logga in</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Site header element: Media -->
      <div class="gh-site-header--media-wrap">
      <figure class="gh-site-header--media gh-media-filter">
        <img src="/assets/public/media/cover-placeholder.jpg" alt="A runner in sunglasses." loading="lazy">
      </figure>
      <div class="gh-site-header--pattern"></div>
      <div class="gh-site-header--overlay"></div>
      </div>
      <!-- Site header element: Heading -->
      <div class="gh-site-header--heading">
      <div class="gh-text-label">Guided Heroes</div>
        <h1 class="gh-heading-xxlarge">Quam quisque id diam vel quam elementum nisl pretium fusce</h1>
      </div>
      <!-- Site header element: Content -->
      <div class="gh-site-header--content">
        <p class="gh-text-xsmall">Sed cras ornare arcu dui vivamus arcu felis bibendum. Amet purus gravida quis blandit turpis cursus. Ut pharetra sit amet aliquam id diam. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus.</p>
      </div>
    </header>
    data
    [
      {
        "type": "masonry",
        "title": "Quam quisque id diam vel quam elementum nisl pretium fusce",
        "tag": "Guided Heroes",
        "pattern": "true",
        "overlay": "true",
        "color": "",
        "text": "Sed cras ornare arcu dui vivamus arcu felis bibendum. Amet purus gravida quis blandit turpis cursus. Ut pharetra sit amet aliquam id diam. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus.",
        "image": {
          "url": "/assets/public/media/cover-placeholder.jpg",
          "alt": "A runner in sunglasses.",
          "loading": "lazy"
        },
        "video": {
          "url": ""
        }
      }
    ]
  • With cover layout

    preview
    code
    <!-- Component: Site header -->
                <header class="gh-site-header gh-grid gh-@container" data-type="cover">
                <!-- Site header element: Navbar -->
                <div class="gh-site-header--navbar gh-flex">
                <div class="gh-site-header--column gh-background-primary">
                  <div class="gh-wrap" style="--gh-max-width: none;">
                    <!-- Site header element: Brand logo -->
                    <div class="gh-site-header--brand gh-flex">
                      <a class="gh-flex" href="#">
                        <svg width="156" height="24" viewBox="0 0 156 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <g clip-path="url(#clip0_206_46617)">
                            <path d="M2.06477 5.76842C2.04776 4.90247 2.21551 4.04298 2.55662 3.24842C2.85558 2.55946 3.29747 1.94341 3.85238 1.44194C4.3813 0.970831 4.99375 0.60526 5.65733 0.364573C6.95925 -0.121524 8.39019 -0.121524 9.69211 0.364573C10.3555 0.605607 10.9679 0.971141 11.4971 1.44194C12.0518 1.94357 12.4937 2.55958 12.7928 3.24842C13.1341 4.04295 13.302 4.90244 13.2852 5.76842V6.96194H9.93721V5.76842C9.93721 4.95114 9.71309 4.34898 9.26486 3.96194C8.81749 3.58727 8.25469 3.38222 7.67366 3.38222C7.09262 3.38222 6.52982 3.58727 6.08245 3.96194C5.63422 4.34882 5.4101 4.95098 5.4101 5.76842V18.2326C5.4101 19.0507 5.63422 19.6528 6.08245 20.0391C6.52964 20.4141 7.09251 20.6194 7.67366 20.6194C8.2548 20.6194 8.81767 20.4141 9.26486 20.0391C9.71277 19.6528 9.93689 19.0507 9.93721 18.2326V13.7904H0.661895L0 10.807H13.2833V18.2323C13.3034 19.1036 13.1354 19.9689 12.7909 20.7679C12.489 21.4505 12.0474 22.0607 11.4952 22.5583C10.9662 23.0293 10.3538 23.3949 9.69021 23.6357C8.38829 24.1218 6.95735 24.1218 5.65543 23.6357C4.99174 23.3952 4.37925 23.0296 3.85048 22.5583C3.29806 22.0609 2.85641 21.4507 2.55472 20.7679C2.2104 19.9689 2.04256 19.1036 2.06287 18.2323L2.06477 5.76842Z" fill="currentColor" />
                            <path d="M27.0604 18.4973C27.0666 19.2377 26.9211 19.9714 26.633 20.6523C26.0782 21.9638 25.0443 23.0086 23.7465 23.5692C23.0824 23.8536 22.3684 24.0002 21.6471 24.0002C20.9259 24.0002 20.2119 23.8536 19.5478 23.5692C18.2498 23.0088 17.2158 21.9639 16.6611 20.6523C16.3728 19.9715 16.2273 19.2377 16.2336 18.4973V0.199219H19.5796V18.1661C19.5796 19.0059 19.7764 19.6246 20.17 20.022C20.568 20.4052 21.0965 20.6189 21.6462 20.6189C22.1958 20.6189 22.7244 20.4052 23.1223 20.022C23.5161 19.6247 23.7129 19.0061 23.7127 18.1661V0.199219H27.0588L27.0604 18.4973Z" fill="currentColor" />
                            <path d="M30.3076 0.199219H33.6537V23.8013H30.3076V0.199219Z" fill="currentColor" />
                            <path d="M36.9004 0.199219H41.8538C43.7561 0.199219 45.2103 0.735214 46.2163 1.80721C47.2223 2.87921 47.7253 4.37649 47.7251 6.29906V17.3379C47.7251 19.5479 47.1947 21.1776 46.1339 22.2269C45.0731 23.2762 43.5478 23.8011 41.5579 23.8018H36.9004V0.199219ZM40.2462 20.6189H41.788C42.7282 20.6189 43.3952 20.3814 43.7891 19.9063C44.1831 19.4313 44.3799 18.6855 44.3795 17.6688V6.29858C44.3795 5.37058 44.1937 4.65234 43.8219 4.14386C43.4501 3.63538 42.7722 3.3809 41.788 3.38042H40.2462V20.6189Z" fill="currentColor" />
                            <path d="M50.875 0.199219H60.8471V3.38042H54.221V10.3085H59.994V13.4909H54.221V20.4204H60.8471V23.8018H50.875V0.199219Z" fill="currentColor" />
                            <path d="M63.0117 0.199219H67.9646C69.8673 0.199219 71.3216 0.735214 72.3276 1.80721C73.3337 2.87921 73.8366 4.37649 73.8364 6.29906V17.3379C73.8364 19.5479 73.306 21.1776 72.2452 22.2269C71.1844 23.2762 69.6591 23.8011 67.6692 23.8018H63.0117V0.199219ZM66.3575 20.6189H67.8989C68.8387 20.6189 69.5057 20.3814 69.9 19.9063C70.2942 19.4313 70.491 18.6855 70.4904 17.6688V6.29858C70.4904 5.37058 70.3045 4.65234 69.9328 4.14386C69.561 3.63538 68.883 3.3809 67.8989 3.38042H66.3575V20.6189Z" fill="currentColor" />
                            <path d="M83.4082 0.199219H86.7542V10.3095H90.8866V0.199219H94.2327V23.8013H90.8874V13.2924H86.755V23.8008H83.4082V0.199219Z" fill="currentColor" />
                            <path d="M96.4961 0.199219H106.468V3.38042H99.8421V10.3085H105.615V13.4909H99.8421V20.4204H106.468V23.8018H96.4961V0.199219Z" fill="currentColor" />
                            <path d="M107.747 0.199219H113.127C117.063 0.199219 119.031 2.50858 119.031 7.1273C119.062 8.33602 118.844 9.53796 118.392 10.6575C117.928 11.6809 117.136 12.5163 116.145 13.0284L119.753 23.8018H116.21L113.094 13.7244H111.093V23.8018H107.747V0.199219ZM111.093 10.7405H112.996C113.478 10.7607 113.959 10.6759 114.406 10.4919C114.739 10.3414 115.019 10.0931 115.21 9.7793C115.41 9.42734 115.538 9.03838 115.587 8.63546C115.718 7.58989 115.718 6.53174 115.587 5.48618C115.536 5.07396 115.396 4.67805 115.177 4.32625C114.967 4.00401 114.663 3.75513 114.308 3.61345C113.835 3.44175 113.334 3.36298 112.832 3.38138H111.093L111.093 10.7405Z" fill="currentColor" />
                            <path d="M120.639 5.76841C120.622 4.90247 120.79 4.04298 121.131 3.24841C121.43 2.55948 121.872 1.94345 122.427 1.44194C122.956 0.970916 123.568 0.605355 124.232 0.364573C125.534 -0.121524 126.965 -0.121524 128.267 0.364573C128.93 0.605602 129.543 0.971136 130.072 1.44194C130.627 1.9435 131.068 2.55952 131.368 3.24841C131.709 4.04303 131.876 4.90248 131.859 5.76841V18.2321C131.88 19.1034 131.712 19.9686 131.368 20.7677C131.066 21.4503 130.624 22.0605 130.072 22.5581C129.543 23.0291 128.93 23.3947 128.267 23.6355C126.965 24.1215 125.534 24.1215 124.232 23.6355C123.568 23.3949 122.956 23.0293 122.427 22.5581C121.875 22.0606 121.433 21.4504 121.131 20.7677C120.787 19.9687 120.619 19.1034 120.639 18.2321V5.76841ZM123.985 18.2321C123.985 19.0502 124.209 19.6523 124.657 20.0386C125.105 20.4136 125.668 20.6189 126.249 20.6189C126.83 20.6189 127.393 20.4136 127.84 20.0386C128.288 19.6523 128.512 19.0502 128.512 18.2321V5.76841C128.512 4.95065 128.288 4.34833 127.84 3.96145C127.393 3.58678 126.83 3.38175 126.249 3.38175C125.668 3.38175 125.105 3.58678 124.657 3.96145C124.209 4.34833 123.985 4.95065 123.985 5.76841V18.2321Z" fill="currentColor" />
                            <path d="M133.924 0.199219H143.896V3.38042H137.27V10.3085H143.043V13.4909H137.27V20.4204H143.896V23.8018H133.924V0.199219Z" fill="currentColor" />
                            <path d="M156 6.99575H152.654V6.23302C152.672 5.52537 152.484 4.82795 152.112 4.22758C151.752 3.66406 151.145 3.38238 150.292 3.38254C149.898 3.36628 149.507 3.45747 149.16 3.64654C148.878 3.81107 148.641 4.04482 148.471 4.32622C148.3 4.62253 148.184 4.94781 148.127 5.28622C148.06 5.66365 148.027 6.0464 148.029 6.42983C148.025 6.82241 148.042 7.21491 148.078 7.60582C148.102 7.89638 148.185 8.17869 148.324 8.43454C148.467 8.6798 148.664 8.88935 148.898 9.04774C149.222 9.26267 149.568 9.44056 149.931 9.57814L152.49 10.6087C153.142 10.8443 153.752 11.1859 154.295 11.6201C154.742 11.9914 155.105 12.4547 155.361 12.9792C155.625 13.544 155.797 14.1486 155.869 14.7691C155.962 15.5335 156.006 16.3031 156 17.0731C156.007 18.0042 155.908 18.933 155.705 19.8413C155.536 20.6304 155.206 21.3754 154.738 22.0293C154.27 22.6529 153.655 23.1484 152.95 23.471C152.092 23.8478 151.162 24.0289 150.227 24.0014C149.452 24.0075 148.683 23.8607 147.964 23.5694C147.294 23.3048 146.684 22.9074 146.168 22.4008C145.653 21.8941 145.243 21.2883 144.962 20.6191C144.664 19.9179 144.513 19.1615 144.52 18.3981V17.1391H147.865V18.1999C147.859 18.8027 148.05 19.3906 148.406 19.8739C148.767 20.3713 149.374 20.62 150.226 20.6198C150.682 20.6426 151.137 20.5575 151.555 20.3714C151.859 20.2178 152.111 19.9753 152.277 19.6754C152.454 19.3306 152.56 18.9529 152.588 18.5654C152.632 18.1237 152.654 17.6374 152.654 17.1067C152.659 16.5976 152.637 16.0885 152.588 15.5817C152.563 15.2452 152.468 14.9177 152.31 14.6203C152.165 14.3752 151.962 14.1702 151.719 14.0237C151.398 13.8347 151.063 13.6686 150.719 13.5266L148.324 12.5321C146.881 11.9357 145.913 11.1457 145.421 10.1621C144.928 9.17838 144.682 7.94639 144.683 6.46607C144.678 5.61259 144.8 4.7632 145.043 3.94607C145.26 3.19623 145.622 2.49761 146.11 1.89118C146.597 1.30379 147.207 0.833641 147.897 0.515021C148.691 0.157599 149.554 -0.0177907 150.423 0.00142449C151.207 -0.00822744 151.984 0.14996 152.703 0.465582C153.366 0.756624 153.967 1.17298 154.475 1.69222C154.955 2.18364 155.34 2.76296 155.606 3.39934C155.865 4.01248 155.999 4.67213 156 5.33878L156 6.99575Z" fill="currentColor" />
                            <path d="M81.9959 13.7486L81.334 10.3672H93.6599V13.7486H81.9959Z" fill="currentColor" />
                          </g>
                          <defs>
                            <clipPath id="clip0_206_46617">
                              <rect width="156" height="24" fill="currentColor" />
                            </clipPath>
                          </defs>
                        </svg>
                      </a>
                      <span class="gh-text-label gh-text-xxsmall">Index</span>
                    </div>
                  </div>
                </div>
                <div class="gh-site-header--column gh-background-accent">
                <div class="gh-wrap gh-flex" style="--gh-gap: var(--gh-space-large); --gh-place: end; --gh-max-width: none;">
                <div class="gh-flex" style="--gh-min-width: 100%;">
                <div class="gh-flex" style="--gh-place: space-between; --gh-gap: var(--gh-space-small); --gh-min-width: 100%;">
                  <!-- Site header element: Nav -->
                  <nav class="gh-site-header--nav">
                    <ul class="gh-site-header--nav-list gh-flex" role="list">
                      <li><a class="gh-site-header--nav-link" aria-current="page" href="#">Races</a></li>
                      <li><a class="gh-site-header--nav-link" href="#">Coaching</a></li>
                      <li><a class="gh-site-header--nav-link" href="#">Events</a></li>
                    </ul>
                  </nav>
                  <!-- Site header element: Action triggers -->
                  <div class="gh-site-header--actions">
                    <ul class="gh-site-header--actions-list gh-flex" role="list">
                      <li>
                        <button type="button" class="gh-site-header--actions-trigger">
                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.75 18C3.5375 18 3.35938 17.9277 3.21563 17.7831C3.07187 17.6385 3 17.4594 3 17.2456C3 17.0319 3.07187 16.8542 3.21563 16.7125C3.35938 16.5708 3.5375 16.5 3.75 16.5H20.25C20.4625 16.5 20.6406 16.5723 20.7844 16.7169C20.9281 16.8615 21 17.0406 21 17.2544C21 17.4681 20.9281 17.6458 20.7844 17.7875C20.6406 17.9292 20.4625 18 20.25 18H3.75ZM3.75 12.75C3.5375 12.75 3.35938 12.6777 3.21563 12.5331C3.07187 12.3885 3 12.2094 3 11.9956C3 11.7819 3.07187 11.6042 3.21563 11.4625C3.35938 11.3208 3.5375 11.25 3.75 11.25H20.25C20.4625 11.25 20.6406 11.3223 20.7844 11.4669C20.9281 11.6115 21 11.7906 21 12.0044C21 12.2181 20.9281 12.3958 20.7844 12.5375C20.6406 12.6792 20.4625 12.75 20.25 12.75H3.75ZM3.75 7.5C3.5375 7.5 3.35938 7.42771 3.21563 7.28313C3.07187 7.13853 3 6.95936 3 6.74563C3 6.53188 3.07187 6.35417 3.21563 6.2125C3.35938 6.07083 3.5375 6 3.75 6H20.25C20.4625 6 20.6406 6.07229 20.7844 6.21687C20.9281 6.36147 21 6.54064 21 6.75437C21 6.96812 20.9281 7.14583 20.7844 7.2875C20.6406 7.42917 20.4625 7.5 20.25 7.5H3.75Z" fill="currentColor" />
                          </svg>
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- Site header element: Subnav -->
                <!--<nav class="gh-site-header--subnav">
                <ul class="gh-site-header--subnav-list gh-flex" role="list">
                  <li><a class="gh-site-header--subnav-link" aria-current="page" href="#">Personlig coaching</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Träningsprogram</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Företag</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Coacher</a></li>
                </ul>
              </nav>-->
            </div>
            <!-- Site header element: CTA buttons -->
            <div class="gh-site-header--buttons gh-flex">
              <a class="gh-button" data-type="secondary" href="#">Skapa konto</a>
              <a class="gh-button" data-type="outline-light" href="#">Logga in</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Site header element: Media -->
      <div class="gh-site-header--media-wrap">
      <figure class="gh-site-header--media gh-media-filter">
        <img src="/assets/public/media/cover-placeholder.jpg" alt="A runner in sunglasses." loading="lazy">
      </figure>
      <div class="gh-site-header--pattern"></div>
      <div class="gh-site-header--overlay"></div>
      </div>
      <!-- Site header element: Heading -->
      <div class="gh-site-header--heading">
      <div class="gh-text-label">Guided Heroes</div>
        <h1 class="gh-heading-xxlarge">Quam quisque id diam vel quam elementum nisl pretium fusce</h1>
      </div>
      <!-- Site header element: Content -->
      <div class="gh-site-header--content">
        <p class="gh-text-xsmall">Sed cras ornare arcu dui vivamus arcu felis bibendum. Amet purus gravida quis blandit turpis cursus. Ut pharetra sit amet aliquam id diam. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus.</p>
      </div>
    </header>
    data
    [
      {
        "type": "cover",
        "title": "Quam quisque id diam vel quam elementum nisl pretium fusce",
        "tag": "Guided Heroes",
        "pattern": "true",
        "overlay": "true",
        "color": "",
        "text": "Sed cras ornare arcu dui vivamus arcu felis bibendum. Amet purus gravida quis blandit turpis cursus. Ut pharetra sit amet aliquam id diam. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus.",
        "image": {
          "url": "/assets/public/media/cover-placeholder.jpg",
          "alt": "A runner in sunglasses.",
          "loading": "lazy"
        },
        "video": {
          "url": ""
        }
      }
    ]
  • Only text

    preview
    code
    <!-- Component: Site header -->
                <header class="gh-site-header gh-grid gh-@container" data-type="text">
                <!-- Site header element: Navbar -->
                <div class="gh-site-header--navbar gh-flex">
                <div class="gh-site-header--column gh-background-primary">
                  <div class="gh-wrap" style="--gh-max-width: none;">
                    <!-- Site header element: Brand logo -->
                    <div class="gh-site-header--brand gh-flex">
                      <a class="gh-flex" href="#">
                        <svg width="156" height="24" viewBox="0 0 156 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <g clip-path="url(#clip0_206_46617)">
                            <path d="M2.06477 5.76842C2.04776 4.90247 2.21551 4.04298 2.55662 3.24842C2.85558 2.55946 3.29747 1.94341 3.85238 1.44194C4.3813 0.970831 4.99375 0.60526 5.65733 0.364573C6.95925 -0.121524 8.39019 -0.121524 9.69211 0.364573C10.3555 0.605607 10.9679 0.971141 11.4971 1.44194C12.0518 1.94357 12.4937 2.55958 12.7928 3.24842C13.1341 4.04295 13.302 4.90244 13.2852 5.76842V6.96194H9.93721V5.76842C9.93721 4.95114 9.71309 4.34898 9.26486 3.96194C8.81749 3.58727 8.25469 3.38222 7.67366 3.38222C7.09262 3.38222 6.52982 3.58727 6.08245 3.96194C5.63422 4.34882 5.4101 4.95098 5.4101 5.76842V18.2326C5.4101 19.0507 5.63422 19.6528 6.08245 20.0391C6.52964 20.4141 7.09251 20.6194 7.67366 20.6194C8.2548 20.6194 8.81767 20.4141 9.26486 20.0391C9.71277 19.6528 9.93689 19.0507 9.93721 18.2326V13.7904H0.661895L0 10.807H13.2833V18.2323C13.3034 19.1036 13.1354 19.9689 12.7909 20.7679C12.489 21.4505 12.0474 22.0607 11.4952 22.5583C10.9662 23.0293 10.3538 23.3949 9.69021 23.6357C8.38829 24.1218 6.95735 24.1218 5.65543 23.6357C4.99174 23.3952 4.37925 23.0296 3.85048 22.5583C3.29806 22.0609 2.85641 21.4507 2.55472 20.7679C2.2104 19.9689 2.04256 19.1036 2.06287 18.2323L2.06477 5.76842Z" fill="currentColor" />
                            <path d="M27.0604 18.4973C27.0666 19.2377 26.9211 19.9714 26.633 20.6523C26.0782 21.9638 25.0443 23.0086 23.7465 23.5692C23.0824 23.8536 22.3684 24.0002 21.6471 24.0002C20.9259 24.0002 20.2119 23.8536 19.5478 23.5692C18.2498 23.0088 17.2158 21.9639 16.6611 20.6523C16.3728 19.9715 16.2273 19.2377 16.2336 18.4973V0.199219H19.5796V18.1661C19.5796 19.0059 19.7764 19.6246 20.17 20.022C20.568 20.4052 21.0965 20.6189 21.6462 20.6189C22.1958 20.6189 22.7244 20.4052 23.1223 20.022C23.5161 19.6247 23.7129 19.0061 23.7127 18.1661V0.199219H27.0588L27.0604 18.4973Z" fill="currentColor" />
                            <path d="M30.3076 0.199219H33.6537V23.8013H30.3076V0.199219Z" fill="currentColor" />
                            <path d="M36.9004 0.199219H41.8538C43.7561 0.199219 45.2103 0.735214 46.2163 1.80721C47.2223 2.87921 47.7253 4.37649 47.7251 6.29906V17.3379C47.7251 19.5479 47.1947 21.1776 46.1339 22.2269C45.0731 23.2762 43.5478 23.8011 41.5579 23.8018H36.9004V0.199219ZM40.2462 20.6189H41.788C42.7282 20.6189 43.3952 20.3814 43.7891 19.9063C44.1831 19.4313 44.3799 18.6855 44.3795 17.6688V6.29858C44.3795 5.37058 44.1937 4.65234 43.8219 4.14386C43.4501 3.63538 42.7722 3.3809 41.788 3.38042H40.2462V20.6189Z" fill="currentColor" />
                            <path d="M50.875 0.199219H60.8471V3.38042H54.221V10.3085H59.994V13.4909H54.221V20.4204H60.8471V23.8018H50.875V0.199219Z" fill="currentColor" />
                            <path d="M63.0117 0.199219H67.9646C69.8673 0.199219 71.3216 0.735214 72.3276 1.80721C73.3337 2.87921 73.8366 4.37649 73.8364 6.29906V17.3379C73.8364 19.5479 73.306 21.1776 72.2452 22.2269C71.1844 23.2762 69.6591 23.8011 67.6692 23.8018H63.0117V0.199219ZM66.3575 20.6189H67.8989C68.8387 20.6189 69.5057 20.3814 69.9 19.9063C70.2942 19.4313 70.491 18.6855 70.4904 17.6688V6.29858C70.4904 5.37058 70.3045 4.65234 69.9328 4.14386C69.561 3.63538 68.883 3.3809 67.8989 3.38042H66.3575V20.6189Z" fill="currentColor" />
                            <path d="M83.4082 0.199219H86.7542V10.3095H90.8866V0.199219H94.2327V23.8013H90.8874V13.2924H86.755V23.8008H83.4082V0.199219Z" fill="currentColor" />
                            <path d="M96.4961 0.199219H106.468V3.38042H99.8421V10.3085H105.615V13.4909H99.8421V20.4204H106.468V23.8018H96.4961V0.199219Z" fill="currentColor" />
                            <path d="M107.747 0.199219H113.127C117.063 0.199219 119.031 2.50858 119.031 7.1273C119.062 8.33602 118.844 9.53796 118.392 10.6575C117.928 11.6809 117.136 12.5163 116.145 13.0284L119.753 23.8018H116.21L113.094 13.7244H111.093V23.8018H107.747V0.199219ZM111.093 10.7405H112.996C113.478 10.7607 113.959 10.6759 114.406 10.4919C114.739 10.3414 115.019 10.0931 115.21 9.7793C115.41 9.42734 115.538 9.03838 115.587 8.63546C115.718 7.58989 115.718 6.53174 115.587 5.48618C115.536 5.07396 115.396 4.67805 115.177 4.32625C114.967 4.00401 114.663 3.75513 114.308 3.61345C113.835 3.44175 113.334 3.36298 112.832 3.38138H111.093L111.093 10.7405Z" fill="currentColor" />
                            <path d="M120.639 5.76841C120.622 4.90247 120.79 4.04298 121.131 3.24841C121.43 2.55948 121.872 1.94345 122.427 1.44194C122.956 0.970916 123.568 0.605355 124.232 0.364573C125.534 -0.121524 126.965 -0.121524 128.267 0.364573C128.93 0.605602 129.543 0.971136 130.072 1.44194C130.627 1.9435 131.068 2.55952 131.368 3.24841C131.709 4.04303 131.876 4.90248 131.859 5.76841V18.2321C131.88 19.1034 131.712 19.9686 131.368 20.7677C131.066 21.4503 130.624 22.0605 130.072 22.5581C129.543 23.0291 128.93 23.3947 128.267 23.6355C126.965 24.1215 125.534 24.1215 124.232 23.6355C123.568 23.3949 122.956 23.0293 122.427 22.5581C121.875 22.0606 121.433 21.4504 121.131 20.7677C120.787 19.9687 120.619 19.1034 120.639 18.2321V5.76841ZM123.985 18.2321C123.985 19.0502 124.209 19.6523 124.657 20.0386C125.105 20.4136 125.668 20.6189 126.249 20.6189C126.83 20.6189 127.393 20.4136 127.84 20.0386C128.288 19.6523 128.512 19.0502 128.512 18.2321V5.76841C128.512 4.95065 128.288 4.34833 127.84 3.96145C127.393 3.58678 126.83 3.38175 126.249 3.38175C125.668 3.38175 125.105 3.58678 124.657 3.96145C124.209 4.34833 123.985 4.95065 123.985 5.76841V18.2321Z" fill="currentColor" />
                            <path d="M133.924 0.199219H143.896V3.38042H137.27V10.3085H143.043V13.4909H137.27V20.4204H143.896V23.8018H133.924V0.199219Z" fill="currentColor" />
                            <path d="M156 6.99575H152.654V6.23302C152.672 5.52537 152.484 4.82795 152.112 4.22758C151.752 3.66406 151.145 3.38238 150.292 3.38254C149.898 3.36628 149.507 3.45747 149.16 3.64654C148.878 3.81107 148.641 4.04482 148.471 4.32622C148.3 4.62253 148.184 4.94781 148.127 5.28622C148.06 5.66365 148.027 6.0464 148.029 6.42983C148.025 6.82241 148.042 7.21491 148.078 7.60582C148.102 7.89638 148.185 8.17869 148.324 8.43454C148.467 8.6798 148.664 8.88935 148.898 9.04774C149.222 9.26267 149.568 9.44056 149.931 9.57814L152.49 10.6087C153.142 10.8443 153.752 11.1859 154.295 11.6201C154.742 11.9914 155.105 12.4547 155.361 12.9792C155.625 13.544 155.797 14.1486 155.869 14.7691C155.962 15.5335 156.006 16.3031 156 17.0731C156.007 18.0042 155.908 18.933 155.705 19.8413C155.536 20.6304 155.206 21.3754 154.738 22.0293C154.27 22.6529 153.655 23.1484 152.95 23.471C152.092 23.8478 151.162 24.0289 150.227 24.0014C149.452 24.0075 148.683 23.8607 147.964 23.5694C147.294 23.3048 146.684 22.9074 146.168 22.4008C145.653 21.8941 145.243 21.2883 144.962 20.6191C144.664 19.9179 144.513 19.1615 144.52 18.3981V17.1391H147.865V18.1999C147.859 18.8027 148.05 19.3906 148.406 19.8739C148.767 20.3713 149.374 20.62 150.226 20.6198C150.682 20.6426 151.137 20.5575 151.555 20.3714C151.859 20.2178 152.111 19.9753 152.277 19.6754C152.454 19.3306 152.56 18.9529 152.588 18.5654C152.632 18.1237 152.654 17.6374 152.654 17.1067C152.659 16.5976 152.637 16.0885 152.588 15.5817C152.563 15.2452 152.468 14.9177 152.31 14.6203C152.165 14.3752 151.962 14.1702 151.719 14.0237C151.398 13.8347 151.063 13.6686 150.719 13.5266L148.324 12.5321C146.881 11.9357 145.913 11.1457 145.421 10.1621C144.928 9.17838 144.682 7.94639 144.683 6.46607C144.678 5.61259 144.8 4.7632 145.043 3.94607C145.26 3.19623 145.622 2.49761 146.11 1.89118C146.597 1.30379 147.207 0.833641 147.897 0.515021C148.691 0.157599 149.554 -0.0177907 150.423 0.00142449C151.207 -0.00822744 151.984 0.14996 152.703 0.465582C153.366 0.756624 153.967 1.17298 154.475 1.69222C154.955 2.18364 155.34 2.76296 155.606 3.39934C155.865 4.01248 155.999 4.67213 156 5.33878L156 6.99575Z" fill="currentColor" />
                            <path d="M81.9959 13.7486L81.334 10.3672H93.6599V13.7486H81.9959Z" fill="currentColor" />
                          </g>
                          <defs>
                            <clipPath id="clip0_206_46617">
                              <rect width="156" height="24" fill="currentColor" />
                            </clipPath>
                          </defs>
                        </svg>
                      </a>
                      <span class="gh-text-label gh-text-xxsmall">Index</span>
                    </div>
                  </div>
                </div>
                <div class="gh-site-header--column gh-background-accent">
                <div class="gh-wrap gh-flex" style="--gh-gap: var(--gh-space-large); --gh-place: end; --gh-max-width: none;">
                <div class="gh-flex" style="--gh-min-width: 100%;">
                <div class="gh-flex" style="--gh-place: space-between; --gh-gap: var(--gh-space-small); --gh-min-width: 100%;">
                  <!-- Site header element: Nav -->
                  <nav class="gh-site-header--nav">
                    <ul class="gh-site-header--nav-list gh-flex" role="list">
                      <li><a class="gh-site-header--nav-link" aria-current="page" href="#">Races</a></li>
                      <li><a class="gh-site-header--nav-link" href="#">Coaching</a></li>
                      <li><a class="gh-site-header--nav-link" href="#">Events</a></li>
                    </ul>
                  </nav>
                  <!-- Site header element: Action triggers -->
                  <div class="gh-site-header--actions">
                    <ul class="gh-site-header--actions-list gh-flex" role="list">
                      <li>
                        <button type="button" class="gh-site-header--actions-trigger">
                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.75 18C3.5375 18 3.35938 17.9277 3.21563 17.7831C3.07187 17.6385 3 17.4594 3 17.2456C3 17.0319 3.07187 16.8542 3.21563 16.7125C3.35938 16.5708 3.5375 16.5 3.75 16.5H20.25C20.4625 16.5 20.6406 16.5723 20.7844 16.7169C20.9281 16.8615 21 17.0406 21 17.2544C21 17.4681 20.9281 17.6458 20.7844 17.7875C20.6406 17.9292 20.4625 18 20.25 18H3.75ZM3.75 12.75C3.5375 12.75 3.35938 12.6777 3.21563 12.5331C3.07187 12.3885 3 12.2094 3 11.9956C3 11.7819 3.07187 11.6042 3.21563 11.4625C3.35938 11.3208 3.5375 11.25 3.75 11.25H20.25C20.4625 11.25 20.6406 11.3223 20.7844 11.4669C20.9281 11.6115 21 11.7906 21 12.0044C21 12.2181 20.9281 12.3958 20.7844 12.5375C20.6406 12.6792 20.4625 12.75 20.25 12.75H3.75ZM3.75 7.5C3.5375 7.5 3.35938 7.42771 3.21563 7.28313C3.07187 7.13853 3 6.95936 3 6.74563C3 6.53188 3.07187 6.35417 3.21563 6.2125C3.35938 6.07083 3.5375 6 3.75 6H20.25C20.4625 6 20.6406 6.07229 20.7844 6.21687C20.9281 6.36147 21 6.54064 21 6.75437C21 6.96812 20.9281 7.14583 20.7844 7.2875C20.6406 7.42917 20.4625 7.5 20.25 7.5H3.75Z" fill="currentColor" />
                          </svg>
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- Site header element: Subnav -->
                <!--<nav class="gh-site-header--subnav">
                <ul class="gh-site-header--subnav-list gh-flex" role="list">
                  <li><a class="gh-site-header--subnav-link" aria-current="page" href="#">Personlig coaching</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Träningsprogram</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Företag</a></li>
                  <li><a class="gh-site-header--subnav-link" href="#">Coacher</a></li>
                </ul>
              </nav>-->
            </div>
            <!-- Site header element: CTA buttons -->
            <div class="gh-site-header--buttons gh-flex">
              <a class="gh-button" data-type="secondary" href="#">Skapa konto</a>
              <a class="gh-button" data-type="outline-light" href="#">Logga in</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Site header element: Heading -->
      <div class="gh-site-header--heading">
      <div class="gh-text-label">Guided Heroes</div>
        <h1 class="gh-heading-xxlarge">Quam quisque id diam vel quam elementum nisl pretium fusce</h1>
      </div>
    </header>
    data
    [
      {
        "type": "text",
        "title": "Quam quisque id diam vel quam elementum nisl pretium fusce",
        "tag": "Guided Heroes",
        "pattern": "",
        "overlay": "",
        "color": "",
        "text": "",
        "image": {
          "url": "",
          "alt": "",
          "loading": ""
        },
        "video": {
          "url": ""
        }
      }
    ]