Pockets

Survey of Production Implementations

A Pocket allows you to reveal additional content without leaving the page you are on. Pockets are used to avoid over-filling screens with excessive amounts of content.

Documented here: http://www.bbc.co.uk/gel/guidelines/pocket

These are examples of Pockets we've observed in the wild.

Academy

Seen here: https://www.bbc.co.uk/academy/en

Looks like

HTML outline (generalised)

<div class="pocket__container">
    <h2>Learn more with the BBC Academy</h2>
    <div>
        <div class="card">
            ...
        </div>
        <div class="card">
            ...
        </div>
        <div class="card">
            ...
        </div>
    </div>

    <div class="pocket__toggle">
        <a>Show more</a>
    </div>
</div>

CBBC

Seen here: https://www.bbc.co.uk/cbbc/games

Looks like

HTML outline (generalised)

<div class="grid">
    <div aria-expanded="false">
        <ul class="content-list">
            <li class="content-list__item">
                <a class="content-card">
                    ...
                </a>
            </li>
            <li class="content-list__item">
                <a class="content-card">
                    ...
                </a>
            </li><li class="content-list__item">
                <a class="content-card">
                    ...
                </a>
            </li>
        </ul>
    </div>
    <div class="pocket__controls">
        <a class="button__link">More Games</a>
    </div>
</div>