The Pocket pattern allows the user to reveal longform content at their discretion
The Pocket component contains the page's main content in a truncated form. The purpose of this is to not overwhelm the user with content upon first arriving at the page. With the content shortened it is easier to see (and reach by keyboard or screen reader-based navigation) the functionality at the foot of the page.
A 'Show more' button at the foot of the Pocket allows the reader to unveil the obscured content. Importantly, when the unveiling takes place, a cue to continue reading is inserted between the last item of initial/preview content and the first of the unveiled content. This ensures the user does not lose their place.
Note that, although the patterns are similar, the Pocket differs from the Load more pattern in that it simply obscures content, rather than deferring the loading of content. The Pocket should be implemented without reliance on XHR.
<div class="gel-pocket"> <div class="gel-pocket__truncated"> <!-- content here --> </div> </div>