There are no notes for this item.

<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"
    }
  ]
}
  • Content:
    /*------------------------------------*\
    	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;
    }
    
  • URL: /components/raw/feature-panel/feature-panel.scss
  • Filesystem Path: components/02-components/feature-panel/feature-panel.scss
  • Size: 1.1 KB