Quote

The Quote module (M90): a customer quote as a page section, attributed to a person — left-aligned with the author aside, or centred with the author stacked underneath. Only the quote and the name are required; photo, title, link and company logo are optional. Built from the Visual and Button atoms.

Built withVisualButton

Examples

Single

The default: the quote on the left, the author on the right with photo, name, title and company logo, separated from the quote by a hairline. On mobile the author moves under the quote and the hairline goes.

<figure class="kompan-quote">
  <div class="kompan-quote__container">
    <blockquote class="kompan-quote__text">
      <p>Jeg tror, at en af de store fordele var den smarte teknologi og apps. Folk kan komme ud og planlægge deres egen træning.</p>
    </blockquote>
    <figcaption class="kompan-quote__author">
        <div class="kompan-quote__person">
          <div class="kompan-visual kompan-visual_1x1 kompan-visual_rounded kompan-quote__avatar"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/c70f3f1c871c69243c97948646d332910b203aef-800x777.jpg" alt=""></div>
          <div class="kompan-quote__meta">
            <p class="kompan-quote__name">Luke Micali<span class="kompan-quote__title">Senior landskabsarkitekt</span></p>
          </div>
        </div>
        <svg class="kompan-quote__logo" viewBox="0 0 106 25.19" width="106" height="25.19" fill="currentColor" role="img" aria-label="Codecraft"><title>Codecraft</title><g><path d="M0 4.53465C0 3.08559 1.1747 1.91089 2.62376 1.91089H7.87129C9.32035 1.91089 10.495 3.08559 10.495 4.53465V9.68729C10.4952 9.71879 10.4952 9.75042 10.4952 9.78219C10.4952 11.2292 11.6665 12.4026 13.1127 12.4059C13.1148 12.4059 13.1168 12.4059 13.1188 12.4059H18.3663C19.8154 12.4059 20.9901 13.5806 20.9901 15.0297V20.2772C20.9901 21.7263 19.8154 22.901 18.3663 22.901H13.1188C11.6697 22.901 10.495 21.7263 10.495 20.2772V15.0297C10.495 15.0224 10.4951 15.0152 10.4951 15.0079C10.4834 13.5689 9.31324 12.406 7.87147 12.406C7.86468 12.406 7.8579 12.4059 7.85113 12.4059H2.62376C1.1747 12.4059 0 11.2312 0 9.78218V4.53465Z"/></g><g transform="translate(26.24 0)"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M23.1691 17.3173C22.4345 17.3173 21.7785 17.1389 21.2013 16.782C20.6241 16.4252 20.1675 15.9372 19.8317 15.318C19.4959 14.6988 19.3279 13.9956 19.3279 13.2085C19.3279 12.4213 19.4959 11.7234 19.8317 11.1147C20.1675 10.4955 20.6241 10.0127 21.2013 9.66637C21.7785 9.30954 22.4345 9.13113 23.1691 9.13113C23.7569 9.13113 24.2711 9.24133 24.7119 9.46172C25.1527 9.68212 25.5095 9.99172 25.7824 10.3905V5.7937H27.7975V17.1284H26.0028L25.7824 16.0106C25.5305 16.357 25.1947 16.6613 24.7749 16.9237C24.3656 17.1861 23.8303 17.3173 23.1691 17.3173ZM23.5942 15.5541C24.2449 15.5541 24.7749 15.3389 25.1842 14.9087C25.604 14.4679 25.8139 13.9064 25.8139 13.2242C25.8139 12.542 25.604 11.9858 25.1842 11.5555C24.7749 11.1147 24.2449 10.8943 23.5942 10.8943C22.954 10.8943 22.424 11.1094 22.0042 11.5397C21.5844 11.97 21.3745 12.5263 21.3745 13.2085C21.3745 13.8906 21.5844 14.4521 22.0042 14.8929C22.424 15.3337 22.954 15.5541 23.5942 15.5541Z"/><path d="M2.48733 16.6089C3.28495 17.0811 4.24 17.3173 5.35248 17.3173C6.67485 17.3173 7.75584 16.9972 8.59545 16.357C9.44554 15.7168 9.97554 14.8299 10.1854 13.6965H7.96574C7.82931 14.2632 7.53545 14.7092 7.08416 15.0346C6.64337 15.3494 6.05564 15.5069 5.32099 15.5069C4.30297 15.5069 3.50535 15.1658 2.92812 14.4836C2.35089 13.7909 2.06228 12.8411 2.06228 11.6342C2.06228 10.4273 2.35089 9.47746 2.92812 8.78479C3.50535 8.09212 4.30297 7.74578 5.32099 7.74578C6.05564 7.74578 6.64337 7.91895 7.08416 8.26529C7.53545 8.60113 7.82931 9.06816 7.96574 9.66637H10.1854C9.97554 8.48043 9.44554 7.56212 8.59545 6.91142C7.75584 6.25024 6.67485 5.91964 5.35248 5.91964C4.24 5.91964 3.28495 6.16103 2.48733 6.6438C1.6897 7.12657 1.07574 7.79826 0.645446 8.65885C0.215148 9.51944 0 10.5112 0 11.6342C0 12.7572 0.215148 13.7489 0.645446 14.6095C1.07574 15.4596 1.6897 16.1261 2.48733 16.6089Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.6776 16.7978C13.2863 17.1441 13.9685 17.3173 14.7241 17.3173C15.4693 17.3173 16.1462 17.1441 16.7549 16.7978C17.3636 16.4514 17.8411 15.9739 18.1875 15.3652C18.5443 14.746 18.7227 14.0323 18.7227 13.2242C18.7227 12.4161 18.5443 11.7077 18.1875 11.0989C17.8411 10.4797 17.3636 9.99697 16.7549 9.65063C16.1567 9.3043 15.485 9.13113 14.7398 9.13113C13.9842 9.13113 13.302 9.3043 12.6933 9.65063C12.0951 9.99697 11.6176 10.4797 11.2607 11.0989C10.9039 11.7077 10.7255 12.4161 10.7255 13.2242C10.7255 14.0323 10.8987 14.746 11.245 15.3652C11.6018 15.9739 12.0794 16.4514 12.6776 16.7978ZM16.0937 14.9874C15.7054 15.3757 15.2489 15.5698 14.7241 15.5698C14.1994 15.5698 13.7428 15.3757 13.3545 14.9874C12.9767 14.5886 12.7878 14.0008 12.7878 13.2242C12.7878 12.4476 12.9767 11.8651 13.3545 11.4768C13.7428 11.078 14.2046 10.8786 14.7398 10.8786C15.2541 10.8786 15.7054 11.078 16.0937 11.4768C16.482 11.8651 16.6762 12.4476 16.6762 13.2242C16.6762 14.0008 16.482 14.5886 16.0937 14.9874Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M30.605 16.8135C31.2138 17.1493 31.9117 17.3173 32.6988 17.3173C33.3285 17.3173 33.89 17.2018 34.3833 16.9709C34.887 16.74 35.3068 16.4252 35.6427 16.0264C35.989 15.6171 36.2356 15.1658 36.3826 14.6725H34.336C34.1996 14.9664 33.9897 15.2078 33.7063 15.3967C33.4335 15.5751 33.0924 15.6643 32.6831 15.6643C32.1373 15.6643 31.6703 15.4911 31.282 15.1448C30.9041 14.7985 30.6942 14.3209 30.6523 13.7122H36.5872C36.5977 13.5758 36.603 13.4446 36.603 13.3187C36.6135 13.1927 36.6187 13.072 36.6187 12.9566C36.6187 12.2429 36.4508 11.5975 36.1149 11.0202C35.7896 10.4325 35.3331 9.97073 34.7453 9.63489C34.1576 9.29905 33.4807 9.13113 32.7145 9.13113C31.8959 9.13113 31.1823 9.30954 30.5736 9.66637C29.9753 10.0127 29.5031 10.5007 29.1567 11.1304C28.8209 11.7601 28.653 12.479 28.653 13.2872C28.653 14.0848 28.8261 14.788 29.1725 15.3967C29.5188 16.0054 29.9963 16.4777 30.605 16.8135ZM31.4079 11.1934C31.7857 10.91 32.2213 10.7684 32.7145 10.7684C33.2288 10.7684 33.6591 10.9205 34.0054 11.2249C34.3518 11.5292 34.5407 11.9386 34.5722 12.4528H30.6838C30.7887 11.8861 31.0301 11.4663 31.4079 11.1934Z"/><path d="M41.1944 17.3173C40.3968 17.3173 39.6936 17.1441 39.0849 16.7978C38.4762 16.4514 37.9934 15.9687 37.6366 15.3494C37.2902 14.7302 37.1171 14.0218 37.1171 13.2242C37.1171 12.4266 37.2902 11.7182 37.6366 11.0989C37.9934 10.4797 38.4762 9.99697 39.0849 9.65063C39.6936 9.3043 40.3968 9.13113 41.1944 9.13113C42.1914 9.13113 43.031 9.3935 43.7132 9.91826C44.3954 10.4325 44.8309 11.1462 45.0198 12.0592H42.8946C42.7896 11.6814 42.5797 11.3876 42.2649 11.1777C41.9605 10.9573 41.5984 10.8471 41.1786 10.8471C40.6224 10.8471 40.1501 11.057 39.7618 11.4768C39.3735 11.8966 39.1793 12.479 39.1793 13.2242C39.1793 13.9693 39.3735 14.5518 39.7618 14.9716C40.1501 15.3914 40.6224 15.6013 41.1786 15.6013C41.5984 15.6013 41.9605 15.4964 42.2649 15.2865C42.5797 15.0766 42.7896 14.7775 42.8946 14.3891H45.0198C44.8309 15.2707 44.3954 15.9791 43.7132 16.5144C43.031 17.0496 42.1914 17.3173 41.1944 17.3173Z"/><path d="M47.8473 10.7841L47.6584 9.32004H45.8638V17.1284H47.8788V13.5705C47.8788 12.9723 47.9733 12.5053 48.1622 12.1694C48.3616 11.8336 48.6345 11.5975 48.9808 11.461C49.3271 11.3246 49.7207 11.2564 50.1615 11.2564H50.7282V9.13113C50.067 9.13113 49.4898 9.28331 48.9965 9.58766C48.5138 9.88152 48.1307 10.2803 47.8473 10.7841Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M53.8529 17.3173C53.1812 17.3173 52.6302 17.2123 52.1999 17.0024C51.7696 16.782 51.4495 16.4934 51.2396 16.1366C51.0297 15.7797 50.9248 15.3862 50.9248 14.9559C50.9248 14.2317 51.2081 13.644 51.7749 13.1927C52.3416 12.7414 53.1917 12.5158 54.3252 12.5158H56.3087V12.3269C56.3087 11.7916 56.1565 11.3981 55.8522 11.1462C55.5478 10.8943 55.17 10.7684 54.7187 10.7684C54.3094 10.7684 53.9526 10.8681 53.6482 11.0675C53.3439 11.2564 53.155 11.5397 53.0815 11.9176H51.1137C51.1661 11.3508 51.3551 10.8576 51.6804 10.4378C52.0162 10.018 52.4465 9.69786 52.9713 9.47746C53.4961 9.24657 54.0838 9.13113 54.7345 9.13113C55.8469 9.13113 56.7233 9.40925 57.3635 9.96548C58.0037 10.5217 58.3238 11.3089 58.3238 12.3269V17.1284H56.6078L56.4189 15.8689C56.188 16.2888 55.8627 16.6351 55.4429 16.908C55.0336 17.1808 54.5036 17.3173 53.8529 17.3173ZM54.3094 15.743C54.8866 15.743 55.3327 15.5541 55.6475 15.1763C55.9729 14.7985 56.1775 14.3314 56.2615 13.7752H54.5456C54.0103 13.7752 53.6272 13.8749 53.3963 14.0743C53.1655 14.2632 53.05 14.4993 53.05 14.7827C53.05 15.0871 53.1655 15.3232 53.3963 15.4911C53.6272 15.659 53.9316 15.743 54.3094 15.743Z"/><path d="M60.3726 6.39192C59.9004 6.79073 59.6642 7.46241 59.6642 8.40697V9.32004H58.5937V11.0045H59.6642V17.1284H61.6793V11.0045H64.7865V14.4049C64.7865 15.4229 65.0331 16.1313 65.5264 16.5301C66.0196 16.9289 66.6756 17.1284 67.4942 17.1284H68.8638V15.4124H67.8878C67.4889 15.4124 67.2056 15.3442 67.0377 15.2078C66.8802 15.0608 66.8015 14.7985 66.8015 14.4206V11.0045H68.911V9.32004H66.8015V7.22628H65.0226L64.7865 9.32004H61.6793V8.40697C61.6793 8.08162 61.7527 7.85073 61.8997 7.71429C62.0466 7.57786 62.2932 7.50964 62.6396 7.50964H63.1906V5.7937H62.3247C61.5061 5.7937 60.8554 5.99311 60.3726 6.39192Z"/><path d="M69.5234 17.7266V19.6472H79.5934V17.7266H69.5234Z"/></g></g></svg>
      </figcaption>
  </div>
