University of Derby

Feature Block 

<section class="feature-block">
    <p>Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p>
    <p>Now DEFRA (Department for the Environment, Food and Rural Affairs) has made re-connecting people with nature a key theme in its new 25-year plan; a document that our researchers contributed to.</p>
</section>
 
<section class="{% if scheme %}feature-block-{{ scheme }}{% else %}feature-block{% endif %}">
    {% if content %}
        {{ content }}
    {% else %}
        {% block content %}{% endblock %}
    {% endif %}
</section>
 
{
  "content": "<p>Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p><p>Now DEFRA (Department for the Environment, Food and Rural Affairs) has made re-connecting people with nature a key theme in its new 25-year plan; a document that our researchers contributed to.</p>"
}
  • Content: 
    .feature-block {
    @include large-body-font;
    
    background: $primary-blue;
    padding: fluid-margin();
    color: $white;

    @include for-largerthan-ipad-portrait {
        padding: $max-size;
    }

    a:not([class^='button']), a:link:not([class^='button']) {
        background-image: linear-gradient(transparent calc(100% - .1em), $white .1em);
        color: $white;
    }

    &-white {
        @extend .feature-block;
        background: $white;
        color: $text-black;

        a:not([class^='button']), a:link:not([class^='button']) {
            background-image: linear-gradient(transparent calc(100% - .1em), $mid-blue .1em);
            color: $mid-blue;
        }
    }

    &-blue {
        @extend .feature-block;
        background: $primary-blue;
    }

    &-black {
        @extend .feature-block;
        background: $black;
    }

    &-turquoise {
        @extend .feature-block;
        background: $turquoise;
    }
}

/*
    When adding feature blocks to WYSIWYG areas in T4 the feature block class is applied to p tags
    For styling multiple consequetive paragraphs as a feature block we need to do some offsetting...
*/
.text-block > .feature-block + .feature-block {
    margin-top: -#{$margin-medium-offset};
    
    @include for-tablet-portrait-up {
        margin-top: -#{$margin-large-offset};
    }
}
  • URL: /components/raw/feature-block/feature-block.scss
  • Filesystem Path: components/atoms/feature-block/feature-block.scss
  • Size: 1.4 KB
  • Content: 
    .feature-block {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: $white;
    }

    &-blue {
        @extend .feature-block;
        background: $primary-blue;
    }

    &-white {
        @extend .feature-block;
        background: $white;
        color: $text-black;
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: $text-black;
        }
    }
}
  • URL: /components/raw/feature-block/feature-block.tinymce-excludes.scss
  • Filesystem Path: components/atoms/feature-block/feature-block.tinymce-excludes.scss
  • Size: 417 Bytes

There are no notes for this item.