No notes defined.
<div {% if id %}id="{{ id }}"{% endif %} class="ds2ContentBlock">
{% for item in content %}
{% if item.uolLogo %}
<div class="ds2ContentBlockUolLogo">{% render '@uol-logo-uol' %}</div>
{% endif %}
{% if item.preheading %}
<div class="preheading">{{ item.preheading }}</div>
{% endif %}
{% if item.title %}
<h2>{{ item.title }}</h2>
{% endif %}
{% if item.subtitle %}
<h3>{{ item.subtitle }}</h3>
{% endif %}
{% if item.paragraph %}
<p>{{ item.paragraph }}</p>
{% endif %}
{% if item.inlineButtons %}
<div class="inlineButtons">
{% for inlineButton in item.inlineButtons %}
<div class="brandButton">
{{ inlineButton.text }}
</div>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="ds2ContentBlock">
<div class="preheading">Preheading</div>
<div class="ds2ContentBlockUolLogo"><svg version="1.1" id="Primary" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#000000" viewBox="0 0 1297.6 262.6" style="enable-background:new 0 0 1297.6 262.6;" xml:space="preserve">
<g>
<polygon class="st0" points="157,84 161.2,84 161.2,80.2 154.4,80.2 154.4,91.6 157,91.6 " />
<polygon class="st0" points="162.4,169 167,169 167,127.4 177.2,127.4 177.2,119.8 162.4,119.8 " />
<polygon class="st0" points="142,169 146.6,169 146.6,127.4 156.8,127.4 156.8,119.8 142,119.8 " />
<path class="st0" d="M184.2,206.9c0-8.4-6.6-14.2-14.4-14.2c-7.8,0-14.4,5.8-14.4,14.2c0,8.4,6.6,14.2,14.4,14.2
C177.6,221.1,184.2,215.3,184.2,206.9z M160.8,206.9c0-5.4,4.2-9,9-9c4.8,0,9,3.6,9,9c0,5.4-4.2,9-9,9
C165,215.9,160.8,212.3,160.8,206.9z" />
<polygon class="st0" points="169,84 173.2,84 173.2,80.2 166.4,80.2 166.4,91.6 169,91.6 " />
<polygon class="st0" points="181,84 185.2,84 185.2,80.2 178.4,80.2 178.4,91.6 181,91.6 " />
<polygon class="st0" points="182.8,169 187.4,169 187.4,127.4 197.6,127.4 197.6,119.8 182.8,119.8 " />
<path class="st0" d="M0,0.7v261h114.2v-69.1H142v69.1h4.6V184H193v77.7h4.6v-69.1h27.8v69.1H261V0.7H0z M169.6,30.7h0.4l26.8,16.4
h-54L169.6,30.7z M142.4,50.3h54.8L200,70h-60.4L142.4,50.3z M219.6,188h-22v-8.6H142v8.6h-22v-19.2h3.8V106h6V73.4h80V106h6v62.8
h3.8V188z" />
<polygon class="st0" points="137.2,112.8 202.4,112.8 205.2,108.6 134.4,108.6 " />
</g>
<g id="Primary_00000077314402275668378130000000421217089280598159_">
<path class="st0" d="M1195.6,1.4l39.4,68.4v44.8h23.4V70l39.2-68.6H1273l-17.2,31.8c-2.8,4.8-6,10.8-8.4,16h-0.2
c-2.6-5.2-5.6-11.4-8.4-16.2l-17.2-31.6H1195.6z M1095,20.8h33.8v93.8h23.6V20.8h33.8V1.4H1095V20.8z M1053.6,114.6h23.4V1.4h-23.4
V114.6z M970.8,252c8.2,5.4,19.8,10.6,36,10.6c24,0,41.6-13.2,41.6-34.2c0-35.6-48.8-33.2-48.8-52.6c0-6.8,6.6-10.2,15-10.2
c9.4,0,17.4,3,27,8.2l0.4-20.6c-6.4-3.6-16.6-6.8-28.4-6.8c-25,0-38.6,15.2-38.6,32.4c0,8.8,2.8,15.2,7.2,20.2
c13.8,15.6,41.4,18.2,41.4,33.2c0,8.4-9.2,11.4-17.8,11.4c-10.2,0-18.6-4.2-26-8.8L970.8,252z M955.8,105.6
c8,5.4,19.8,10.6,36,10.6c24,0,41.6-12.6,41.6-34.4c0-34.8-49-33.4-49-52.6c0-6.6,6.8-10.2,15-10.2c9.4,0,17.6,3.2,27.2,8.4
l0.4-20.6C1020.4,3,1010.2,0,998.4,0c-25,0-38.4,15.2-38.4,32.4c0,8.8,2.6,15.2,7,20.2c14,15.6,41.4,18,41.4,33
c0,8.6-9.2,11.4-17.6,11.4c-10.2,0-18.8-4-26-8.6L955.8,105.6z M884.8,241.4v-74h14.4c23.2,0,37.4,14.4,37.4,37
c0,22.2-14.2,37-37.4,37H884.8z M884.6,53.6V20.8h10c11.2,0,17.6,6.6,17.6,15.6c0,9.8-7.6,17.2-17.6,17.2H884.6z M861.2,114.6h23.4
V70.8h9c4,1.6,10.8,14.4,28,43.8h27c-17.2-29-28-48.2-33.8-51.2v-0.2c10.4-4.8,20.6-14.6,20.6-29.4c0-17.4-11-32.4-41.2-32.4h-33
V114.6z M861.2,261h37.6c36.8,0,62.4-23.2,62.4-57.2c0-33.2-23.6-56-62-56h-38V261z M775,114.6h65.8V95.2h-42.2V66.4h36.2V47h-36.2
V20.8h41.8V1.4H775V114.6z M775,261h65.8v-19.4h-42.4V213h36.4v-19.6h-36.4v-26.2h42v-19.4H775V261z M689,261h65.8v-19.4h-42.2V213
h36.2v-19.6h-36.2v-26.2h41.8v-19.4H689V261z M647.2,1.4l47,114h18.6l48.4-114h-24l-24.8,60.4c-2.8,7.2-5.4,14.2-7.6,21h-0.4
c-2.4-6.8-4.8-13.6-7.8-21L673,1.4H647.2z M609.8,114.6h23.6V1.4h-23.6V114.6z M609.8,261h63v-19.4h-39.4v-93.8h-23.6V261z
M494.8,261h23.4v-47.6h35V194h-35v-26.8h41.2v-19.4h-64.6V261z M479.4,114.6h23.4v-62c0-5.2,0-12.2-0.4-15.8h0.4
c3,5,6.4,9.4,10.8,15l49,62.8h22V1.4h-23.4V59c0,4.8,0,12.2,0.2,17.6h-0.2c-3.2-4.8-6.2-9-10.8-14.8L503,1.4h-23.6V114.6z
M379.6,204.4c0-23.4,15.4-38.6,35.8-38.6S451,181,451,204.4c0,23.6-15.2,38.8-35.6,38.8S379.6,228,379.6,204.4 M358.6,70.4
c0,30,16.6,45.8,48.2,45.8c30.4,0,49.4-15.4,49.4-46.2V1.4h-23.6v68.4c0,17.4-8.6,26.6-25.4,26.6c-15.8,0-25-9.6-25-26.6V1.4h-23.6
V70.4z M415.4,262.6c34.4,0,60.2-24.6,60.2-58.2c0-33.4-25.8-58.2-60.2-58.2c-34.6,0-60.4,24.8-60.4,58.2
C355,238,380.8,262.6,415.4,262.6" />
</g>
</svg>
</div>
<h2>Title</h2>
<h3>Subtitle</h3>
<p>Paragraph. Usage note: When using logo, this acts as title so don't include title</p>
<div class="inlineButtons">
<div class="brandButton">
Button text
</div>
<div class="brandButton">
Button text
</div>
</div>
</div>
.ds2ContentBlock {
font-family: uolInter, "Arial";
.preheading {
font-family: uolSans, sans-serif;
font-weight: 100;
font-size: 18px;
margin: 16px 0;
@include media(">=uol-media-s") {
font-size: 18px;
}
}
.ds2ContentBlockUolLogo {
svg {
max-height: 90px;
max-width: 100%;
}
}
h1, h2, h3, h4, h5 {
font-family: uolSans, sans-serif;
}
h2 {
font-size: 32px;
margin: 16px 0;
@include media(">=uol-media-s") {
font-size: 48px;
}
@include media(">=uol-media-l") {
font-size: 64px;
margin: 24px 0;
}
}
h3 {
font-size: 24px;
font-weight: 100;
margin: 16px 0;
@include media(">=uol-media-l") {
font-size: 32px;
margin: 24px 0;
}
}
p {
font-size: 16px;
margin: 16px 0;
}
// TODO: Put in new button component when built
.inlineButtons {
margin: 16px 0;
@include media(">=uol-media-l") {
margin: 24px 0;
}
.brandButton {
width: 100%;
box-sizing: border-box;
border-radius: 4px;
padding: 0 32px;
height: 52px;
margin-right: 0;
display: inline-flex;
align-items: center;
background: $brand-black;
color: $brand-white;
&:not(:last-of-type) {
margin-bottom: 16px;
}
@include media(">=uol-media-s") {
width: inherit;
margin-right: 16px;
&:not(:last-of-type) {
margin-bottom: 0;
}
}
}
}
// To ensure vertically centered remove margins from top and bottom elements
& :first-child {margin-top: 0;}
& :last-child {margin-bottom: 0;}
}
// TODO: to put in some other component - can probably do with a mixin
.bgbrand-vivid-green {background: $brand-vivid-green;}
.bgbrand-teal {background: $brand-teal;}
.bgbrand-dark-blue {background: $brand-dark-blue;}
.bgbrand-pink {background: $brand-pink;}
.bgbrand-white {background: $brand-white;}
.fgbrand-black {color: $brand-black;}
.fgbrand-white {color: $brand-white;}
{
"content": [
{
"preheading": "Preheading"
},
{
"uolLogo": true
},
{
"title": "Title"
},
{
"subtitle": "Subtitle"
},
{
"paragraph": "Paragraph. Usage note: When using logo, this acts as title so don't include title"
},
{
"inlineButtons": [
{
"text": "Button text",
"url": "#",
"fgColour": "brand-black",
"bgColour": "brand-pink"
},
{
"text": "Button text",
"url": "#",
"fgColour": "brand-black",
"bgColour": "brand-teal"
}
]
}
]
}