</figure>

Single, minimal

Only the quote and the name are required — everything else in the author block is optional.

<figure class="kompan-quote">
  <div class="kompan-quote__container">
    <blockquote class="kompan-quote__text">
      <p>Tanken var at inddrage slottet og Porvoos historie i parkens tema</p>
    </blockquote>
    <figcaption class="kompan-quote__author">
        <div class="kompan-quote__person">
          <div class="kompan-quote__meta">
            <p class="kompan-quote__name">Mikko Kaunisto</p>
          </div>
        </div>
      </figcaption>
  </div>
</figure>

Single, with link

The optional link (Button, link-dark, sm) sits under the name and title and points at the reference the quote comes from.

<figure class="kompan-quote">
  <div class="kompan-quote__container">
    <blockquote class="kompan-quote__text">
      <p>Jeg tror, at en af de store fordele var den smarte teknologi og apps. Folk kan komme ud og planlægge deres egen træning.</p>
    </blockquote>
    <figcaption class="kompan-quote__author">
        <div class="kompan-quote__person">
          <div class="kompan-visual kompan-visual_1x1 kompan-visual_rounded kompan-quote__avatar"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/c70f3f1c871c69243c97948646d332910b203aef-800x777.jpg" alt=""></div>
          <div class="kompan-quote__meta">
            <p class="kompan-quote__name">Luke Micali<span class="kompan-quote__title">Senior landskabsarkitekt</span></p>
            <a class="kompan-button kompan-button_link-dark kompan-button_sm kompan-quote__link" href="#">Se reference<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          </div>
        </div>
        <svg class="kompan-quote__logo" viewBox="0 0 106 25.19" width="106" height="25.19" fill="currentColor" role="img" aria-label="Codecraft"><title>Codecraft</title><g><path d="M0 4.53465C0 3.08559 1.1747 1.91089 2.62376 1.91089H7.87129C9.32035 1.91089 10.495 3.08559 10.495 4.53465V9.68729C10.4952 9.71879 10.4952 9.75042 10.4952 9.78219C10.4952 11.2292 11.6665 12.4026 13.1127 12.4059C13.1148 12.4059 13.1168 12.4059 13.1188 12.4059H18.3663C19.8154 12.4059 20.9901 13.5806 20.9901 15.0297V20.2772C20.9901 21.7263 19.8154 22.901 18.3663 22.901H13.1188C11.6697 22.901 10.495 21.7263 10.495 20.2772V15.0297C10.495 15.0224 10.4951 15.0152 10.4951 15.0079C10.4834 13.5689 9.31324 12.406 7.87147 12.406C7.86468 12.406 7.8579 12.4059 7.85113 12.4059H2.62376C1.1747 12.4059 0 11.2312 0 9.78218V4.53465Z"/></g><g transform="translate(26.24 0)"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M23.1691 17.3173C22.4345 17.3173 21.7785 17.1389 21.2013 16.782C20.6241 16.4252 20.1675 15.9372 19.8317 15.318C19.4959 14.6988 19.3279 13.9956 19.3279 13.2085C19.3279 12.4213 19.4959 11.7234 19.8317 11.1147C20.1675 10.4955 20.6241 10.0127 21.2013 9.66637C21.7785 9.30954 22.4345 9.13113 23.1691 9.13113C23.7569 9.13113 24.2711 9.24133 24.7119 9.46172C25.1527 9.68212 25.5095 9.99172 25.7824 10.3905V5.7937H27.7975V17.1284H26.0028L25.7824 16.0106C25.5305 16.357 25.1947 16.6613 24.7749 16.9237C24.3656 17.1861 23.8303 17.3173 23.1691 17.3173ZM23.5942 15.5541C24.2449 15.5541 24.7749 15.3389 25.1842 14.9087C25.604 14.4679 25.8139 13.9064 25.8139 13.2242C25.8139 12.542 25.604 11.9858 25.1842 11.5555C24.7749 11.1147 24.2449 10.8943 23.5942 10.8943C22.954 10.8943 22.424 11.1094 22.0042 11.5397C21.5844 11.97 21.3745 12.5263 21.3745 13.2085C21.3745 13.8906 21.5844 14.4521 22.0042 14.8929C22.424 15.3337 22.954 15.5541 23.5942 15.5541Z"/><path d="M2.48733 16.6089C3.28495 17.0811 4.24 17.3173 5.35248 17.3173C6.67485 17.3173 7.75584 16.9972 8.59545 16.357C9.44554 15.7168 9.97554 14.8299 10.1854 13.6965H7.96574C7.82931 14.2632 7.53545 14.7092 7.08416 15.0346C6.64337 15.3494 6.05564 15.5069 5.32099 15.5069C4.30297 15.5069 3.50535 15.1658 2.92812 14.4836C2.35089 13.7909 2.06228 12.8411 2.06228 11.6342C2.06228 10.4273 2.35089 9.47746 2.92812 8.78479C3.50535 8.09212 4.30297 7.74578 5.32099 7.74578C6.05564 7.74578 6.64337 7.91895 7.08416 8.26529C7.53545 8.60113 7.82931 9.06816 7.96574 9.66637H10.1854C9.97554 8.48043 9.44554 7.56212 8.59545 6.91142C7.75584 6.25024 6.67485 5.91964 5.35248 5.91964C4.24 5.91964 3.28495 6.16103 2.48733 6.6438C1.6897 7.12657 1.07574 7.79826 0.645446 8.65885C0.215148 9.51944 0 10.5112 0 11.6342C0 12.7572 0.215148 13.7489 0.645446 14.6095C1.07574 15.4596 1.6897 16.1261 2.48733 16.6089Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.6776 16.7978C13.2863 17.1441 13.9685 17.3173 14.7241 17.3173C15.4693 17.3173 16.1462 17.1441 16.7549 16.7978C17.3636 16.4514 17.8411 15.9739 18.1875 15.3652C18.5443 14.746 18.7227 14.0323 18.7227 13.2242C18.7227 12.4161 18.5443 11.7077 18.1875 11.0989C17.8411 10.4797 17.3636 9.99697 16.7549 9.65063C16.1567 9.3043 15.485 9.13113 14.7398 9.13113C13.9842 9.13113 13.302 9.3043 12.6933 9.65063C12.0951 9.99697 11.6176 10.4797 11.2607 11.0989C10.9039 11.7077 10.7255 12.4161 10.7255 13.2242C10.7255 14.0323 10.8987 14.746 11.245 15.3652C11.6018 15.9739 12.0794 16.4514 12.6776 16.7978ZM16.0937 14.9874C15.7054 15.3757 15.2489 15.5698 14.7241 15.5698C14.1994 15.5698 13.7428 15.3757 13.3545 14.9874C12.9767 14.5886 12.7878 14.0008 12.7878 13.2242C12.7878 12.4476 12.9767 11.8651 13.3545 11.4768C13.7428 11.078 14.2046 10.8786 14.7398 10.8786C15.2541 10.8786 15.7054 11.078 16.0937 11.4768C16.482 11.8651 16.6762 12.4476 16.6762 13.2242C16.6762 14.0008 16.482 14.5886 16.0937 14.9874Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M30.605 16.8135C31.2138 17.1493 31.9117 17.3173 32.6988 17.3173C33.3285 17.3173 33.89 17.2018 34.3833 16.9709C34.887 16.74 35.3068 16.4252 35.6427 16.0264C35.989 15.6171 36.2356 15.1658 36.3826 14.6725H34.336C34.1996 14.9664 33.9897 15.2078 33.7063 15.3967C33.4335 15.5751 33.0924 15.6643 32.6831 15.6643C32.1373 15.6643 31.6703 15.4911 31.282 15.1448C30.9041 14.7985 30.6942 14.3209 30.6523 13.7122H36.5872C36.5977 13.5758 36.603 13.4446 36.603 13.3187C36.6135 13.1927 36.6187 13.072 36.6187 12.9566C36.6187 12.2429 36.4508 11.5975 36.1149 11.0202C35.7896 10.4325 35.3331 9.97073 34.7453 9.63489C34.1576 9.29905 33.4807 9.13113 32.7145 9.13113C31.8959 9.13113 31.1823 9.30954 30.5736 9.66637C29.9753 10.0127 29.5031 10.5007 29.1567 11.1304C28.8209 11.7601 28.653 12.479 28.653 13.2872C28.653 14.0848 28.8261 14.788 29.1725 15.3967C29.5188 16.0054 29.9963 16.4777 30.605 16.8135ZM31.4079 11.1934C31.7857 10.91 32.2213 10.7684 32.7145 10.7684C33.2288 10.7684 33.6591 10.9205 34.0054 11.2249C34.3518 11.5292 34.5407 11.9386 34.5722 12.4528H30.6838C30.7887 11.8861 31.0301 11.4663 31.4079 11.1934Z"/><path d="M41.1944 17.3173C40.3968 17.3173 39.6936 17.1441 39.0849 16.7978C38.4762 16.4514 37.9934 15.9687 37.6366 15.3494C37.2902 14.7302 37.1171 14.0218 37.1171 13.2242C37.1171 12.4266 37.2902 11.7182 37.6366 11.0989C37.9934 10.4797 38.4762 9.99697 39.0849 9.65063C39.6936 9.3043 40.3968 9.13113 41.1944 9.13113C42.1914 9.13113 43.031 9.3935 43.7132 9.91826C44.3954 10.4325 44.8309 11.1462 45.0198 12.0592H42.8946C42.7896 11.6814 42.5797 11.3876 42.2649 11.1777C41.9605 10.9573 41.5984 10.8471 41.1786 10.8471C40.6224 10.8471 40.1501 11.057 39.7618 11.4768C39.3735 11.8966 39.1793 12.479 39.1793 13.2242C39.1793 13.9693 39.3735 14.5518 39.7618 14.9716C40.1501 15.3914 40.6224 15.6013 41.1786 15.6013C41.5984 15.6013 41.9605 15.4964 42.2649 15.2865C42.5797 15.0766 42.7896 14.7775 42.8946 14.3891H45.0198C44.8309 15.2707 44.3954 15.9791 43.7132 16.5144C43.031 17.0496 42.1914 17.3173 41.1944 17.3173Z"/><path d="M47.8473 10.7841L47.6584 9.32004H45.8638V17.1284H47.8788V13.5705C47.8788 12.9723 47.9733 12.5053 48.1622 12.1694C48.3616 11.8336 48.6345 11.5975 48.9808 11.461C49.3271 11.3246 49.7207 11.2564 50.1615 11.2564H50.7282V9.13113C50.067 9.13113 49.4898 9.28331 48.9965 9.58766C48.5138 9.88152 48.1307 10.2803 47.8473 10.7841Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M53.8529 17.3173C53.1812 17.3173 52.6302 17.2123 52.1999 17.0024C51.7696 16.782 51.4495 16.4934 51.2396 16.1366C51.0297 15.7797 50.9248 15.3862 50.9248 14.9559C50.9248 14.2317 51.2081 13.644 51.7749 13.1927C52.3416 12.7414 53.1917 12.5158 54.3252 12.5158H56.3087V12.3269C56.3087 11.7916 56.1565 11.3981 55.8522 11.1462C55.5478 10.8943 55.17 10.7684 54.7187 10.7684C54.3094 10.7684 53.9526 10.8681 53.6482 11.0675C53.3439 11.2564 53.155 11.5397 53.0815 11.9176H51.1137C51.1661 11.3508 51.3551 10.8576 51.6804 10.4378C52.0162 10.018 52.4465 9.69786 52.9713 9.47746C53.4961 9.24657 54.0838 9.13113 54.7345 9.13113C55.8469 9.13113 56.7233 9.40925 57.3635 9.96548C58.0037 10.5217 58.3238 11.3089 58.3238 12.3269V17.1284H56.6078L56.4189 15.8689C56.188 16.2888 55.8627 16.6351 55.4429 16.908C55.0336 17.1808 54.5036 17.3173 53.8529 17.3173ZM54.3094 15.743C54.8866 15.743 55.3327 15.5541 55.6475 15.1763C55.9729 14.7985 56.1775 14.3314 56.2615 13.7752H54.5456C54.0103 13.7752 53.6272 13.8749 53.3963 14.0743C53.1655 14.2632 53.05 14.4993 53.05 14.7827C53.05 15.0871 53.1655 15.3232 53.3963 15.4911C53.6272 15.659 53.9316 15.743 54.3094 15.743Z"/><path d="M60.3726 6.39192C59.9004 6.79073 59.6642 7.46241 59.6642 8.40697V9.32004H58.5937V11.0045H59.6642V17.1284H61.6793V11.0045H64.7865V14.4049C64.7865 15.4229 65.0331 16.1313 65.5264 16.5301C66.0196 16.9289 66.6756 17.1284 67.4942 17.1284H68.8638V15.4124H67.8878C67.4889 15.4124 67.2056 15.3442 67.0377 15.2078C66.8802 15.0608 66.8015 14.7985 66.8015 14.4206V11.0045H68.911V9.32004H66.8015V7.22628H65.0226L64.7865 9.32004H61.6793V8.40697C61.6793 8.08162 61.7527 7.85073 61.8997 7.71429C62.0466 7.57786 62.2932 7.50964 62.6396 7.50964H63.1906V5.7937H62.3247C61.5061 5.7937 60.8554 5.99311 60.3726 6.39192Z"/><path d="M69.5234 17.7266V19.6472H79.5934V17.7266H69.5234Z"/></g></g></svg>
      </figcaption>
  </div>
