<section class="text-block" role="region" aria-labelledby="text-block-with-a-long-mailto-link">
<h2 id="text-block-with-a-long-mailto-link">Text block with a long mailto link</h2>
<p>If you have any questions relating to the accommodation of students who are under 18 please contact us by email at <a href="mailto:[email protected]">[email protected]</a></p>
</section>
<section class="text-block{% if hasPublishedDate %} text-block-published-date{% endif %}{% if isCoursePageHeading %} text-block-course-page-heading{% endif %}" role="region" {% if title %} aria-labelledby="{{ title | lower | replace({ ' ' : '-' }) }}" {% endif %}>
{% if title %}<h2 id="{% if id %}{{ id }}{% else %}{{ title | lower | replace({ ' ' : '-' }) }}{% endif %}">{{ title }}</h2>{% endif %}
{% if content %}
{{ content }}
{% else %}
{% block content %}{% endblock %}
{% endif %}
{% if calltoaction and calltoaction.length > 0 %}
{% for index, link in calltoaction %}
{% include '@button' with {
label: link.label,
href: link.href,
primary: index == 0 and calltoaction.length > 1,
hideOverlay: true
} %}
{% endfor %}
{% endif %}
</section>
{
"title": "Text block with a long mailto link",
"content": "<p>If you have any questions relating to the accommodation of students who are under 18 please contact us by email at <a href=\"mailto:[email protected]\">[email protected]</a></p>",
"hasPublishDate": null,
"isCoursePageHeading": null
}
/*
Buttons within text blocks in the CMS will be WYSIWYG fields
To get the hover styles to work we need to add the overlay html with js...
/*/
$('.text-block a[class*="button"], .feature-block a[class*="button"]').each(function () {
//check if an overlay exists, if not...
if ($('.button-overlay', $(this)).length == 0) {
var text = $(this).html();
$(this).html(text + '<span class="button-overlay"><span>' + text + '</span></span>');
$(this).attr('role', 'button');
}
});
.text-block {
// mixin that sets a consistent columns width
@include uod-text-column;
// start: set default intra-component spacing (units are responsive and based on em values)
@include margin-medium;
@include for-tablet-portrait-up {
@include margin-large;
}
// end: set default intra-component spacing (units are responsive and based on em values)
@include for-desktop-up {
table {
lost-offset: -2/16;
lost-column: 20/16;
}
}
&-published-date {
// same margin as h5...
margin-bottom: .5em;
@include for-tablet-portrait-up {
margin-bottom: px-to-em(10, 18);
}
}
&-course-page-heading {
margin-bottom: 0;
}
// when we want a text block to display directly after another with margins replicating a pargraph, as opposed to a normal text block
&-display-inline {
@include margin-medium-offset;
@include for-tablet-portrait-up {
@include margin-large-offset;
}
}
img, iframe {
max-width: 100%;
}
a:not([class*="button"]) {
// word-wrap: break-word;
word-break: break-word;
}
}
A block of text which is contextually standalone. Includes accessible markup and features a larger visual space below the content to separate it from subsequent content. Block contents should be WYSIWYG, so multiple headings, paragraphs, basic links and lists are all supported within it.