<div class="o-rich-text">
<p>This is the base paragraph style on desktop. Optimal number of characters per line is ~75. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class='o-link' href='#'>This is a text link</a>.</p>
<p>This is a paragraph below nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
{% set base_class = rich_text.base_class|default('o-rich-text') %}
{% if rich_text.text or rich_text.includes %}
<div class="{{ bem(base_class, rich_text.element, rich_text.modifiers, rich_text.extra) }}" {{ attributes(rich_text.attributes) }}>
{% if rich_text.text %}
{{ rich_text.text }}
{% endif %}
{% if rich_text.includes %}
{% for item in rich_text.includes %}
{% render "@" ~ item.name with item.context %}
{% endfor %}
{% endif %}
</div>
{% endif %}
{
"rich_text": {
"text": "<p>This is the base paragraph style on desktop. Optimal number of characters per line is ~75. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class='o-link' href='#'>This is a text link</a>.</p><p>This is a paragraph below nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>"
}
}
/* ------------------------------------ *\
$RICH TEXT
\* ------------------------------------ */
.o-rich-text {
width: 100%;
margin-left: auto;
margin-right: auto;
pointer-events: auto;
--flow-space: var(--ds-space-md);
& > * + * {
margin-top: var(--flow-space);
}
section + section {
margin-top: 0;
}
.c-section-group + .c-content,
.c-content + .c-section-group {
margin-top: 0;
}
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
padding-top: var(--ds-space);
}
> ul li a:not(.o-button),
> p a:not(.o-button),
> a:not(.o-button) {
text-decoration: underline;
display: unset;
@include o-link;
}
> ul,
> ol {
margin-left: var(--ds-space);
> li:first-child {
margin-top: 0;
}
}
> ul ul,
> ol ol,
> ol ul {
margin-left: var(--ds-space-md);
}
li {
margin-top: var(--ds-space-xs);
}
}
No notes defined.