A Thank You Message Component is used to express gratitude after a user action, such as completing a purchase, submitting a form, or signing up. This can enhance user experience, engagement, and customer satisfaction.
<div class="ty-cntr-primary-horizontal bg-primary">
<div class="col-xl-10 col-lg-12 col-12 right-col m-t-lg-0 p-l-sm-0 p-r-sm-0 m-auto overflow-hidden">
<div class="ty-cntr">
<div class="tick-icon">
<span class="blueprint-icon icon-success text-primary"></span>
</div>
<div class="title-msg">Lorem Ipsum is simply dummy text</div>
<div class="sub-msg">Lorem Ipsum is simply?</div>
<div class="ty-items-cntr">
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-download text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-whatsapp text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-message text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-phone text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="ty-item__info-bold link-style">
<div> US <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
<div> UK <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
<div> SG <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-email text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div class="link-style"> Lorem Ipsum to <a href="#" class="link text-accent">xxxxxxxxxx@xxxx.xxx</a>
</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-dollar text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
</div>
<div class="ty-button-cntr margin-top">
<a class="ty-button btn btn--large btn--secondary">Button</a>
</div>
</div>
</div>
</div>
<div class="ty-cntr-secondary-horizontal bg-secondary">
<div class="col-xl-10 col-lg-12 col-12 right-col m-t-lg-0 p-l-sm-0 p-r-sm-0 m-auto overflow-hidden">
<div class="ty-cntr">
<div class="tick-icon">
<span class="blueprint-icon icon-success text-primary"></span>
</div>
<div class="title-msg">Lorem Ipsum is simply dummy text</div>
<div class="sub-msg">Lorem Ipsum is simply?</div>
<div class="ty-items-cntr">
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-download text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-whatsapp text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-message text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-phone text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="ty-item__info-bold link-style">
<div> US <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
<div> UK <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
<div> SG <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-email text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div class="link-style"> Lorem Ipsum <a href="#" class="link text-accent">xxxxxxxxxx@xxxx.xxx</a>
</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-dollar text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
</div>
<div class="ty-button-cntr margin-top">
<a class="ty-button btn btn--large btn--primary">Button</a>
</div>
</div>
</div>
</div>
<div class="ty-cntr-white-horizontal">
<div class="col-xl-10 col-lg-12 col-12 right-col m-t-lg-0 p-l-sm-0 p-r-sm-0 m-auto overflow-hidden">
<div class="ty-cntr">
<div class="tick-icon">
<span class="blueprint-icon icon-success text-primary"></span>
</div>
<div class="title-msg">Lorem Ipsum is simply dummy text</div>
<div class="sub-msg">Lorem Ipsum is simply?</div>
<div class="ty-items-cntr">
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-download text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-whatsapp text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-message text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-phone text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="ty-item__info-bold link-style">
<div> US <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
<div> UK <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
<div> SG <span>
<a href="#" class="link text-accent">+0 000 000 0000</a>
</span>
</div>
</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-email text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div class="link-style"> Lorem Ipsum <a href="#" class="link text-accent">xxxxxxxxxx@xxxx.xxx</a>
</div>
</div>
</div>
<div class="ty-item">
<div class="ty-item__icon">
<span class="blueprint-icon icon-dollar text-primary"></span>
</div>
<div class="ty-item__info">
<div class="ty-item__info-title">
<a href="#" class="link text-accent"> Lorem Ipsum is simply </a>
</div>
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
</div>
<div class="ty-button-cntr margin-top">
<a class="ty-button btn btn--large btn--primary">Button</a>
</div>
</div>
</div>
</div>