</figure>

Center

The quote centred in the 720px paragraph column, the author stacked underneath with name and title on one line. Figma shows no company logo in this layout.

<figure class="kompan-quote kompan-quote_center">
  <div class="kompan-quote__container">
    <blockquote class="kompan-quote__text">
      <p>Jeg tror, at en af de store fordele var den smarte teknologi og apps. Folk kan komme ud og planlægge deres egen træning.</p>
    </blockquote>
    <figcaption class="kompan-quote__author">
        <div class="kompan-quote__person">
          <div class="kompan-visual kompan-visual_1x1 kompan-visual_rounded kompan-quote__avatar"><img src="https://cdn.sanity.io/images/aqjgxzv4/production/c70f3f1c871c69243c97948646d332910b203aef-800x777.jpg" alt=""></div>
          <div class="kompan-quote__meta">
            <p class="kompan-quote__name">Luke Micali<span class="kompan-quote__title">Senior landskabsarkitekt</span></p>
          </div>
        </div>
      </figcaption>
  </div>
</figure>

Center, minimal

Centred, name and title only.

<figure class="kompan-quote kompan-quote_center">
  <div class="kompan-quote__container">
    <blockquote class="kompan-quote__text">
      <p>Tanken var at inddrage slottet og Porvoos historie i parkens tema</p>
    </blockquote>
    <figcaption class="kompan-quote__author">
        <div class="kompan-quote__person">
          <div class="kompan-quote__meta">
            <p class="kompan-quote__name">Mikko Kaunisto<span class="kompan-quote__title">Gartner – Porvoo Kommune</span></p>
          </div>
        </div>
      </figcaption>
  </div>
