In the Richtext Block component, HTML-formatted content (such as that provided by Richtext editors) is styled even if no CSS classes are assigned to the tags.
In the following example, both links are given the same style:
<a class="link" href="#">Click me!</a>
<div class="richtextBlock">
<a href="#">Click me!</a>
</div>
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="richtextBlock{{#modifier}} {{.}}{{/modifier}}">
{{#content}}
{{{.}}}
{{/content}}
</div>
{
"content": "<h3>I am a heading</h3><p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ul><p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href=\"#\">skateboard chillwave deep</a>.<p><ol><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ol><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
@import "_richtextBlock.styles";
%richtext {
a {
@extend %link;
}
}
%richtext {
@include styled-headings();
a:not([class]),
a[class=""] {
@extend %link;
}
ul:not([class]),
ul[class=""] {
@extend %ul;
}
ul:not([class]) > li,
ul[class=""] > li {
@extend %ul-li;
}
ol:not([class]),
ol[class=""] {
@extend %ol;
}
ol:not([class]) > li,
ol[class=""] > li {
@extend %ol-li;
}
dl:not([class]),
dl[class=""] {
@extend %dl;
}
dl:not([class]) > dt,
dl[class=""] > dt {
@extend %dl-dt;
}
dl:not([class]) > dd,
dl[class=""] > dd {
@extend %dl-dd;
}
}
%richtextBlock {
@extend %richtext;
@include stack-spacing();
& + & {
@include stack-spacing();
}
}
.is-richtext {
@extend %richtext;
}
.richtextBlock {
@extend %richtextBlock;
}