Content

<section class="gh-content">
  <div class="gh-wrap gh-flex" style="--gh-direction: column; --gh-gap: var(--gh-space-xlarge);">
    <div class="gh-switch" style="--gh-breakpoint: 50rem; --gh-gap: var(--gh-space-xlarge);">
      <div class="gh-flow" style="--gh-flow: var(--gh-space-medium);">
        <div class="gh-content--preamble">
          <h1 class="gh-heading-xlarge">Vanliga frågor och svar</h1>
        </div>
      </div>
      <div class="gh-grid">
        <div class="gh-content--text">
          <div class="gh-typeset">
            <p>A diam maecenas sed enim. Cursus risus at ultrices mi tempus imperdiet nulla. Id leo in vitae turpis. Diam maecenas sed enim ut sem viverra aliquet eget. Non blandit massa enim nec dui nunc mattis enim ut.</p>
          </div>
          <div id="collapse" class="gh-collapse">
            <details class="gh-collapse--item">
              <summary>
                <h4 class="gh-heading-small">Facilisis gravida neque convallis a cras semper ?</h4>
                <div class="gh-collapse--icon">
                  <span></span>
                  <span></span>
                </div>
              </summary>
              <div class="gh-collapse--panel">
                <div class="gh-typeset">
                  <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
                </div>
              </div>
            </details>
            <details class="gh-collapse--item">
              <summary>
                <h4 class="gh-heading-small">Massa tincidunt dui ut ornare lectus sit amet est praesent semper feugiat nibh?&lt;</h4>
                <div class="gh-collapse--icon">
                  <span></span>
                  <span></span>
                </div>
              </summary>
              <div class="gh-collapse--panel">
                <div class="gh-typeset">
                  <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
                </div>
              </div>
            </details>
            <details class="gh-collapse--item">
              <summary>
                <h4 class="gh-heading-small">Dignissim diam quis enim?</h4>
                <div class="gh-collapse--icon">
                  <span></span>
                  <span></span>
                </div>
              </summary>
              <div class="gh-collapse--panel">
                <div class="gh-typeset">
                  <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
                </div>
              </div>
            </details>
          </div>
        </div>
      </div>
    </div>
    <figure class="gh-content--media">
      <img src="/assets/public/media/content-placeholder.png" alt="An alt text." loading="lazy"  />
    </figure>
  </div>
</section>

[
  {
    "title": "Vanliga frågor och svar",
    "text": "A diam maecenas sed enim. Cursus risus at ultrices mi tempus imperdiet nulla. Id leo in vitae turpis. Diam maecenas sed enim ut sem viverra aliquet eget. Non blandit massa enim nec dui nunc mattis enim ut.",
    "preamble": "",
    "buttons": "",
    "textColor": "",
    "backgroundColor": "",
    "collapse": [
      {
        "title": "Facilisis gravida neque convallis a cras semper ?",
        "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
      },
      {
        "title": "Massa tincidunt dui ut ornare lectus sit amet est praesent semper feugiat nibh?<",
        "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
      },
      {
        "title": "Dignissim diam quis enim?",
        "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
      }
    ],
    "image": {
      "url": "/assets/public/media/content-placeholder.png",
      "loading": "lazy",
      "alt": "An alt text."
    }
  }
]