</figure>

In context

How the module reads in a customer case: between two text blocks, as on the "Customer Case" page in Figma. The text blocks are a stand-in for the Rich text module.

<div class="demo-text">
  <h2>Porvoo slotspark</h2>
  <p>Parken ligger ved foden af slotsbakken, og temaet blev valgt sammen med kommunens gartnere og de lokale skoler.</p>
</div>
<figure class="kompan-quote">
  <div class="kompan-quote__container">
    <blockquote class="kompan-quote__text">
      <p>Tanken var at inddrage slottet og Porvoos historie i parkens tema</p>
    </blockquote>
    <figcaption class="kompan-quote__author">
        <div class="kompan-quote__person">
          <div class="kompan-quote__meta">
            <p class="kompan-quote__name">Mikko Kaunisto<span class="kompan-quote__title">Gartner – Porvoo Kommune</span></p>
          </div>
        </div>
        <svg class="kompan-quote__logo" viewBox="0 0 106 25.19" width="106" height="25.19" fill="currentColor" role="img" aria-label="Codecraft"><title>Codecraft</title><g><path d="M0 4.53465C0 3.08559 1.1747 1.91089 2.62376 1.91089H7.87129C9.32035 1.91089 10.495 3.08559 10.495 4.53465V9.68729C10.4952 9.71879 10.4952 9.75042 10.4952 9.78219C10.4952 11.2292 11.6665 12.4026 13.1127 12.4059C13.1148 12.4059 13.1168 12.4059 13.1188 12.4059H18.3663C19.8154 12.4059 20.9901 13.5806 20.9901 15.0297V20.2772C20.9901 21.7263 19.8154 22.901 18.3663 22.901H13.1188C11.6697 22.901 10.495 21.7263 10.495 20.2772V15.0297C10.495 15.0224 10.4951 15.0152 10.4951 15.0079C10.4834 13.5689 9.31324 12.406 7.87147 12.406C7.86468 12.406 7.8579 12.4059 7.85113 12.4059H2.62376C1.1747 12.4059 0 11.2312 0 9.78218V4.53465Z"/></g><g transform="translate(26.24 0)"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M23.1691 17.3173C22.4345 17.3173 21.7785 17.1389 21.2013 16.782C20.6241 16.4252 20.1675 15.9372 19.8317 15.318C19.4959 14.6988 19.3279 13.9956 19.3279 13.2085C19.3279 12.4213 19.4959 11.7234 19.8317 11.1147C20.1675 10.4955 20.6241 10.0127 21.2013 9.66637C21.7785 9.30954 22.4345 9.13113 23.1691 9.13113C23.7569 9.13113 24.2711 9.24133 24.7119 9.46172C25.1527 9.68212 25.5095 9.99172 25.7824 10.3905V5.7937H27.7975V17.1284H26.0028L25.7824 16.0106C25.5305 16.357 25.1947 16.6613 24.7749 16.9237C24.3656 17.1861 23.8303 17.3173 23.1691 17.3173ZM23.5942 15.5541C24.2449 15.5541 24.7749 15.3389 25.1842 14.9087C25.604 14.4679 25.8139 13.9064 25.8139 13.2242C25.8139 12.542 25.604 11.9858 25.1842 11.5555C24.7749 11.1147 24.2449 10.8943 23.5942 10.8943C22.954 10.8943 22.424 11.1094 22.0042 11.5397C21.5844 11.97 21.3745 12.5263 21.3745 13.2085C21.3745 13.8906 21.5844 14.4521 22.0042 14.8929C22.424 15.3337 22.954 15.5541 23.5942 15.5541Z"/><path d="M2.48733 16.6089C3.28495 17.0811 4.24 17.3173 5.35248 17.3173C6.67485 17.3173 7.75584 16.9972 8.59545 16.357C9.44554 15.7168 9.97554 14.8299 10.1854 13.6965H7.96574C7.82931 14.2632 7.53545 14.7092 7.08416 15.0346C6.64337 15.3494 6.05564 15.5069 5.32099 15.5069C4.30297 15.5069 3.50535 15.1658 2.92812 14.4836C2.35089 13.7909 2.06228 12.8411 2.06228 11.6342C2.06228 10.4273 2.35089 9.47746 2.92812 8.78479C3.50535 8.09212 4.30297 7.74578 5.32099 7.74578C6.05564 7.74578 6.64337 7.91895 7.08416 8.26529C7.53545 8.60113 7.82931 9.06816 7.96574 9.66637H10.1854C9.97554 8.48043 9.44554 7.56212 8.59545 6.91142C7.75584 6.25024 6.67485 5.91964 5.35248 5.91964C4.24 5.91964 3.28495 6.16103 2.48733 6.6438C1.6897 7.12657 1.07574 7.79826 0.645446 8.65885C0.215148 9.51944 0 10.5112 0 11.6342C0 12.7572 0.215148 13.7489 0.645446 14.6095C1.07574 15.4596 1.6897 16.1261 2.48733 16.6089Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.6776 16.7978C13.2863 17.1441 13.9685 17.3173 14.7241 17.3173C15.4693 17.3173 16.1462 17.1441 16.7549 16.7978C17.3636 16.4514 17.8411 15.9739 18.1875 15.3652C18.5443 14.746 18.7227 14.0323 18.7227 13.2242C18.7227 12.4161 18.5443 11.7077 18.1875 11.0989C17.8411 10.4797 17.3636 9.99697 16.7549 9.65063C16.1567 9.3043 15.485 9.13113 14.7398 9.13113C13.9842 9.13113 13.302 9.3043 12.6933 9.65063C12.0951 9.99697 11.6176 10.4797 11.2607 11.0989C10.9039 11.7077 10.7255 12.4161 10.7255 13.2242C10.7255 14.0323 10.8987 14.746 11.245 15.3652C11.6018 15.9739 12.0794 16.4514 12.6776 16.7978ZM16.0937 14.9874C15.7054 15.3757 15.2489 15.5698 14.7241 15.5698C14.1994 15.5698 13.7428 15.3757 13.3545 14.9874C12.9767 14.5886 12.7878 14.0008 12.7878 13.2242C12.7878 12.4476 12.9767 11.8651 13.3545 11.4768C13.7428 11.078 14.2046 10.8786 14.7398 10.8786C15.2541 10.8786 15.7054 11.078 16.0937 11.4768C16.482 11.8651 16.6762 12.4476 16.6762 13.2242C16.6762 14.0008 16.482 14.5886 16.0937 14.9874Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M30.605 16.8135C31.2138 17.1493 31.9117 17.3173 32.6988 17.3173C33.3285 17.3173 33.89 17.2018 34.3833 16.9709C34.887 16.74 35.3068 16.4252 35.6427 16.0264C35.989 15.6171 36.2356 15.1658 36.3826 14.6725H34.336C34.1996 14.9664 33.9897 15.2078 33.7063 15.3967C33.4335 15.5751 33.0924 15.6643 32.6831 15.6643C32.1373 15.6643 31.6703 15.4911 31.282 15.1448C30.9041 14.7985 30.6942 14.3209 30.6523 13.7122H36.5872C36.5977 13.5758 36.603 13.4446 36.603 13.3187C36.6135 13.1927 36.6187 13.072 36.6187 12.9566C36.6187 12.2429 36.4508 11.5975 36.1149 11.0202C35.7896 10.4325 35.3331 9.97073 34.7453 9.63489C34.1576 9.29905 33.4807 9.13113 32.7145 9.13113C31.8959 9.13113 31.1823 9.30954 30.5736 9.66637C29.9753 10.0127 29.5031 10.5007 29.1567 11.1304C28.8209 11.7601 28.653 12.479 28.653 13.2872C28.653 14.0848 28.8261 14.788 29.1725 15.3967C29.5188 16.0054 29.9963 16.4777 30.605 16.8135ZM31.4079 11.1934C31.7857 10.91 32.2213 10.7684 32.7145 10.7684C33.2288 10.7684 33.6591 10.9205 34.0054 11.2249C34.3518 11.5292 34.5407 11.9386 34.5722 12.4528H30.6838C30.7887 11.8861 31.0301 11.4663 31.4079 11.1934Z"/><path d="M41.1944 17.3173C40.3968 17.3173 39.6936 17.1441 39.0849 16.7978C38.4762 16.4514 37.9934 15.9687 37.6366 15.3494C37.2902 14.7302 37.1171 14.0218 37.1171 13.2242C37.1171 12.4266 37.2902 11.7182 37.6366 11.0989C37.9934 10.4797 38.4762 9.99697 39.0849 9.65063C39.6936 9.3043 40.3968 9.13113 41.1944 9.13113C42.1914 9.13113 43.031 9.3935 43.7132 9.91826C44.3954 10.4325 44.8309 11.1462 45.0198 12.0592H42.8946C42.7896 11.6814 42.5797 11.3876 42.2649 11.1777C41.9605 10.9573 41.5984 10.8471 41.1786 10.8471C40.6224 10.8471 40.1501 11.057 39.7618 11.4768C39.3735 11.8966 39.1793 12.479 39.1793 13.2242C39.1793 13.9693 39.3735 14.5518 39.7618 14.9716C40.1501 15.3914 40.6224 15.6013 41.1786 15.6013C41.5984 15.6013 41.9605 15.4964 42.2649 15.2865C42.5797 15.0766 42.7896 14.7775 42.8946 14.3891H45.0198C44.8309 15.2707 44.3954 15.9791 43.7132 16.5144C43.031 17.0496 42.1914 17.3173 41.1944 17.3173Z"/><path d="M47.8473 10.7841L47.6584 9.32004H45.8638V17.1284H47.8788V13.5705C47.8788 12.9723 47.9733 12.5053 48.1622 12.1694C48.3616 11.8336 48.6345 11.5975 48.9808 11.461C49.3271 11.3246 49.7207 11.2564 50.1615 11.2564H50.7282V9.13113C50.067 9.13113 49.4898 9.28331 48.9965 9.58766C48.5138 9.88152 48.1307 10.2803 47.8473 10.7841Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M53.8529 17.3173C53.1812 17.3173 52.6302 17.2123 52.1999 17.0024C51.7696 16.782 51.4495 16.4934 51.2396 16.1366C51.0297 15.7797 50.9248 15.3862 50.9248 14.9559C50.9248 14.2317 51.2081 13.644 51.7749 13.1927C52.3416 12.7414 53.1917 12.5158 54.3252 12.5158H56.3087V12.3269C56.3087 11.7916 56.1565 11.3981 55.8522 11.1462C55.5478 10.8943 55.17 10.7684 54.7187 10.7684C54.3094 10.7684 53.9526 10.8681 53.6482 11.0675C53.3439 11.2564 53.155 11.5397 53.0815 11.9176H51.1137C51.1661 11.3508 51.3551 10.8576 51.6804 10.4378C52.0162 10.018 52.4465 9.69786 52.9713 9.47746C53.4961 9.24657 54.0838 9.13113 54.7345 9.13113C55.8469 9.13113 56.7233 9.40925 57.3635 9.96548C58.0037 10.5217 58.3238 11.3089 58.3238 12.3269V17.1284H56.6078L56.4189 15.8689C56.188 16.2888 55.8627 16.6351 55.4429 16.908C55.0336 17.1808 54.5036 17.3173 53.8529 17.3173ZM54.3094 15.743C54.8866 15.743 55.3327 15.5541 55.6475 15.1763C55.9729 14.7985 56.1775 14.3314 56.2615 13.7752H54.5456C54.0103 13.7752 53.6272 13.8749 53.3963 14.0743C53.1655 14.2632 53.05 14.4993 53.05 14.7827C53.05 15.0871 53.1655 15.3232 53.3963 15.4911C53.6272 15.659 53.9316 15.743 54.3094 15.743Z"/><path d="M60.3726 6.39192C59.9004 6.79073 59.6642 7.46241 59.6642 8.40697V9.32004H58.5937V11.0045H59.6642V17.1284H61.6793V11.0045H64.7865V14.4049C64.7865 15.4229 65.0331 16.1313 65.5264 16.5301C66.0196 16.9289 66.6756 17.1284 67.4942 17.1284H68.8638V15.4124H67.8878C67.4889 15.4124 67.2056 15.3442 67.0377 15.2078C66.8802 15.0608 66.8015 14.7985 66.8015 14.4206V11.0045H68.911V9.32004H66.8015V7.22628H65.0226L64.7865 9.32004H61.6793V8.40697C61.6793 8.08162 61.7527 7.85073 61.8997 7.71429C62.0466 7.57786 62.2932 7.50964 62.6396 7.50964H63.1906V5.7937H62.3247C61.5061 5.7937 60.8554 5.99311 60.3726 6.39192Z"/><path d="M69.5234 17.7266V19.6472H79.5934V17.7266H69.5234Z"/></g></g></svg>
      </figcaption>
  </div>
