No notes defined.
<p>Box with an absolutely positioned title (mainly just for 'Contact Block')</p>
<p>We add extra padding to the top of the content if there isn't a figure present, but don't add more than a couple of words, or it'll overlap.</p>
<div class="grid grid--spaced grid-2-cols">
<div class="col-3/4@tablet-wide">
<div class="box box--with-abstitle box--bg-offwhite">
<div class="box__content">
<div class="box__abstitle title">
<h4 class="h4 title__highlight">Any Questions?</h4>
</div>
<h5 class="box__title margin-y-none">Katie Holdcroft</h5>
<p>Representative for Austria</p>
<ul class="list--icon-bullets list--inline">
<li><a href=""><i class="icon icon--envelope"></i>comms@staffs.ac.uk</a></li>
<li><a href=""><i class="icon icon--phone"></i>+44 7900 123456</a></li>
<li><a href=""><i class="icon icon--twitter"></i>StaffsUniNews</a></li>
<li><a href=""><i class="icon icon--twitter"></i>PressOffice</a></li>
</ul>
<p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
</div>
</div>
</div>
<div class="col-1/4@tablet-wide">
<div class="box box--with-abstitle box--bg-offwhite">
<div class="box__figure">
<img src="https://picsum.photos/500/200?random=1" alt="person" />
</div>
<div class="box__content">
<div class="box__abstitle title">
<h4 class="h4 title__highlight">Contact Us</h4>
</div>
<h5 class="box__title margin-y-none">Katie Holdcroft</h5>
<p>Representative for Austria</p>
<ul class="list--icon-bullets">
<li><a href=""><i class="icon icon--envelope"></i>comms@staffs.ac.uk</a></li>
<li><a href=""><i class="icon icon--phone"></i>+44 7900 123456</a></li>
<li><a href=""><i class="icon icon--twitter"></i>StaffsUniNews</a></li>
<li><a href=""><i class="icon icon--twitter"></i>PressOffice</a></li>
</ul>
<p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
</div>
</div>
</div>
</div>
<p>Box with an absolutely positioned title (mainly just for 'Contact Block')</p>
<p>We add extra padding to the top of the content if there isn't a figure present, but don't add more than a couple of words, or it'll overlap.</p>
<div class="grid grid--spaced grid-2-cols">
<div class="col-3/4@tablet-wide">
<div class="box box--with-abstitle box--bg-offwhite">
<div class="box__content">
<div class="box__abstitle title">
<h4 class="h4 title__highlight">Any Questions?</h4>
</div>
<h5 class="box__title margin-y-none">Katie Holdcroft</h5>
<p>Representative for Austria</p>
<ul class="list--icon-bullets list--inline">
<li><a href=""><i class="icon icon--envelope"></i>comms@staffs.ac.uk</a></li>
<li><a href=""><i class="icon icon--phone"></i>+44 7900 123456</a></li>
<li><a href=""><i class="icon icon--twitter"></i>StaffsUniNews</a></li>
<li><a href=""><i class="icon icon--twitter"></i>PressOffice</a></li>
</ul>
<p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
</div>
</div>
</div>
<div class="col-1/4@tablet-wide">
<div class="box box--with-abstitle box--bg-offwhite">
<div class="box__figure">
<img src="https://picsum.photos/500/200?random=1" alt="person"/>
</div>
<div class="box__content">
<div class="box__abstitle title">
<h4 class="h4 title__highlight">Contact Us</h4>
</div>
<h5 class="box__title margin-y-none">Katie Holdcroft</h5>
<p>Representative for Austria</p>
<ul class="list--icon-bullets">
<li><a href=""><i class="icon icon--envelope"></i>comms@staffs.ac.uk</a></li>
<li><a href=""><i class="icon icon--phone"></i>+44 7900 123456</a></li>
<li><a href=""><i class="icon icon--twitter"></i>StaffsUniNews</a></li>
<li><a href=""><i class="icon icon--twitter"></i>PressOffice</a></li>
</ul>
<p class="font-sm">For further advice, you can contact our Central Enquiries Team.</p>
</div>
</div>
</div>
</div>
.box {
position: relative;
background: white;
color: $text-color;
margin: 0 0 $spacing-xl;
&__figure {
img {
width: 100%;
}
}
&__content {
padding: calc(#{$spacing-sm} + 2.5%);
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
&__title {
margin-top: 0;
& * {
color: $dark-blue;
}
a {
text-decoration: none;
}
}
&__footer {
padding: $spacing-md calc(#{$spacing-sm} + 2.5%);
background: $dark-blue;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
//--
&--padded {
padding: calc(#{$spacing-sm} + 2.5%);
}
//-
&--has-shadow {
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.15);
}
//-
&--bg-offwhite {
background: $grey-50-pc;
& .box__footer {
background: $grey;
}
}
&--bg-greyblue-superlight {
background: $grey-50-pc;
}
&--bg-dark-blue, &--bg-slate {
background: $dark-blue;
color: #fff;
& .box__title * {
color: #fff;
}
& a.link--standard {
color: #fff;
text-decoration: none;
&:hover {
border-bottom: 0!important;
}
}
& .box__footer {
background: $grey;
}
}
&--bg-offwhite-gradient {
background: radial-gradient(45% 660% at 50% 50%, mix(#e3e3e3, white, 30%) 0%, mix(#ccc, white, 30%) 100%);
}
}
// -- VARIANTS
.box--with-abstitle {
// absolutely positioned title
.box__content:first-child {
padding-top: calc(#{$spacing-3xl} + 2.5%);;
}
.box__abstitle {
position: absolute;
top: 0.2rem;
left: 0;
}
.title__highlight {
color: $neon;
a {
color: $neon;
}
}
a {
color: black;
font-weight: 600;
border-color: #ccc!important;
}
}
// CG: Avoid "share this story" box clashing with long quotes in news stories
.box--share {
clear: right;
}