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">
<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>
<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@xxxxxxxx.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 dummy text of the printing and typesetting industry.
</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--fluid btn--large btn--primary">Button</a>
</div>
</div><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 txt-center">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="ty-button-cntr margin-bottom">
<a class="ty-button btn btn--fluid btn--large btn--primary">Button</a>
</div>
<div>
<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>
</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 is simply dummy text<br />
<a href="mailto:xxxxxxxx@xxx.xxx" class="link text-accent">
xxxxxxxx@xxx.xxx
</a>
.
</div>
</div>
</div>
</div>
</div><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-item">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="ty-item">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="ty-button-cntr margin-bottom">
<a class="ty-button btn btn--fluid btn--large btn--primary">Button</a>
</div>
<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>
</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 is simply dummy text <br />
<a href="mailto:xxxxxxxx@xxx.xxx" class="link text-accent">
xxxxxxxx@xxx.xxx
</a>
.
</div>
</div>
</div>
</div>