</figure>
<div class="demo-text">
  <p>Legepladsen åbnede i foråret og bruges i dag af tre skoler og to børnehaver i kvarteret.</p>
</div>

Accessibility

It is a quotation — mark it up as one

The module is a <figure> with the quote in a <blockquote> and the attribution in a <figcaption>, so assistive technology announces the quote as a quote and knows who said it. Put the source URL in the blockquote’s cite attribute when there is one.

The photo is decorative

The author’s name is right next to the photo, so the <img> gets alt="" — reading "photo of Luke Micali" before "Luke Micali" is noise. If the photo shows something the text does not say, describe that instead.

The company logo needs a name

An inline logo is an image: give the <svg> role="img" and an aria-label (or a <title>) with the company name, as the example does. A raster logo gets the name as alt text.

Links must say where they go

The optional link is an <a> styled as a link Button; "Se reference" is fine when the surrounding caption names the customer, otherwise make the label specific ("Se Zetland Park").

Colour and contrast

Quote and name use text-primary, the title text-secondary — both pass AA on bg-primary. The hairline and the grey logo are decorative and carry no meaning.

Stylesheet

Shipped as @wah-kompan/kompan-ui/components/modules/quote.css. Every value is a token reference, so it themes with the rest of the system rather than being restyled. The shipped file also imports Visual, Button — what this component is built with — so one import is enough.

