University of Derby

Text Block: In Context 

<section class="text-block" role="region" aria-labelledby="research-description">
    <h2 id="research-description">Research description</h2>
    <p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led
        this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
    <p>The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
</section>
<section class="text-block" role="region" aria-labelledby="research-description">
    <h2 id="research-description">Research description</h2>
    <p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led
        this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
    <p>The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
    <a href="#" class="button-outline" title="Research description" role="button" tabindex="0" data-scroll>
        View joint honours options
        </a> </section>
 
{% embed '@text-block' with { title: 'Research description' } %}
    {% block content %}
        <p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
        <p>The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
    {% endblock %}
{% endembed %}
{% embed '@text-block' with { title: 'Research description', calltoaction: [{ label: 'View joint honours options', href: '#' }]} %}
    {% block content %}
        <p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
    {% endblock %}
{% endembed %}
 
{
  "title": "Text block title",
  "content": "<p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>\n        <p>The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</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]