Data Field

Open in Figma View all renders

Data Field Button

The data field is a standalone component, but it is closely related to the data row, which requires it. 

<button class="data-field">
    <span>
        <span class="data-field__label">
            label
        </span>
        <span class="data-field__content">
            content
        </span>
    </span>
    <span>
        <span class="data-field__icon">
            <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
        </span>
        <span class="data-field__meta">
            863kb
        </span>
    </span>
</button>

Data Field Link

An interactive data field can be a link - this would be appropriate for data fields that navigate to other pages, or for downloading items. 

<a href="#" class="data-field">
    <span>
        <span class="data-field__label">
            label
        </span>
        <span class="data-field__content">
            content
        </span>
    </span>
    <span>
        <span class="data-field__icon">
            <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
        </span>
        <span class="data-field__meta">
            863kb
        </span>
    </span>
</a>

Non interactive Data Field

This non interactive data field can be used when the user should not expect the field to do something. 

<div class="data-field">
    <span>
        <span class="data-field__label">
            label
        </span>
        <span class="data-field__content">
            content
        </span>
    </span>
    <span>
        <span class="data-field__icon">
            <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
        </span>
        <span class="data-field__meta">
            863kb
        </span>
    </span>
</div>

Variations and modifiers

Data Field no Meta

A data field will usually not require meta data. 

<button class="data-field">
    <span>
        <span class="data-field__label">
            label
        </span>
        <span class="data-field__content">
            content
        </span>
    </span>
    <span>
        <span class="data-field__icon">
            <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
        </span>
    </span>
</button>

Data Field no Icon

A data field can be rendered without an icon. 

<button class="data-field">
    <span>
        <span class="data-field__label">
            label
        </span>
        <span class="data-field__content">
            content
        </span>
    </span>
</button>