css
.kompan-quote {
  --kompan-quote-avatar: 5rem;                              /* 80px */
  --kompan-quote-author-max-width: 50%;                     /* Figma caps the wrapper at width-xxs (320) but its example hugs ~370px */

  display: grid;
  box-sizing: border-box;
  margin: 0;
  padding-block: var(--spacing-5xl);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--type-font-family-body);
}

/* The 1280px content column, padded by the responsive container token */
.kompan-quote__container {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-default-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-lg);
}

.kompan-quote__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--type-font-size-display-sm);
  font-weight: var(--type-font-weight-regular);
  line-height: var(--type-line-height-display-sm);
}

.kompan-quote__text p {
  margin: 0;
}

/* Author aside: hugs its content (photo, one-line name/title, logo) and the
   quote takes the rest of the row — as the Figma example instance does. The cap
   only protects against very long names/titles. */
.kompan-quote__author {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--spacing-xl);
  box-sizing: border-box;
  min-width: 0;
  max-width: var(--kompan-quote-author-max-width);
  margin: 0;
  padding-block: var(--spacing-xl);
  border-top: var(--stroke-sm) solid var(--color-border-tertiary);
}

.kompan-quote__person {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--spacing-xl);
  min-width: 0;
}

.kompan-quote__avatar {
  flex: none;
  width: var(--kompan-quote-avatar);
}

