Back to the pattern library

Signposts: Group With Paragraph

Signpost navigation is used in pages to link to permanent content.

Example

Example

HTML

<div class "coop-l-row">
    <div class="coop-l-column coop-l-small-12 coop-l-medium-6">
        <a href="#" class="coop-c-signpost">
            <h3 class="coop-c-signpost__title">Colleague benefits</h3>
            <p class="coop-c-signpost__text">Discounts, pensions, health and wellbeing, help wirth your finances, advice and support.</p>
        </a>
    </div>
    <div class="coop-l-column coop-l-small-12 coop-l-medium-6">
        <a href="#" class="coop-c-signpost">
            <h3 class="coop-c-signpost__title">MyHR</h3>
            <p class="coop-c-signpost__text">Your personal, employment information and performance documents.</p>
        </a>
    </div>
</div>

SCSS

To use this component in your service add this import in your main SCSS file:

@import 'node_modules/@coopdigital/coop-frontend-components/navigation/signposts/_signposts.scss';

Customise this component by following the guide here.

JS

Design and content

We are currently working on this section.

Variations on this pattern

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change