There are no notes for this item.
<p>All types of cards work with the LDN skin, by default they use the primary colour, and accent modifiers relative to LDN can be applied.</p>
<p>These modifiers, cascade to the appropriate accented elements in different card types.</p>
<p>Like other LDN themed component variants, the modifiers are in a map in <code>main-ldn.scss</code>, consider this the source of truth, but at the time of typing, they're currently:</p>
<ul>
<li><code>blue-ldn</code></li>
<li><code>blue-deep-ldn</code></li>
<li><code>magenta-ldn</code></li>
<li><code>purple-deep-ldn</code></li>
</ul>
For example:
<pre><div class="card card--flex card--magenta-ldn"></div></pre>
<hr />
<div class="card card--flex">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="">Enjoying the View? How computer games can help evaluate landscapes</a></h3>
<p>2020 marks the International Year of the Nurse and Midwife, and Staffordshire University is joining colleagues across the globe to shine a spotlight on the sector. Celebrations kick off with a talk this week by Visiting Professor Ann-Marie Cannaby, Chief Nurse at the Royal Wolverhampton Hospital, at the University’s Centre of Excellence in Healthcare Education, Stafford.Two hundred years may have passed since the birth of Florence Nightingale, but patient care and safety remain the most important influencing factors within the fields of nursing and midwifery. Professor Cannaby will use her keynote presentation to explore curriculum developments.</p>
</div>
</div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="link--stretched">Graduates give Staffs Uni star role in popular app</a></h3>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<div class="card card--flex card--blue-ldn">
<div class="card__content">
<h3 class="h4 card__title">
<a href="#" class="link--stretched">Card Title (with <code>link--stretched</code>)</a>
</h3>
<p>Example without a figure image</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="link--stretched">Graduates give Staffs Uni star role in popular app</a></h3>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<hr />
<div class="grid grid-2-cols grid-4-cols@desktop">
<div>
<div class="card card--flex card--blue-deep-ldn">
<figure class="card__figure card__figure--video">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Research into poverty in Stoke-on-Trent gets new funding boost</a>
</h3>
<p><span class="tag">video</span></p>
<p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--blue-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/tech" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Graduates give Staffs Uni star role in popular app</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">11 February 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/nature" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">“It's Beautiful to be Old” Professor tells Vatican</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">10 August 2020</time>
</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Research into poverty in Stoke-on-Trent gets new funding boost</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">9 April 2020</time>
</p>
<p>Staffordshire University is going global with a programme packed full of free events to start the new decade.</p>
</div>
</div>
</div>
</div>
<hr />
<div class="grid grid-3-cols">
<div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/tech" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Accommodation</a>
</h3>
<p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/nature" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Staffordshire Campus</a>
</h3>
<p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
</div>
</div>
</div>
<div>
<a class="card card--flex" href="">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<h3 class="card__title h5">
Stoke-on-Trent Open Day Programme
</h3>
<p><span class="tag">publication</span></p>
<p>Download our open day PDF (2.8Mb)</p>
<b class="button button--clipped">Download</b>
</div>
</a>
</div>
</div>
<hr />
<div class="card card--flex-overlap">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<div class="title">
<h3 class="h4 title__highlight"><a href="" class="">Graduates give Staffs Uni star role in popular app</a></h3>
</div>
<p>Staffordshire University is going global with a programme packed full of free events to start the new decade.</p>
</div>
</div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt="" />
</figure>
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
</div>
</a>
<p>2020 marks the International Year of the Nurse and Midwife, and Staffordshire University is joining colleagues across the globe to shine a spotlight on the sector. Celebrations kick off with a talk this week by Visiting Professor Ann-Marie Cannaby, Chief Nurse at the Royal Wolverhampton Hospital, at the University’s Centre of Excellence in Healthcare Education, Stafford.Two hundred years may have passed since the birth of Florence Nightingale, but patient care and safety remain the most important influencing factors within the fields of nursing and midwifery. Professor Cannaby will use her keynote presentation to explore curriculum developments.</p>
</div>
</div>
<div class="card card--flex-overlap card--magenta-ldn">
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
</div>
</a>
<p>Example without a figure image</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<div class="card card--flex-overlap card--blue-ldn">
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">Enjoying the View? How computer games can help evaluate landscapes</h3>
</div>
</a>
<p>Example without a figure image</p>
<p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
</div>
</div>
<hr />
<div class="grid grid-2-cols grid-4-cols@desktop">
<div>
<div class="card card--flex-overlap">
<figure class="card__figure card__figure--video">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
</div>
</a>
<p><span class="tag">video</span></p>
<p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/tech" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Graduates give Staffs Uni star role in popular app</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">11 February 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--blue-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/nature" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">“It's Beautiful to be Old” Professor tells Vatican</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">10 August 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">9 April 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
</div>
<hr />
<div class="grid grid-3-cols">
<div>
<div class="card card--flex-overlap card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/tech" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Accommodation</h3>
</div>
</a>
<p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/nature" alt="" />
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Staffordshire Campus</h3>
</div>
</a>
<p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
</div>
</div>
</div>
<div>
<a class="card card--flex-overlap" href="">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt="" />
</figure>
<div class="card__content">
<div class="title">
<h3 class="h5 title__highlight">Stoke-on-Trent Open Day Programme</h3>
</div>
<p><span class="tag">publication</span></p>
<p>Download our open day PDF (2.8Mb)</p>
<b class="button button--clipped">Download</b>
</div>
</a>
</div>
</div>
<p>All types of cards work with the LDN skin, by default they use the primary colour, and accent modifiers relative to LDN can be applied.</p>
<p>These modifiers, cascade to the appropriate accented elements in different card types.</p>
<p>Like other LDN themed component variants, the modifiers are in a map in <code>main-ldn.scss</code>, consider this the source of truth, but at the time of typing, they're currently:</p>
<ul>
<li><code>blue-ldn</code></li>
<li><code>blue-deep-ldn</code></li>
<li><code>magenta-ldn</code></li>
<li><code>purple-deep-ldn</code></li>
</ul>
For example:
<pre>{{ '<div class="card card--flex card--magenta-ldn"></div>' | escape }}</pre>
<hr/>
<div class="card card--flex">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt=""/>
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="">{{ placeholderHeadline2 }}</a></h3>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt=""/>
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="link--stretched">{{ placeholderHeadline }}</a></h3>
<p>{{ placeholderPara1 }}</p>
</div>
</div>
<div class="card card--flex card--blue-ldn">
<div class="card__content">
<h3 class="h4 card__title">
<a href="#" class="link--stretched">Card Title (with <code>link--stretched</code>)</a>
</h3>
<p>Example without a figure image</p>
<p>{{ placeholderPara1 }}</p>
</div>
</div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt=""/>
</figure>
<div class="card__content">
<h3 class="h4 card__title"><a href="" class="link--stretched">{{ placeholderHeadline }}</a></h3>
<p>{{ placeholderPara1 }}</p>
</div>
</div>
<hr/>
<div class="grid grid-2-cols grid-4-cols@desktop">
<div>
<div class="card card--flex card--blue-deep-ldn">
<figure class="card__figure card__figure--video">
<img src="https://placeimg.com/480/240/people" alt=""/>
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Research into poverty in Stoke-on-Trent gets new funding boost</a>
</h3>
<p><span class="tag">video</span></p>
<p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--blue-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/tech" alt=""/>
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Graduates give Staffs Uni star role in popular app</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">11 February 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/nature" alt=""/>
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">“It's Beautiful to be Old” Professor tells Vatican</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">10 August 2020</time>
</p>
<p>{{ placeholderPara1 }}</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt=""/>
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Research into poverty in Stoke-on-Trent gets new funding boost</a>
</h3>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">9 April 2020</time>
</p>
<p>{{ placeholderPara2 }}</p>
</div>
</div>
</div>
</div>
<hr/>
<div class="grid grid-3-cols">
<div>
<div class="card card--flex card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/tech" alt=""/>
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Accommodation</a>
</h3>
<p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/nature" alt=""/>
</figure>
<div class="card__content">
<h3 class="card__title h5">
<a href="#" class="link--stretched">Staffordshire Campus</a>
</h3>
<p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
</div>
</div>
</div>
<div>
<a class="card card--flex" href="">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt=""/>
</figure>
<div class="card__content">
<h3 class="card__title h5">
Stoke-on-Trent Open Day Programme
</h3>
<p><span class="tag">publication</span></p>
<p>Download our open day PDF (2.8Mb)</p>
<b class="button button--clipped">Download</b>
</div>
</a>
</div>
</div>
<hr/>
<div class="card card--flex-overlap">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt=""/>
</figure>
<div class="card__content">
<div class="title">
<h3 class="h4 title__highlight"><a href="" class="">{{ placeholderHeadline }}</a></h3>
</div>
<p>{{ placeholderPara2 }}</p>
</div>
</div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/720/360" alt=""/>
</figure>
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">{{ placeholderHeadline2 }}</h3>
</div>
</a>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
<div class="card card--flex-overlap card--magenta-ldn">
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">{{ placeholderHeadline2 }}</h3>
</div>
</a>
<p>Example without a figure image</p>
<p>{{ placeholderPara1 }}</p>
</div>
</div>
<div class="card card--flex-overlap card--blue-ldn">
<div class="card__content">
<a href="" class="link--stretched">
<div class="title">
<h3 class="h4 title__highlight">{{ placeholderHeadline2 }}</h3>
</div>
</a>
<p>Example without a figure image</p>
<p>{{ placeholderPara1 }}</p>
</div>
</div>
<hr/>
<div class="grid grid-2-cols grid-4-cols@desktop">
<div>
<div class="card card--flex-overlap">
<figure class="card__figure card__figure--video">
<img src="https://placeimg.com/480/240/people" alt=""/>
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
</div>
</a>
<p><span class="tag">video</span></p>
<p>Adding a class of <code>card__figure--video</code> to a figure will give it a play icon overlay.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/tech" alt=""/>
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Graduates give Staffs Uni star role in popular app</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">11 February 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--blue-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/nature" alt=""/>
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">“It's Beautiful to be Old” Professor tells Vatican</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">10 August 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt=""/>
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Research into poverty in Stoke-on-Trent gets new funding boost</h3>
</div>
</a>
<p><span class="tag">blog</span></p>
<p>
<time class="strong">9 April 2020</time>
</p>
<p>University's pioneering work with community researchers will help inform new model of community research.</p>
</div>
</div>
</div>
</div>
<hr/>
<div class="grid grid-3-cols">
<div>
<div class="card card--flex-overlap card--magenta-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/tech" alt=""/>
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Accommodation</h3>
</div>
</a>
<p>Where you live is a big part of your student experience and where you’ll make friends for life.</p>
</div>
</div>
</div>
<div>
<div class="card card--flex-overlap card--purple-deep-ldn">
<figure class="card__figure">
<img src="https://placeimg.com/480/480/nature" alt=""/>
</figure>
<div class="card__content">
<a href="#" class="link--stretched">
<div class="title">
<h3 class="h5 title__highlight">Staffordshire Campus</h3>
</div>
</a>
<p>There’ll be times when you need some support - and we’re here for you. There are many student support services - from welfare to money matters.</p>
</div>
</div>
</div>
<div>
<a class="card card--flex-overlap" href="">
<figure class="card__figure">
<img src="https://placeimg.com/480/240/people" alt=""/>
</figure>
<div class="card__content">
<div class="title">
<h3 class="h5 title__highlight">Stoke-on-Trent Open Day Programme</h3>
</div>
<p><span class="tag">publication</span></p>
<p>Download our open day PDF (2.8Mb)</p>
<b class="button button--clipped">Download</b>
</div>
</a>
</div>
</div>
$card__internal-spacing: $spacing-sm;
.card {
// $theme-colours: see __vars/colours
display: block;
position: relative;
--accent-color: #{$primary};
margin-bottom: $spacing-xl;
border-left: $border-accent-width solid $primary;
border-color: var(--accent-color);
@include clearfix;
a:not(.button) {
text-decoration: none;
border-bottom: none;
&:hover {
text-decoration: underline;
}
}
p {
margin-bottom: $card__internal-spacing;
}
&__content {
padding: 0 calc(#{$card__internal-spacing} + 2.5%);
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
&__title {
margin-top: 0;
margin-bottom: $spacing-md;
a {
color: #{$primary};
color: var(--accent-color);
}
}
&__figure {
&--video {
position: relative;
&:after {
content: '';
position: absolute;
width: $spacing-4xl;
height: $spacing-4xl;
max-width: 50%;
max-height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url('#{$image-theme-directory-icon}/icon-play-circle-neutral-light.svg') no-repeat center center;
background-size: contain;
z-index: 1;
pointer-events: none;
}
}
}
//-- Child elements affected by accent colour
.blockquote__title {
color: var(--accent-color);
}
.title__highlight {
--background: var(--accent-color);
}
.meta--inline-dd,
.meta--inline {
dd:before {
color: var(--accent-color);
}
}
//-- ACCENT THEMES
@each $name, $value in $card-accent-colors {
&--#{$name} {
--accent-color: #{$value};
}
}
@each $name, $value in $theme-colours {
&--#{$name} {
--accent-color: #{$value};
svg {
fill: #{$value};
}
}
}
&--light {
--accent-color: #{rgba(white, 0.5)};
color: white;
svg {
fill: white;
}
}
}
a.card {
text-decoration: none;
.card__title {
color: #{$primary};
color: var(--accent-color);
}
&:hover {
color: $text-color;
.title__highlight,
.card__title {
text-decoration: underline;
}
}
}
//-- VARIANTS
.card--flex {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row-reverse;
.card__figure {
flex: 1 1 33%;
}
.card__content {
flex: 99 1 17.5em;
}
}
.card--flex-overlap {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row-reverse;
padding-bottom: $spacing-sm;
.card__figure {
flex: 1 1 33%;
}
.card__content {
flex: 99 1 17.5em;
}
.card__figure {
margin-bottom: -#{$spacing-sm};
}
}
.card--testimonial {
padding-bottom: $card__internal-spacing;
}
.card--pullquote {
padding-bottom: $card__internal-spacing;
margin-left: 5%;
&:before {
content: '';
display: block;
float: left;
width: 5%;
height: 0;
padding-bottom: 5%;
margin-left: -5%;
background: #fff url('#{$image-theme-directory-icon}/icon-quote-primary.svg') no-repeat center center;
background-size: contain;
}
// These themes need to be updated 'manually' for now, as we're using an svg,
// and I can't think of a clever way to update dynamically based on the accent var
// something using inline SVG use/fill, or a mask?
// Don't forget to add the SVG to the filesystem!
@each $name, $value in $card-accent-colors {
&.card--#{$name} {
&:before {
background: #fff url('#{$image-theme-directory-icon}/icon-quote-#{$name}.svg') no-repeat center center;
background-size: contain;
}
}
}
}
.card--course {
// this exists, but doesn't need anything specific (yet)
}
.card--result {
// this exists, but doesn't need anything specific (yet)
}
.card--profile {
// this exists, but doesn't need anything specific (yet)
}
.card--ksp {
color: $neutral--primary;
&__icon {
margin-bottom: $card__internal-spacing;
max-width: 100%;
height: auto!important;
img {
vertical-align: baseline !important; // this is horribly lazy but browsers, sorry
}
}
&.card--light {
color: white;
}
}
.card--event {
margin-left: $spacing-4xl;
.card__figure {
margin-bottom: -#{$spacing-sm};
}
.card__date {
position: absolute;
top: 0;
left: -$spacing-4xl;
width: $spacing-4xl;
@include typescale('xs');
padding: $spacing-sm 0;
color: white;
background: $primary;
background: var(--accent-color);
line-height: 1;
text-align: center;
box-sizing: border-box;
}
.card__day {
display: block;
font-weight: 500;
@include typescale('xl');
@media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
@include typescale('3xl');
}
}
@media (min-width: (map_get($breakpoint-stages, 'tablet-wide') + 5rem)) {
margin-left: $spacing-5xl;
.card__date {
left: -$spacing-5xl;
width: $spacing-5xl;
}
.card__day {
@include typescale('5xl');
}
}
}
.card__video.card__figure {
@media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
padding-bottom: 50%;
position: relative;
height: 0;
}
& iframe {
width: 100%;
height: 100%;
@media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
padding-bottom: 50%;
position: absolute;
}
}
}
.grid-2-cols\@tablet {
& .card__video {
&.card__figure {
padding-bottom: 50%;
position: relative;
height: 0;
& iframe {
position: absolute;
}
}
}
}