.kompan-quote__meta {
  display: grid;
  justify-items: start;
  gap: var(--spacing-md);
  min-width: 0;
}

.kompan-quote__name {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--type-font-size-md);
  font-weight: var(--type-font-weight-medium);
  line-height: var(--type-line-height-md);
}

.kompan-quote__title {
  color: var(--color-text-secondary);
  font-size: var(--type-font-size-sm);
  font-weight: var(--type-font-weight-regular);
  line-height: var(--type-line-height-sm);
}

.kompan-quote__logo {
  flex: none;
  width: auto;
  height: 1.5rem;
  color: var(--color-utility-gray-400);
}

/* Center: everything in the paragraph column, author stacked under the quote */
.kompan-quote_center .kompan-quote__container {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-3xl);
  max-width: var(--width-paragraph-max-width);
}

.kompan-quote_center .kompan-quote__text {
  text-align: center;
}

.kompan-quote_center .kompan-quote__author {
  flex-direction: column;
  max-width: none;
  padding: 0;
  border-top: 0;
}

.kompan-quote_center .kompan-quote__person {
  flex-direction: column;
  text-align: center;
}

.kompan-quote_center .kompan-quote__meta {
  justify-items: center;
}

.kompan-quote_center .kompan-quote__name {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--spacing-md);
}

.kompan-quote_center .kompan-quote__title {
  font-size: var(--type-font-size-md);
  line-height: var(--type-line-height-md);
}

@media (max-width: 480px) {
  .kompan-quote__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3xl);
  }

  /* Figma's mobile variant drops the bordered wrapper around the author */
  .kompan-quote__author {
    max-width: none;
    padding: 0;
    border-top: 0;
  }
}