Bookmark

Appears on shake pages, tracking the user's reading progress.

Note that the bookmark is intended to "pull" slightly outside the content well. These samples have some padding adding to keep it visible.

Default

Here is where you were 
<div style="padding: 15px">
	<div style="border: 1px dashed silver; padding-bottom: 2em">
		<div class="bookmark">
			<span class="bookmark-flag">
				<span class="bookmark-flag--content">Here is where you were</span>
			</span>
		</div>
	</div>
</div>

The bookmark can include an optional jump link to let the user return to the original position.

You started reading here jump to previous 
<div style="padding: 15px">
	<div style="border: 1px dashed silver; padding-bottom: 2em">
		<div class="bookmark">
			<span class="bookmark-flag">
				<span class="bookmark-flag--content">
					You started <span class="hide-on-small">reading</span> here
					<time
						datetime="2020-04-22 18:05:38"
						title="Wed, 22 Apr 2020 18:05:38 "
					>
						25 minutes ago
					</time>
				</span>
			</span>
			<span class="jump-back">
				<a href="#"><span class="hide-on-small">jump to</span> previous</a>
			</span>
		</div>
	</div>
</div>