<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" role="button" tabindex="0" data-scroll>
        Call to action button
        </a> </section>
<section class="full-width-image">
    <figure class="full-width-image-fig">
        <img class="full-width-image-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" srcset="../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg 320w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_517.jpg 517w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_685.jpg 685w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_767.jpg 767w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_694.jpg 694w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_720.jpg 720w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_480.jpg 480w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_810.jpg 810w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1077.jpg 1077w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1274.jpg 1274w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1461.jpg 1461w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1643.jpg 1643w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1700.jpg 1700w, ../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg"
            alt="" />
        <figcaption class="full-width-image-caption">
            <span class="full-width-image-caption-background">Scarlet honey eater bird. This caption has really, unreasonably long caption text to illustrate what would happen if there was an awful lot of text associated with an image.</span>
        </figcaption>
    </figure>
</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" 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 %}
{% include '@full-width-image' with {
    label: 'Scarlet honey eater bird',
    path: '/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg',
    caption: 'Scarlet honey eater bird. This caption has really, unreasonably long caption text to illustrate what would happen if there was an awful lot of text associated with an image.',
    srcset: [{
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg',
        width: 320
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_517.jpg',
        width: 517
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_685.jpg',
        width: 685
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_767.jpg',
        width: 767
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg',
        width: 538
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_694.jpg',
        width: 694
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg',
        width: 596
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_720.jpg',
        width: 720
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_480.jpg',
        width: 480
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_810.jpg',
        width: 810
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1077.jpg',
        width: 1077
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1274.jpg',
        width: 1274
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1461.jpg',
        width: 1461
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1643.jpg',
        width: 1643
    },
    {
        path: '/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1700.jpg',
        width: 1700
    }
]
} %}
{% 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>",
  "calltoaction": [
    {
      "label": "Call to action button",
      "href": "#"
    }
  ],
  "hasPublishDate": null
}
  • Content:
    /*
        Buttons within text blocks in the CMS will be WYSIWYG fields
        To get the hoverr styles to work we need to add the overlay html with js...
    /*/
    $('.text-block [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: 482 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 {
            margin-bottom: 0;
        }
    }
    
  • URL: /components/raw/text-block/text-block.scss
  • Filesystem Path: components/components/text-block/text-block.scss
  • Size: 582 Bytes

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]