candidate

Data item

Use the data item component when you want to display a number from some data.

Open example in new window
HTML 


<div class="data-item ">
    <span class="data-item__number">67</span>
    <span class="data-item__label">New resources</span>
</div>



<div class="data-item data-item--s">
    <span class="data-item__number">0</span>
    <span class="data-item__label">New resources</span>
</div>
Jinja 
{%- from "design-system/components/data-item/macro.html" import dlfDataItem %}
{{ dlfDataItem({
    "number": "67",
    "text": "New resources"
    })
}}

{{ dlfDataItem({
    "number": "0",
    "text": "New resources",
    "classes": "data-item--s"
    })
}}

When not to use

This component shouldn't be used for any number on a page, it is intended to be used to display a significant piece of data or information.

Inline example

Add a .data-item--inline class if you need the data item to display inline.

Open example in new window
HTML 


<div class="data-item data-item--inline">
    <span class="data-item__number">2</span>
    <span class="data-item__label">New resources</span>
</div>



<div class="data-item data-item--inline data-item--s">
    <span class="data-item__number">3</span>
    <span class="data-item__label">New resources</span>
</div>
jinja 
{%- from "design-system/components/data-item/macro.html" import dlfDataItem %}
{{ dlfDataItem({
    "number": "2",
    "text": "New resources",
    "classes": "data-item--inline"
    })
}}

{{ dlfDataItem({
    "number": "3",
    "text": "New resources",
    "classes": "data-item--inline data-item--s"
    })
}}