<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
}
  • Content:
    /*
        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');
        }
    });
    
  • URL: /components/raw/text-block/text-block.js
  • Filesystem Path: components/components/text-block/text-block.js
  • Size: 517 Bytes
  • Content:
    .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;
        }
    }
    
  • URL: /components/raw/text-block/text-block.scss
  • Filesystem Path: components/components/text-block/text-block.scss
  • Size: 1.2 KB

Text Block (section) Component

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.

Key Features

  • Accessible Title and accessible markup
  • Optional Call to Action link(s)

Properties

Text Block

  • title [optional, string]
  • calltoaction [optional, Array of LinkObject]
  • content [required, block]
  • hasPublishedDate [optional, boolean, default false]

LinkObject

  • label [required, string]
  • href [required, string]