New CKeditor Component. This component was built for the Campaign Landing Page (Online Courses) template. It is used on the Campaign Landing Page and the subsequent Confirmation Page.
This component provides a full page width section break with a visual separation provided by a background colour which extends to the edge of the page.
Only the following elements should be used within the Content Highlight component.
Depending on layout configuration the initial heading should be a H1 or a H2 to ensure correct heading hierarchy flow throughout the page. The two examples given above showcase each variation:
On the campaign landing page, the full width component is further down the page, and the page already has a H1 tag. This means that no subsequent sections including the full width component can have a H1 tag, so in this instance set the title to be a H2.
For the confirmation page, the full width component is the first and lead section of the page and it’s subsequent heading therefore should be a H1.
We have provided two variants as examples, one with all the components listed above and one with just a title and paragraph.
Below shows an example of how the Content Highlight component (@uol-full-width-content) can be used, by passing the following values:
{
'full_width_content': {
'style_lead': false,
'content': `
<h2>Course overview</h2>
<p>Disability is an important equality and human rights issue, with disabled people more likely to experience poverty and receive fewer education and employment opportunities than non-disabled people.</p>
`
}
}
<section class="uol-full-width-content">
<div class="uol-full-width-content__outer-container">
<div class="uol-full-width-content__inner-container">
<div class="uol-rich-text uol-spacing {{ 'uol-full-width-content--with-lead' if full_width_content.style_lead }}">
{{ full_width_content.content | safe }}
</div>
</div>
</div>
</section>
<section class="uol-full-width-content">
<div class="uol-full-width-content__outer-container">
<div class="uol-full-width-content__inner-container">
<div class="uol-rich-text uol-spacing uol-full-width-content--with-lead">
<h2>Course overview</h2>
<p>Disability is an important equality and human rights issue, with disabled people more likely to experience poverty and receive fewer education and employment opportunities than non-disabled people.</p>
</div>
</div>
</div>
</section>
.uol-full-width-content {
background-color: $color-brand-2--light;
box-sizing: border-box;
@include media(">=uol-media-l") {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
/*
change width from 100% to calculation based on vw to account for minor gap which 100% width causes
width: 100%
*/
max-width: calc(100vw - 10px);
}
}
.uol-full-width-content__outer-container {
box-sizing: border-box;
max-width: 103.75rem;
margin: 0 auto;
}
.uol-full-width-content__inner-container {
padding: $spacing-6 $spacing-4;
margin: 0 auto;
.uol-rich-text,
.uol-rich-text>*,
.uol-rich-text>*>*,
.uol-rich-text img {
max-width: none;
}
@include media(">=uol-media-s") {
padding: $spacing-7 0;
margin-left: calc(100% / 12 * 1 + 1rem);
margin-right: calc(100% / 12 * 1 + 1rem);
}
@include media(">=uol-media-l") {
margin-left: calc(100% / 12 * 1 + 1.3rem);
margin-right: calc(100% / 12 * 4 + 1rem);
}
@include media(">=uol-media-xl") {
margin-left: calc(100% / 12 * 1 + 1.8rem);
margin-right: calc(100% / 12 * 5 + 1.1rem);
}
.uol-rich-text h1:first-child,
.uol-rich-text h2:first-child,
.uol-rich-text h3:first-child {
// To overwrite inherited property's important.
margin-top: 0!important;
margin-bottom: $spacing-5;
@include media(">=uol-media-m") {
margin-bottom: $spacing-6;
}
}
.uol-rich-text h3:first-child {
margin-bottom: $spacing-4;
}
.uol-rich-text .uol-featured-image:last-of-type,
.uol-rich-text p:last-of-type {
margin-bottom: 0;
}
}
.uol-full-width-content--with-lead.uol-rich-text p:first-of-type {
@extend %text-size-paragraph--intro;
}
{
"full_width_content": {
"style_lead": true,
"content": "\n <h2>Course overview</h2>\n <p>Disability is an important equality and human rights issue, with disabled people more likely to experience poverty and receive fewer education and employment opportunities than non-disabled people.</p>\n "
}
}