export const example = `
<h1>EXAMPLE</h1>

<p style="width: 70%">
Suppose you have block form with modifiers <strong>theme: "xmas"</strong> and
<strong>simple: true</strong> and with elements <strong>input</strong> and
<strong>submit</strong>, and element <strong>submit</strong> with its own modifier
<strong>disabled: true</strong> for not submitting form while it is not filled:
</p>

<p>
    HTML
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
{{'<'}}form class="form form--theme-xmas form--simple"{{'>'}}
    {{'<'}}input class="form__input" type="text" {{'/'}}{{'>'}}
    {{'<'}}input
        class="form__submit form__submit--disabled"
        type="submit" {{'/'}}{{'>'}}
{{'<'}}{{'/'}}form{{'>'}}
    </pre>
</div>

<p>
    CSS
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.form {{'{ }'}}
.form--theme-xmas {{'{ }'}}
.form--simple {{'{ }'}}
.form__input {{'{ }'}}
.form__submit {{'{ }'}}
.form__submit--disabled {{'{ }'}}
    </pre>
</div>

`;
