Blocks showing facts and figures on a page. One or two can be displayed but no more than two.
The root level title apears as a title above the facts blocks.
Each item should be contained within the items array and include a title a description, and an optional url field. Specifying a url value turns the block in to an active link to that URL.
By default the titles heading level tag will be set to H3 for the root level title and H4 for the item title. However this can be changed by using the property’s of title_heading_level and item_title_heading_level, where a H2 could be passed through for example for the root level title and H3 for the item title.
Please note H1 should not be used, as this will likely already be present on the page. Below is an example of how the compnent can be configured.
'context': {
'title': 'Rankings and Awards',
'items': [
{
'title': 'Top 10',
'description': 'in the UK for Earth and Marine services',
'url': '/facts-url'
},
{
'title': 'Silver',
'description': 'Athena Swan Award',
'url': '/facts-url'
}
]
}And here a variant showing how to set the heading levels:
'context': {
'title': 'Rankings and Awards',
'title_heading_level': 'h2',
'item_title_heading_level': 'h3',
'items': [
{
'title': 'Top 10',
'description': 'in the UK for Earth and Marine services',
'url': '/facts-url'
},
{
'title': 'Silver',
'description': 'Athena Swan Award',
'url': '/facts-url'
}
]
}Below is a list of combinations for the titles, please ensure that only these combinations are used.
'title_heading_level': 'h2',
'item_title_heading_level': 'h3',
Or:
'title_heading_level': 'h3',
'item_title_heading_level': 'h4',
Or:
'title_heading_level': 'h4',
'item_title_heading_level': 'h5',
Or finally:
'title_heading_level': 'h5',
'item_title_heading_level': 'h6',
Also please keep in mind the parent heading tag when deciding which combination to use. For example if the ‘In Text Facts’ were to be in a section with a H2 title, the combination would be H3 for root level title and H4 for item title, to ensure correct heading hierarchy.
<div class="uol-in-text-facts">
<{{ title_heading_level if title_heading_level else 'h3' }} class="uol-in-text-facts__title">
{{ title }}
</{{ title_heading_level if title_heading_level else 'h3' }}>
<div class="uol-in-text-facts__container {% if type %}uol-in-text-facts__container--{{ type }}{% endif %}">
{% for item in items %}
{% if item.url %}<a href="{{ item.url }}" class="uol-in-text-fact__item uol-in-text-fact__link">{% else %}<div class="uol-in-text-fact__item">{% endif %}
<{{ item_title_heading_level if item_title_heading_level else 'h4' }} class="uol-in-text-fact__item__title">
{{ item.title }}
</{{ item_title_heading_level if item_title_heading_level else 'h4' }}>
<p class="uol-in-text-fact__item__description">
{{ item.description }}
</p>
{% if item.url %}</a>{% else %}</div>{% endif %}
{% endfor %}
</div>
</div>
<div class="uol-in-text-facts">
<h2 class="uol-in-text-facts__title">
One fact
</h2>
<div class="uol-in-text-facts__container ">
<div class="uol-in-text-fact__item">
<h3 class="uol-in-text-fact__item__title">
In text facts item title
</h3>
<p class="uol-in-text-fact__item__description">
In text facts item description
</p>
</div>
</div>
</div>
.uol-in-text-facts {
margin-bottom: 0;
@include media(">=uol-media-m") {
margin-bottom: $spacing-6;
}
}
.uol-in-text-facts__title {
margin-bottom: $spacing-5;
@include media(">=uol-media-m") {
margin-bottom: $spacing-6;
}
}
h2.uol-in-text-facts__title,
h3.uol-in-text-facts__title,
h4.uol-in-text-facts__title,
h5.uol-in-text-facts__title,
h6.uol-in-text-facts__title {
color: $color-font--dark;
}
h2.uol-in-text-facts__title {
@extend .uol-typography-heading-2;
}
h3.uol-in-text-facts__title,
h3.uol-in-text-fact__item__title {
@extend .uol-typography-heading-3;
}
h4.uol-in-text-facts__title,
h4.uol-in-text-fact__item__title {
@extend .uol-typography-heading-4;
}
h5.uol-in-text-facts__title,
h5.uol-in-text-fact__item__title {
@extend .uol-typography-heading-5;
}
h6.uol-in-text-fact__item__title {
@extend .uol-typography-heading-6;
}
.uol-in-text-facts__container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.uol-in-text-fact__item {
width: 100%;
box-sizing: border-box;
background-color: $color-brand-2--bright;
color: $color-white;
text-align: center;
padding: $spacing-4 $spacing-5 $spacing-5;
@include media(">=uol-media-xs") {
padding: $spacing-4 $spacing-7 $spacing-5;
}
@include media(">=uol-media-m") {
padding: $spacing-4 $spacing-9 $spacing-5;
}
&:not(:only-child) {
@include media(">=uol-media-m") {
/*
when there's 2 facts (not only child) and resolution above 768px span in rows
width of each item is 50% - half gap between both
*/
padding: $spacing-4 $spacing-6 $spacing-5;
width: calc(50% - #{$spacing-5} / 2);
margin-bottom: 0;
}
@include media(">=uol-media-xl") {
width: calc(50% - #{$spacing-6} / 2);
}
}
}
.uol-in-text-fact__item:first-of-type {
@include media("<uol-media-m") {
margin-bottom: $spacing-4;
}
}
.uol-in-text-fact__item__title {
margin: 0 0 $spacing-1 0;
text-decoration: none;
}
.uol-in-text-fact__item__description {
@extend .uol-typography-paragraph;
margin: 0;
}
.uol-in-text-fact__link {
text-decoration: none;
&:hover,
&:focus-within {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, .12);
}
}
.uol-in-text-fact__link .uol-in-text-fact__item__description {
text-decoration: underline;
}
// Stacked variant - always stack items for all viewpoints - only for CLP
.uol-in-text-facts__container--stacked {
display: flex;
flex-direction: column;
align-content: center;
.uol-in-text-fact__item {
width: 444px;
margin-bottom: 2.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
{
"title": "One fact",
"items": [
{
"title": "In text facts item title",
"description": "In text facts item description"
}
],
"title_heading_level": "h2",
"item_title_heading_level": "h3"
}