<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>
    <table>
        <thead>
            <tr>
                <th>Room Type</th>
                <th>Located at which halls?</th>
                <th>Quantity across Derby</th>
                <th>What's included?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Standard</td>
                <td>SPHC, PAC, SCC, LH </td>
                <td>1000</td>
                <td>In room: single bed, wash basin, wardrobe, desk and chair.</td>
            </tr>
            <tr>
                <td>En-suite</td>
                <td>SPHC, PAC </td>
                <td>50</td>
                <td>In room: small double bed, en suite, wardrobe, desk, chair, storage space, modern décor.</td>
            </tr>
            <tr>
                <td>Bigger en-suite</td>
                <td>SPHC, PAC </td>
                <td>300</td>
                <td>In room: small double bed, en suite, wardrobe, desk, chair, storage space</td>
            </tr>
        </tbody>
    </table>

</section>
{% embed '@text-block' with { title: 'Research description' } %}
    {% set 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>
        <table>
            <thead>
                <tr>
                    <th>Room Type</th>
                    <th>Located at which halls?</th>
                    <th>Quantity across Derby</th>
                    <th>What's included?</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Standard</td>
                    <td>SPHC, PAC, SCC, LH </td>
                    <td>1000</td>
                    <td>In room: single bed, wash basin, wardrobe, desk and chair.</td>
                </tr>
                <tr>
                    <td>En-suite</td>
                    <td>SPHC, PAC </td>
                    <td>50</td>
                    <td>In room: small double bed, en suite, wardrobe, desk, chair, storage space, modern décor.</td>
                </tr>
                <tr>
                    <td>Bigger en-suite</td>
                    <td>SPHC, PAC </td>
                    <td>300</td>
                    <td>In room: small double bed, en suite, wardrobe, desk, chair, storage space</td>
                </tr>
            </tbody>
        </table>
    {% endset %}
{% 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]