NVP

NVPs (Narrative Visualisation Patterns) are used to help organise information into a clear format that can be understood at a glance.

NVPs make it easy to present terms and definitions clearly, helping users quickly scan and understand key information. You can also add optional styling or icons to enhance readability and make each term's purpose more obvious.

When to use this component

Use NVPs when you want to present information in a story-driven, organised format that's easy to read and visually engaging. They're excellent for guiding users through key points without overwhelming the page with too much text.

It's a good idea to separate each part of the narrative to keep each point distinct, ensuring clarity and focus. For minor details, consider subtle styling to keep the primary narrative prominent without distractions.

If users need to select or interact with options, use checkboxes, radio buttons, or toggle switches instead of static elements within the NVP.

NVPs can also be a great alternative to tables when you want to communicate information in a clean, visually compelling way

Examples in GOSS products

Event template to show the event data
Case Management to keep the structure of the details same across the templates
Dates displayed in most products and templates

Accessibility considerations

NVPs are excellent for accessibility because they present information in a clear, structured way that screen readers can navigate easily, making content accessible to users with various abilities.

Each part of the narrative should be concise and descriptive, allowing users to understand the key points at a glance.

To enhance accessibility, ensure there's sufficient contrast between text and background, and use spacing and alignment to maintain clarity and readability throughout the visualisation.

Additionally, avoid using NVPs for interactive elements like options or controls, and test with assistive technologies to ensure compatibility.

Basic NVP

An NVP component with no additional configuration options keeps things simple, presenting information in a clear, story-driven format.

The paragraph element on the nvp block can be switched for another element, for example
- Span element if the data is within a block of text <span>
- List item elements if the data is within a list <li> making sure you wrap the element in an ordered or unordered list <ul> or <ol>

NVP label NVP value

HTML

<p class="nvp">
	<span class="nvp__label">
		NVP label
	</span>
	<span class="nvp__value">
		NVP value
	</span>
</p>

Hiding label NVP

A NVP with a visually hidden label

span class="nvp__label accessibility">...</span>

Add accessibility to the nvp__label element and the label should be there to explain to screenreaders what the date means in context.

You don't have to render the label markup if the value is within a table structure as the label will come from the <th> element within the value cell's column.

NVP label hidden visually NVP value

HTML Handlebars

<p class="nvp nvp--modifier">
    <span class="nvp__label accessibility">NVP label hidden visually</span>
        <span class="nvp__value">
                <span class="nvp__date">NVP value</span>						
    </span>
</p>

<p class="nvp nvp--modifier">
    <span class="nvp__label accessibility">Date label</span>
        <span class="nvp__value">
                <span class="nvp__date">{{formatDate date "%A %d %B %Y"}}}</span>						
    </span>
</p>

Date and time NVP

A NVP with the date and time structure.

To find out more about date structures, visit our date page.

Date label Wednesday 30 September 2024 at 10:37pm

HTML Handlebars

<p class="nvp nvp--modifier">
	<span class="nvp__label">Date label</span>
	<span class="nvp__value">
		<span class="nvp__date">Wednesday 30 September 2024</span>
		<span class="nvp__time"> at 10:37pm</span>
	</span>
</p>

<p class="nvp nvp--modifier">
    <span class="nvp__label">Date label</span>
        <span class="nvp__value">
                <span class="nvp__date">{{formatDate date "%A %d %B %Y"}}</span>						
    </span>
</p>

Additional NVP styles

NVP with additional modifiers to style it for specific purposes.

Assisted service user NVP

nvp--as nvp--as-user

Assisted service task NVP

nvp--as nvp--as-task

Assisted service time NVP

nvp--as nvp--as-time

Blog category NVPnvp--blog-categories

Classified price NVP

nvp--classified-price

Service location NVP

nvp--service-contact

Service contact NVP

nvp--service-location

Assisted Service user Username

Assisted Service task Task name

Assisted Service time Time taken

Blog category Category

Classified price £9.99

Service location United Kingdom

Service contact 01234 567890