<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="media-embed">
    <figure class="media-embed-fig">
        <img class="media-embed-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" alt="" />
        <figcaption class="media-embed-caption">
            <span class="media-embed-caption-background">Scarlet honey eater bird</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>
<section class="media-embed">
    <figure class="media-embed-fig">
        <img class="media-embed-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" alt="" />
        <figcaption class="media-embed-caption">
            <span class="media-embed-caption-background">Scarlet honey eater bird</span>
        </figcaption>
    </figure>
</section>
<section class="media-embed">
    <figure class="media-embed-fig">
        <img class="media-embed-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" alt="" />
        <figcaption class="media-embed-caption">
            <span class="media-embed-caption-background">Scarlet honey eater bird</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>
<section class="media-embed">
    <figure class="media-embed-fig">
        <img class="media-embed-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" alt="" />
        <figcaption class="media-embed-caption">
            <span class="media-embed-caption-background">Scarlet honey eater bird</span>
        </figcaption>
    </figure>
</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 '@image-embed' with {
    path: '/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg',
    caption: 'Scarlet honey eater bird'
} %}
{% 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 %}
{% include '@image-embed' with {
    path: '/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg',
    caption: 'Scarlet honey eater bird'
} %}
{% include '@image-embed' with {
    path: '/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg',
    caption: 'Scarlet honey eater bird'
} %}
{% 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 %}
{% include '@image-embed' with {
    path: '/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg',
    caption: 'Scarlet honey eater bird'
} %}
{
  "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]