Components menu
Inset text
Used to highlight a block of text from the content that surrounds it. For example, a quote or something added to the main content.
When to use this component
Use the inset text component to differentiate a block of text from the content that surrounds it, for example:
- quotes
- examples
- additional information about the page
When not to use this component
Some users do not notice inset text if it’s used on complex pages or near to other visually prominent elements. For this reason, avoid using inset text as a way of highlighting very important information that users need to see.
If you need to draw attention to very important content, like legal information, use the Warning text component instead.
How it works
Use inset text very sparingly - it’s less effective if it’s overused.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
HTML
<div class="inset--text">
<div class="visually-hidden">Information</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
CSS
/* Inset text
------------------------------------ */
.inset--text {
border-left: 10px solid var(--scottish-teal);
color: var(--grey-one);
font-weight: 400;
padding-left: 25px;
padding-right: 16px;
position: relative;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding-top: calc(1.5rem + -1px);
padding-bottom: calc(1.5rem + -1px);
}
.inset--text:first-child {
margin-top: 0;
}
.inset--text > :last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.inset--text {
padding-right: 72px;
padding-top: calc(2rem + -1px);
padding-bottom: calc(2rem + -1px);
margin-bottom: 2rem;
}
}