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

• Base: .o-cropped (default horizontal scrolling)
• Vertical variant: .o-cropped o-cropped--vertical

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

What it looks like

Code examples

Horizontal (default)

<div class="o-cropped" role="region" tabindex="0" aria-label="Sales overview">
    <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>

Vertical

<div class="o-cropped o-cropped--vertical" role="region" tabindex="0" aria-label="Activity feed">
    <!-- Vertically scrollable content -->
</div>

Accessibility notes

Ensure the scrolling container is keyboard accessible by adding tabindex="0" to make it focusable (then you can scroll using the arrow keys: left/right for horizontal, up/down for vertical). 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.