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">
<h3 class="uol-in-text-facts__title">
Long title and link name
</h3>
<div class="uol-in-text-facts__container ">
<a href="/facts-url" class="uol-in-text-fact__item uol-in-text-fact__link">
<h4 class="uol-in-text-fact__item__title">
7th in the UK for Accounting and Finance
</h4>
<p class="uol-in-text-fact__item__description">
The Times and The Sunday Times Good University Guide, 2024
</p>
</a>
</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": "Long title and link name",
"items": [
{
"title": "7th in the UK for Accounting and Finance",
"description": "The Times and The Sunday Times Good University Guide, 2024",
"url": "/facts-url"
}
]
}