No notes defined.
<div class="row feature-panel feature-panel--right">
<div class="small-12 large-5 column feature-panel__content">
<div class="feature-panel__content-wrapper">
<h2 class="feature-panel__title">Say hello to Redactor 3</h2>
<p>Redactor is your user-friendly rich text editor, tightly integrated with MODX. Ridiculously easy image uploads, clean markup, full control over available formatting and features, and a focus on keeping things simple.</p>
<p>Redactor is your user-friendly rich text editor, tightly integrated with MODX. Ridiculously easy image uploads, clean markup, full control over available formatting and features, and a focus on keeping things simple.</p>
<a href="/agenda/" class="feature-panel__link">
Read more
<svg role="img" class="icon feature-panel__icon">
<use xlink:href="/svg/svg-symbols.svg#long-arrow-right"></use>
</svg>
</a>
</div>
</div>
<div class="small-12 large-6 column feature-panel__media">
<img src="/images/redactor3_standard_content.jpg" class="feature-panel__img">
</div>
</div>
<div class="row feature-panel feature-panel--left">
<div class="small-12 large-5 column feature-panel__content">
<div class="feature-panel__content-wrapper">
<h2 class="feature-panel__title">Introducing themes and dark mode</h2>
<p>Redactor 3 comes with a new modern look, where the buttons floats within the content. If you prefer the editor to look more like Redactor 2, to have a flatter design, or something a little more shiny, the selection of built-in themes has you covered.</p>
<a href="/agenda/" class="feature-panel__link">
Read more
<svg role="img" class="icon feature-panel__icon">
<use xlink:href="/svg/svg-symbols.svg#long-arrow-right"></use>
</svg>
</a>
</div>
</div>
<div class="small-12 large-6 column feature-panel__media">
<img src="/images/redactor3_standard_content.jpg" class="feature-panel__img">
</div>
</div>
{
"panels": [
{
"title": "Say hello to Redactor 3",
"body": "<p>Redactor is your user-friendly rich text editor, tightly integrated with MODX. Ridiculously easy image uploads, clean markup, full control over available formatting and features, and a focus on keeping things simple.</p><p>Redactor is your user-friendly rich text editor, tightly integrated with MODX. Ridiculously easy image uploads, clean markup, full control over available formatting and features, and a focus on keeping things simple.</p>",
"link_text": "Read more",
"link": "/agenda/",
"image": "/image/",
"image_alignment": "right"
},
{
"title": "Introducing themes and dark mode",
"body": "<p>Redactor 3 comes with a new modern look, where the buttons floats within the content. If you prefer the editor to look more like Redactor 2, to have a flatter design, or something a little more shiny, the selection of built-in themes has you covered.</p>",
"link_text": "Read more",
"link": "/agenda/",
"image": "/image/",
"image_alignment": "left"
}
]
}
/*------------------------------------*\
Feature Panel
\*------------------------------------*/
.feature-panel {
margin-top: 2rem;
margin-bottom: 2rem;
@include mq(large) {
margin-top: 4rem;
margin-bottom: 4rem;
}
@include mq(xlarge) {
margin-top: 8rem;
margin-bottom: 8rem;
}
}
@include mq(large) {
.feature-panel--right {
.feature-panel__media {
margin-left: 8.33333%;
}
}
.feature-panel--left {
.feature-panel__content {
margin-left: 8.33333%;
order: 2;
}
.feature-panel__media {
order: 1;
}
}
}
.feature-panel__content-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 100%;
}
.feature-panel__title {
margin-top: 0;
}
.feature-panel__media {
display: flex;
align-items: center;
}
.feature-panel__img {
display: block;
width: 100%;
margin: 1rem 0;
@include mq(large) {
margin: 0;
}
}
.feature-panel__link {
font-weight: bold;
}
.feature-panel__icon {
display: inline-block;
width: 100%;
height: 100%;
max-width: 20px;
max-height: 20px;
margin-left: 5px;
position: relative;
top: 3px;
}