Cropped

When to use it

The Cropped object (see About Components for the semantic difference between Objects and Components) is used as a wrapper for components where you want to avoid sidescroll on narrow screens and prefer having a scroll bar "cropping" the content instead. It is commonly used for tables or other wide content that can't wrap and at the same time can't expand its container.

Variants

To override the default background color, use the --surface-color CSS variable.

What it looks like

Code examples

<div class="o-cropped" role="region" tabindex="0">
    <table class="c-table">
        <caption class="c-table__caption">Table caption</caption>
        <thead class="c-table__head">
            <tr class="c-table__row">
                <th scope="col">Heading cell</th>
                <th scope="col">Heading cell</th>
                <th scope="col">Headingcellwithverylongname</th>
                <th scope="col">Heading cell</th>
                <th scope="col">Heading cell</th>
            </tr>
        </thead>
        <tbody class="c-table__body">
            <tr class="c-table__row">
                <td>Ut enim ad minim veniam, quis  ex ea commodo consequat.</td>
                <td>Loremipsumdolorsitamet, consectetur adipisicing ut labore et dolore magna aliqua.</td>
                <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
                <td>Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua.</td>
                <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
            </tr>
            <tr class="c-table__row">
                <td>Loremipsumdolorsitametconsectetur adipisicing elit, e et dolore magna aliqua.</td>
                <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco modo consequat.</td>
                <td>Ad minim veniam, quis nostrud exercitation  commodo consequat.</td>
                <td>Ut enim ad minim veniam, quis quip ex ea commodo consequat.</td>
                <td>Enim ad minim veniam, quis nostrud exercitation ullamco modo consequat.</td>
            </tr>
        </tbody>
    </table>
</div>

Accessibility notes

Ensure the scrolling container is keyboard accessible by adding tabindex="0" to make it focusable (then you can scroll using the left/right arrow keys). Use role="region" to declare the element a landmark and use aria-label to give the container a name and purpose for screen reader users, especially if the content lacks any caption or heading elements.