A Quote Component is used to display inspiring quotes, customer testimonials, or important messages in a visually appealing way. It usually includes a quote text, author name, and optional styling like icons or background images.

Primary Quote

After completing the course, you will be able to:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rapid changes in the field of human resources have placed greater expectations on the shoulders of HR leaders.

<section class="quote-cntr">
  <div class="container quote quote-primary">
    <div class="quote-icon">
      <svg width="276" height="208" viewBox="0 0 276 208" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path opacity="0.2" d="M258.487 0C270.162 0 276 3.91989 276 11.7597C276 15.1896 274.599 17.6396 271.797 19.1096C268.995 20.5795 265.259 22.0495 260.589 23.5194C247.98 26.9493 237.239 31.6042 228.365 37.4841C219.492 43.364 212.721 50.4688 208.051 58.7986C202.914 67.6184 200.345 77.4181 200.345 88.1979C200.345 97.5077 203.147 104.612 208.751 109.512C214.355 114.902 221.127 118.577 229.066 120.537C237.472 122.987 244.711 127.642 250.782 134.502C256.386 141.852 259.188 151.406 259.188 163.166C259.188 175.906 254.284 186.441 244.477 194.77C234.67 203.59 223.462 208 210.853 208C189.838 208 172.792 200.895 159.716 186.686C146.64 172.966 140.102 154.836 140.102 132.297C140.102 112.207 143.604 94.0778 150.609 77.9082C157.614 62.2285 166.954 48.2638 178.629 36.0141C189.838 24.2544 202.447 15.1896 216.457 8.81981C230 2.93993 244.01 0 258.487 0ZM118.386 0C130.061 0 135.898 3.91989 135.898 11.7597C135.898 15.1896 134.497 17.6396 131.695 19.1096C128.893 20.5795 125.157 22.0495 120.487 23.5194C107.878 26.9493 97.1371 31.6042 88.264 37.4841C79.3909 43.364 72.6193 50.4688 67.9492 58.7986C62.8122 67.6184 60.2437 77.4181 60.2437 88.1979C60.2437 97.5077 63.0457 104.612 68.6497 109.512C74.2538 114.902 81.0254 118.577 88.9645 120.537C97.3706 122.987 104.609 127.642 110.68 134.502C116.284 141.852 119.086 151.406 119.086 163.166C119.086 175.906 114.183 186.441 104.376 194.77C94.5685 203.59 83.3604 208 70.7513 208C49.736 208 32.6904 200.895 19.6142 186.686C6.53809 172.966 0 154.836 0 132.297C0 112.207 3.50253 94.0778 10.5076 77.9082C17.5127 62.2285 26.8528 48.2638 38.5279 36.0141C49.736 24.2544 62.3452 15.1896 76.3553 8.81981C89.8985 2.93993 103.909 0 118.386 0Z" />
      </svg>
    </div>
    <div class="d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center image-cntr justify-content-center">
        <img alt="After completing the course, you will be able to:" sizes="100vw" src="./assets/component-images/416*416px-faculty.svg" decoding="async" data-nimg="fill" loading="lazy" style={{ position: "absolute", height: "100%", width: "100%", inset: "0px", color: "transparent"}} />
      </div>
      <div class="col justify-content-center d-flex flex-column px-0">
        <h2 class="large-text-2">Lorem ipsum</h2>
        <div class="designation-text para--two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="quote-msg medium-text-1 d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
    </div>
    <div class="col justify-content-center d-flex flex-column px-0 d-block d-md-none">
      <div class="quote-msg medium-text-1">Rapid changes in the field of human resources have placed greater expectations on the shoulders of HR leaders. </div>
    </div>
  </div>
</section>

Primary Quote Without Image

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rapid changes in the field of human resources have placed greater expectations on the shoulders of HR leaders.

<section class="quote-cntr">
  <div class="container quote quote-primary">
    <div class="quote-icon">
      <svg width="276" height="208" viewBox="0 0 276 208" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.2" d="M258.487 0C270.162 0 276 3.91989 276 11.7597C276 15.1896 274.599 17.6396 271.797 19.1096C268.995 20.5795 265.259 22.0495 260.589 23.5194C247.98 26.9493 237.239 31.6042 228.365 37.4841C219.492 43.364 212.721 50.4688 208.051 58.7986C202.914 67.6184 200.345 77.4181 200.345 88.1979C200.345 97.5077 203.147 104.612 208.751 109.512C214.355 114.902 221.127 118.577 229.066 120.537C237.472 122.987 244.711 127.642 250.782 134.502C256.386 141.852 259.188 151.406 259.188 163.166C259.188 175.906 254.284 186.441 244.477 194.77C234.67 203.59 223.462 208 210.853 208C189.838 208 172.792 200.895 159.716 186.686C146.64 172.966 140.102 154.836 140.102 132.297C140.102 112.207 143.604 94.0778 150.609 77.9082C157.614 62.2285 166.954 48.2638 178.629 36.0141C189.838 24.2544 202.447 15.1896 216.457 8.81981C230 2.93993 244.01 0 258.487 0ZM118.386 0C130.061 0 135.898 3.91989 135.898 11.7597C135.898 15.1896 134.497 17.6396 131.695 19.1096C128.893 20.5795 125.157 22.0495 120.487 23.5194C107.878 26.9493 97.1371 31.6042 88.264 37.4841C79.3909 43.364 72.6193 50.4688 67.9492 58.7986C62.8122 67.6184 60.2437 77.4181 60.2437 88.1979C60.2437 97.5077 63.0457 104.612 68.6497 109.512C74.2538 114.902 81.0254 118.577 88.9645 120.537C97.3706 122.987 104.609 127.642 110.68 134.502C116.284 141.852 119.086 151.406 119.086 163.166C119.086 175.906 114.183 186.441 104.376 194.77C94.5685 203.59 83.3604 208 70.7513 208C49.736 208 32.6904 200.895 19.6142 186.686C6.53809 172.966 0 154.836 0 132.297C0 112.207 3.50253 94.0778 10.5076 77.9082C17.5127 62.2285 26.8528 48.2638 38.5279 36.0141C49.736 24.2544 62.3452 15.1896 76.3553 8.81981C89.8985 2.93993 103.909 0 118.386 0Z" /></svg>
    </div>
    <div class="d-flex justify-content-between align-items-center">
      <div class="col justify-content-center d-flex flex-column px-0">
        <h2 class="large-text-2">Lorem ipsum</h2>
        <div class="designation-text para--two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="quote-msg medium-text-1 d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
    </div>
    <div class="col justify-content-center d-flex flex-column px-0 d-block d-md-none">
      <div class="quote-msg medium-text-1">Rapid changes in the field of human resources have placed greater expectations on the shoulders of HR leaders. </div>
    </div>
  </div>
</section>