<div class="richtext">
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<h2>Headline 2</h2>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<h3>Headline 3</h3>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<h4>Headline 4</h4>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<ul>
<li>Dolore magna aliquyam erat, sed diam voluptua</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et magna</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum</li>
</ul>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<ol>
<li>Dolore magna aliquyam erat, sed diam voluptua</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et magna</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum</li>
</ol>
<p class="bodytext"><a href="#" class="link link--internal">Interner Link</a><br /><a href="#" class="link link--external">Externer Link</a><br /><a href="#" class="link link--download">Download Link</a></p>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<p class="bodytext"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Text Button</span></span></a></p>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<p class="bodytext"><span class="button-wrapper-align-center"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Text Button</span></span></a></span></p>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua.</p>
<p class="bodytext"><span class="button-wrapper-align-right"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Text Button</span></span></a></span></p>
</div>
//- TYPO3 RTE markup
.richtext
each item in richtext
if item.h2
h2 #{item.h2}
if item.h3
h3 #{item.h3}
if item.h4
h4 #{item.h4}
if item.p
+include('@paragraph', {
text: item.p
})
if item.ul
ul
li Dolore magna aliquyam erat, sed diam voluptua
li Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et magna
li At vero eos et accusam et justo duo dolores et ea rebum
if item.ol
ol
li Dolore magna aliquyam erat, sed diam voluptua
li Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et magna
li At vero eos et accusam et justo duo dolores et ea rebum
if item.button
p.bodytext
if item.button.align === 'center'
span.button-wrapper-align-center
+include('@button', item.button)
else if item.button.align === 'right'
span.button-wrapper-align-right
+include('@button', item.button)
else
+include('@button', item.button)
{
"richtext": [
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"h2": "Headline 2"
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"h3": "Headline 3"
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"h4": "Headline 4"
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"ul": true
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"ol": true
},
{
"p": "<a href=\"#\" class=\"link link--internal\">Interner Link</a><br /><a href=\"#\" class=\"link link--external\">Externer Link</a><br /><a href=\"#\" class=\"link link--download\">Download Link</a>\n"
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"button": {
"text": "Text Button",
"href": "#"
}
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"button": {
"align": "center",
"text": "Text Button",
"href": "#"
}
},
{
"p": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed sadipscing. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut Begriffserklärung dolore magna aliquyam erat, sed diam Begriffserklärung dolore magna aliquyam oluptua."
},
{
"button": {
"align": "right",
"text": "Text Button",
"href": "#"
}
}
]
}
.richtext {
h1 {
@extend %headline--1;
}
h2 {
@extend %headline--2;
}
h3 {
@extend %headline--3;
}
h4 {
@extend %headline--4;
}
h1,
.headline--1 {
// stylelint-disable max-nesting-depth
&:not(:last-child) {
margin-bottom: 4rem;
@include mq($from: m) {
margin-bottom: 8rem;
}
}
// stylelint-enable
}
h2,
h3,
h4,
.headline--2,
.headline--3,
.headline--4 {
// stylelint-disable max-nesting-depth
&:not(:last-child) {
margin-bottom: 2rem;
}
// stylelint-enable
}
h2,
h3,
h4,
.headline--2,
.headline--3,
.headline--4 {
// stylelint-disable max-nesting-depth
&:not(:first-child) {
padding-top: 1rem;
@include mq($from: m) {
padding-top: 3rem;
}
}
// stylelint-enable
}
.button {
margin-top: 1rem;
}
> p,
> ul,
> ol,
> .button {
// stylelint-disable max-nesting-depth
&:not(:last-child) {
margin-bottom: 3rem;
}
// stylelint-enable
}
> ul,
> ol {
font-size: $font-size-default-mobile;
line-height: $line-height-default-mobile;
padding-left: 3.8rem;
@include mq($from: m) {
font-size: $font-size-default;
line-height: $line-height-default;
}
}
> ul {
list-style: none;
// stylelint-disable max-nesting-depth
li {
position: relative;
&::before {
// stylelint-enable
background: $color-green;
content: '';
height: 0.65rem;
left: -2rem;
position: absolute;
top: 1rem;
width: 0.65rem;
}
}
}
.button-wrapper-align-center {
display: block;
text-align: center;
}
.button-wrapper-align-right {
display: block;
text-align: right;
}
}
There are no notes for this item.