Lorem ipsum dolor sit amet 
A Referral Card is used to encourage users to refer others to a service, product, or platform. It typically includes a message, referral code, CTA button, and an image/icon.
Referral Card Accordion
<div class="referral-cards--accordion-cntr">
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image d-lg-block d-none">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-plus d-lg-none d-block" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-none">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-none">
<button class="btn btn--primary">Button</button>
</div>
<div class="referral-card--accordion-collaboration d-lg-block d-none"> Lorem ipsum dolor sit amet <img src="./assets/component-images/240*80px.svg" />
</div>
</article>
</div>
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image d-lg-block d-none">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-plus d-lg-none d-block" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-none">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-none">
<button class="btn btn--primary">Button</button>
</div>
</article>
</div>
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image d-lg-block d-none">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-plus d-lg-none d-block" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-none">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-none">
<button class="btn btn--primary">Button</button>
</div>
</article>
</div>
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image d-lg-block d-none">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-plus d-lg-none d-block" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-none">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-none">
<button class="btn btn--primary">Button</button>
</div>
</article>
</div>
</div>Referral Card Accordion Open State
Lorem ipsum dolor sit amet
<div class="referral-cards--accordion-cntr">
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center mt-20">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-minus d-lg-none" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-block">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-block">
<button class="btn btn--primary">Button</button>
</div>
<div class="referral-card--accordion-collaboration d-lg-block d-block"> Lorem ipsum dolor sit amet <img src="./assets/component-images/240*80px.svg" />
</div>
</article>
</div>
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center mt-20">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-minus d-lg-none" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-block">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-block">
<button class="btn btn--primary">Button</button>
</div>
</article>
</div>
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center mt-20">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-minus d-lg-none" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-block">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-block">
<button class="btn btn--primary">Button</button>
</div>
</article>
</div>
<div class="referral-card--accordion">
<article>
<figure class="referral-card--accordion-image">
<div class="position-relative">
<img src="./assets/component-images/faculty-v1.svg" />
<figcaption class="text-primary border-primary"> Lorem ipsum dolor sit amet </figcaption>
</div>
</figure>
<div class="referral-card--accordion-textcntr">
<header class="referral-card--accordion-title d-flex align-items-center mt-20">
<span class="w-100"> Lorem ipsum dolor sit amet consectetur </span>
<button class="referral-card--accordion-title__expand-btn bg-reverse flex-shrink-1 blueprint-icon icon-minus d-lg-none" type="button"></button>
</header>
<div class="referral-card--accordion-content d-lg-block d-block">
<aside class="referral-card--accordion-intro"> 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. </aside>
<aside class="referral-card--accordion-duration">
<div class="item border-primary">
<b>Lorem ipsum: </b>Month Date Year
</div>
<div class="item border-primary">
<b>Lorem: </b>Ipsum
</div>
<div class="item border-primary">
<b>Lorem: </b>ipsum
</div>
</aside>
<aside class="referral-card--accordion-description">
<p>
<b>Sed ut perspiciatis unde omnis iste natus error sit voluptatem:</b>
</p>
<ul>
<li> 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. </li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li> Lorem ipsum dolor sit amet, consectetur </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
<li> Sed ut perspiciatis unde omnis iste natus error sit voluptatem </li>
</ul>
</aside>
</div>
</div>
<div class="referral-card--accordion-button d-lg-block d-block">
<button class="btn btn--primary">Button</button>
</div>
</article>
</div>
</div>