Sample pattern
A catchy subhead that previews the content and is a bit wordy to test what happens when a subhead wraps.
The pattern layout supports the full range of markdown elements/blocks as demonstrated in the example post.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at.
Image, Inline #
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam scelerisque efficitur ante ut facilisis. Aenean et risus fringilla, hendrerit sapien et, tincidunt orci. Aenean sed tellus aliquam, consectetur metus in, tempus enim.
Sample snippet #
const button = document.querySelector('button');
button.addEventListener('click', async () => {
console.log('Testing 123');
});Demo #
<!--Sample HTML-->
<div>
<p>How to add HTML to your demo</p>
<ul>
<li>Add an assets directory to your pattern's directory</li>
<li>Add a HTML file and it'll be added to the page like this</li>
</ul>
<p>Use the same process to add JS and CSS. <em>Refer to src/site/content/en/handbook/content-types/example-pattern to see how this was built</em>.</p>
</div>
// Sample JS
try {
console.log('Hello world');
} catch (err) {
console.error(err.name, err.message);
}
/* Sample css */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}