No notes defined.
<div class="card card--grey">
<div class="card__content">
<h3 class="h4 card__title"><a href="#" class="">Card Title (linked)</a></h3>
<p>In addition to the recommendation from your Assessment Centre report:. If you are blind or have a visual impairment we can refer you for specialist support.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card card--grey">
{% if figureImg %}
<figure class="card__figure">
</figure>
{% endif %}
<div class="card__content">
<h3 class="h4 card__title"><a href="#" class="">Card Title (linked)</a></h3>
<p>In addition to the recommendation from your Assessment Centre report:. If you are blind or have a visual impairment we can refer you for specialist support.</p>
<p>{{ lorem }}</p>
</div>
</div>
$card__internal-spacing: $spacing-sm;
.card {
// $theme-colours: see __vars/colours
display: block;
position: relative;
--accent-color: #{$primary};
margin-bottom: $spacing-xl;
@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;
background-color: #CCC;
&:hover {
cursor: pointer;
}
&: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;
}
& img {
color: #CCC;
}
}
}
&__clearing-flag {
background-color: $red;
color: #FFF;
padding: 0.25rem 0.5rem;
font-weight: 400;
}
// CG: A card across multiple days will clash with the one below if there is no image, so add a minimum height if necessary
&--multiple-days {
min-height: 210px;
}
//-- Child elements affected by accent colour
.blockquote__title {
color: 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};
&.card--ksp .card--ksp__icon-container > .icon svg * {
@if (choose-contrast-color($value) == white) {
stroke: white!important;
fill: white!important;
color: white;
}
@else {
stroke: black!important;
fill: black!important;
color: black;
}
}
}
}
@each $name, $value in $theme-colours {
&--#{$name} {
--accent-color: #{$value};
svg {
fill: #{$value};
}
}
}
&--bg-offwhite {
background-color: $grey-50-pc;
& .card__content {
padding: $card__internal-spacing * 2;
}
& .card__figure {
margin-bottom: 0;
}
}
}
a.card {
text-decoration: none;
.card__title {
color: #{$primary};
color: var(--accent-color);
}
&:hover {
color: $text-color;
.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};
}
}
// In Razor, attach background colours only if there are more than one
.card--testimonial {
padding-bottom: $card__internal-spacing;
& .cite {
margin-bottom: $spacing-2xs;
color: var(--accent-color);
}
@each $name, $value in $testimonial-card-colors {
&.card--bg-#{$name} {
background-color: map_get($value, "background");
color: map_get($value, "color");
padding: $spacing-2xs $spacing-lg $spacing-lg $spacing-lg;
@media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
& .card__content {
padding-left: 0;
margin-left: -$spacing-4xl;
}
}
& .blockquote__prose {
margin-top: 0;
}
& q {
color: map_get($value, "color");
}
& strong, & .cite {
color: map_get($value, "contrast-color");
}
& .blockquote__figure img {
border-bottom: 0;
}
}
}
.blockquote__figure img {
border-bottom: $spacing-2xs solid var(--accent-color);
}
}
.card--pullquote {
padding-bottom: $card__internal-spacing;
margin-left: 5%;
&:before {
content: '';
display: block;
float: left;
width: 5%;
margin-right: 1%;
height: 0;
padding-bottom: 5%;
margin-left: -5%;
background: 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: transparent url('#{$image-theme-directory-icon}/icon-quote-#{$name}.svg') no-repeat center center;
background-size: contain;
}
}
}
}
.card--contact {
ul.list--inline {
padding-left: 1.5em;
li a {
text-decoration: none!important;
}
.icon {
font-size: 1.5rem;
}
}
ul.list--icon-bullets {
li a {
text-decoration: none!important;
border-bottom: 1px solid $grey--light
}
}
}
.card--course {
border-left: $border-accent-width solid $primary;
border-color: var(--accent-color);
}
.card--result {
// this exists, but doesn't need anything specific (yet)
}
.card--profile {
padding: $spacing-md;
/* Needs:
grey and teal
grey and burgundy
teal and neon
burgundy and neon
*/
@each $name, $value in $profile-card-themes {
&.card--#{$name} {
background: map_get($value, "background");
border-bottom: $spacing-2xs solid map_get($value, "accent-color");
margin-left: $spacing-2xl;
@if (choose-contrast-color(map_get($value, "background")) == white) {
color: white;
& .button {
color: white;
}
}
& .button--outline {
color: map_get($value, "accent-color");
border-color: map_get($value, "accent-color");
&:hover {
color: black;
}
}
& .title, & .strong {
color: map_get($value, "accent-color");
}
}
}
&.card--flex {
flex-direction: row;
}
& .card__figure {
margin-left: auto;
margin-right: auto;
max-width: 15rem;
/*@media (max-width: (map_get($breakpoint-stages, 'tablet-wide'))) {
flex: 1 1 25%;
}*/
}
& .title {
margin-bottom: 0;
}
}
.card--ksp {
color: $neutral--primary;
border-left: none;
&__icon-container {
display: table;
border-radius: 50%;
background-color: var(--accent-color);
}
& .icon {
display: table-cell;
vertical-align: middle;
width: 2em;
height: 2em;
img, svg {
width: 60%;
height: 60%;
vertical-align: unset;
}
svg {
fill: var(--accent-color);
}
}
& .card__title {
color: inherit;
margin-top: $card__internal-spacing * 2;
}
&.card--light {
& .card__title, & p {
color: white;
}
}
}
.card--event {
margin-left: $spacing-4xl;
.card__figure {
margin-bottom: #{$spacing-xs};
}
.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;
}
.link--stretched h2 {
color: $teal;
}
a.link--stretched:hover h2 {
color: $red;
}
.card__day {
display: block;
font-weight: 500;
@include typescale('xl');
@media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
@include typescale('3xl');
}
}
.card__date-separator {
display: block;
font-weight: 500;
@include typescale('xl');
padding: $spacing-xs 0;
}
@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--with-logo {
border: 0;
& .card__content {
max-width: 80%;
background-color: $grey-50-pc;
padding: $spacing-xl $spacing-xl $spacing-2xl $spacing-xl;
}
& a:hover,& a:hover .card__content p {
text-decoration: none;
}
& img {
float: right;
margin-top: -$spacing-xl;
max-height: 100px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
background: #FFF;
}
}
.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;
}
}
}
.card--virtual-tour {
min-height: 20rem;
position: relative;
overflow: hidden;
flex-direction: row;
background-color: $grey-50-pc;
background-size: cover!important;
background-position: center center;
background-repeat: no-repeat;
border-left: none;
border: $spacing-4xs solid $teal;
@media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
background-image: none!important;
background-color: $grey-50-pc!important;
}
.card__content {
max-width: 25rem;
z-index: 1;
background: rgba(255,255,255,0.9);
padding: $spacing-xl $spacing-xl $spacing-xs $spacing-xl;
@media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
margin-top: $spacing-2xl;
margin-left: $spacing-2xl;
}
> .title {
color: $teal;
}
> :last-child {
margin-top: $spacing-md;
}
}
}
.grid-2-cols\@tablet {
& .card__video {
&.card__figure {
padding-bottom: 50%;
position: relative;
height: 0;
& iframe {
position: absolute;
}
}
}
}