There are no notes for this item.
<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-greyblue-superlight">
<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-greyblue-superlight">
<div class="box__figure">
<img src="https://placeimg.com/500/200/people" 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-greyblue-superlight">
<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-greyblue-superlight">
<div class="box__figure">
<img src="https://placeimg.com/500/200/people" 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;
a {
text-decoration: none;
}
}
&__footer {
padding: $spacing-md calc(#{$spacing-sm} + 2.5%);
background: rgba(0, 0, 0, 0.05);
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-color: $offwhite;
}
&--bg-greyblue-superlight {
background-color: $greyblue--superlight;
}
&--bg-slate {
background-color: $slate;
color: #fff;
}
&--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;
left: 0;
}
}