Highlight text
Highlight-text is used to differentiate a block of text from it's surroundings.
Highlight-text is used to differentiate a block of text from it's surroundings.
I’ve had a lot of job titles over the years including UX developer, Experience designer, Front end developer, User centered designer, Service designer and now Interaction designer.
Use the tabs to view the highlight text source code.
<p class="highlight-text margin-bottom">
I’ve had a lot of job titles over the years including UX developer, Experience designer, Front end developer,
User centered designer, Service designer and now Interaction designer.
</p>
/*
Highlight text
----------------------------------- */
.highlight-text {
padding: 1rem;
border-left: solid 4px var(--colour-pink);
max-width: 80%;
margin-top: var(--flow-space);
background: var(--colour-grey-light);
}
.highlight-text p {
max-width: 100%;
}