<section class="gh-content" style=" --gh-background-color: var(--gh-color-white);">
              <div class="gh-wrap gh-flex" style="--gh-direction: column; --gh-gap: var(--gh-space-xlarge);">
              <div class="gh-switch" style="--gh-breakpoint: 50rem; --gh-gap: var(--gh-space-xlarge);">
              <div class="gh-flow" style="--gh-flow: var(--gh-space-medium);">
              <div class="gh-content--preamble">
              <p class="gh-text-medium gh-font-semibold">Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat.</p>
              <div class="gh-flex" style="--gh-gap: var(--gh-space-xsmall);">
                <a class="gh-button" href="#">Skapa konto</a>
                <a class="gh-button" data-icon="true" data-type="outline-dark" href="#collapse">
                Frågor och svar<div class="gh-button--icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9998 15.075C11.8998 15.075 11.8081 15.0583 11.7248 15.025C11.6415 14.9917 11.5581 14.9333 11.4748 14.85L6.5248 9.9C6.3748 9.75 6.2998 9.575 6.2998 9.375C6.2998 9.175 6.3748 9 6.5248 8.85C6.6748 8.7 6.85397 8.625 7.0623 8.625C7.27064 8.625 7.4498 8.7 7.5998 8.85L11.9998 13.25L16.3998 8.85C16.5498 8.7 16.7248 8.625 16.9248 8.625C17.1248 8.625 17.2998 8.7 17.4498 8.85C17.5998 9 17.6748 9.17917 17.6748 9.3875C17.6748 9.59583 17.5998 9.775 17.4498 9.925L12.5248 14.85C12.4415 14.9333 12.3581 14.9917 12.2748 15.025C12.1915 15.0583 12.0998 15.075 11.9998 15.075Z" fill="currentColor" />
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="gh-grid">
        <div class="gh-content--text">
          <div class="gh-typeset">
            <p>A diam maecenas sed enim. Cursus risus at ultrices mi tempus imperdiet nulla. Id leo in vitae turpis. Diam maecenas sed enim ut sem viverra aliquet eget. Non blandit massa enim nec dui nunc mattis enim ut.</p>
          </div>
          <div id="collapse" class="gh-collapse">
            <details class="gh-collapse--item">
              <summary>
                <h4 class="gh-heading-small">Facilisis gravida neque convallis a cras semper ?</h4>
                <div class="gh-collapse--icon">
                  <span></span>
                  <span></span>
                </div>
              </summary>
              <div class="gh-collapse--panel">
                <div class="gh-typeset">
                  <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
                </div>
              </div>
            </details>
            <details class="gh-collapse--item">
              <summary>
                <h4 class="gh-heading-small">Massa tincidunt dui ut ornare lectus sit amet est praesent semper feugiat nibh?&lt;</h4>
                <div class="gh-collapse--icon">
                  <span></span>
                  <span></span>
                </div>
              </summary>
              <div class="gh-collapse--panel">
                <div class="gh-typeset">
                  <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
                </div>
              </div>
            </details>
            <details class="gh-collapse--item">
              <summary>
                <h4 class="gh-heading-small">Dignissim diam quis enim?</h4>
                <div class="gh-collapse--icon">
                  <span></span>
                  <span></span>
                </div>
              </summary>
              <div class="gh-collapse--panel">
                <div class="gh-typeset">
                  <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
                </div>
              </div>
            </details>
          </div>
        </div>
      </div>
    </div>
    <figure class="gh-content--media">
      <img src="/assets/public/media/content-placeholder.png" alt="An alt text." loading="lazy"  />
    </figure>
  </div>
</section>

[
  {
    "title": "",
    "text": "A diam maecenas sed enim. Cursus risus at ultrices mi tempus imperdiet nulla. Id leo in vitae turpis. Diam maecenas sed enim ut sem viverra aliquet eget. Non blandit massa enim nec dui nunc mattis enim ut.",
    "preamble": "Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat.",
    "buttons": "true",
    "textColor": "",
    "backgroundColor": "white",
    "collapse": [
      {
        "title": "Facilisis gravida neque convallis a cras semper ?",
        "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
      },
      {
        "title": "Massa tincidunt dui ut ornare lectus sit amet est praesent semper feugiat nibh?<",
        "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
      },
      {
        "title": "Dignissim diam quis enim?",
        "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
      }
    ],
    "image": {
      "url": "/assets/public/media/content-placeholder.png",
      "loading": "lazy",
      "alt": "An alt text."
    }
  }
]