Data Row

Open in Figma View all renders

The data row component requires a child data field component. 

<div class="data-row">
    <div class="text-center">
        <span class="notification-indicator"></span>
    </div>
    <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">
                387kb
            </span>
        </span>
    </button>
</div>

Variations and modifiers

Data Row low

A data field will usually not require meta data. 

<div class="data-row data-row--low">
    <div class="text-center">
        <span class="notification-indicator"></span>
    </div>
    <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">
                387kb
            </span>
        </span>
    </button>
</div>

Data Row no Notification

The notification indicator is a component in it's own right. It is possible to simply remove the span containing the notification, or to apply the modifier where the notifications visibility may change due to state. 

<div class="data-row data-row--no-notification">
    <div class="text-center">
        <span class="notification-indicator"></span>
    </div>
    <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">
                387kb
            </span>
        </span>
    </button>
</div>