export const block = `
<h1>BLOCK</h1>

<p style="width: 70%">
Encapsulates a standalone entity that is meaningful on its own.
While blocks can be nested and interact with each other, semantically they
remain equal; there is no precedence or hierarchy. Holistic entities without DOM
representation (such as controllers or models) can be blocks as well.
</p>

<h3>Naming</h3>
<p style="width: 70%">
Block names may consist of Latin letters, digits, and dashes. To form a CSS class,
add a short prefix for namespacing: <strong>.block</strong>
</p>

<h3>HTML</h3>
<p style="width: 70%">
Block names may consist of Latin letters, digits, and dashes. To form a CSS class,
add a short prefix for namespacing: <strong>.block</strong>
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
{{'<'}}div class="block"{{'>'}}...{{'<'}}{{'/'}}div{{'>'}}
    </pre>
</div>

<h3>CSS</h3>
<ul style="width: 70%">
    <li>Use class name selector only</li>
    <li>No tag name or ids</li>
    <li>No dependency on other blocks/elements on a page</li>
</ul>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.block {{'{'}} color: #042; {{'}'}}
    </pre>
</div>

`;
