Feature Block

No notes defined.

<div class="feature-block">
    <div class="wrapper">
        <div class="row">
            <div class="col-4 feature-block__col">
                <svg role="img" class="feature-block__icon">
                    <use xlink:href="../../svg/svg-symbols.svg#star"></use>
                </svg>
                <h3>Premium Extras</h3>
                <p>We create professional addons for MODX, complete with helpful documentation and 24-hour support.</p>
            </div>
            <div class="col-4 feature-block__col">
                <svg role="img" class="feature-block__icon">
                    <use xlink:href="../../svg/svg-symbols.svg#code"></use>
                </svg>
                <h3>Open Source</h3>
                <p>We also provide a growing suite of Open Source Extras and tools. Licensed as MIT or GPL, free to use and extend.</p>
            </div>
            <div class="col-4 feature-block__col">
                <svg role="img" class="feature-block__icon">
                    <use xlink:href="../../svg/svg-symbols.svg#comments"></use>
                </svg>
                <h3>Excellent Support</h3>
                <p>If you can't find an answer in our FAQs or on the forum, get in touch. We're friendly <i>and</i> helpful.</p>
            </div>
        </div>
    </div>
</div>
/* No context defined. */
  • Content:
    .feature-block {
    	padding: 3rem 0;
    }
    
    .feature-block__heading h2 {
    	text-align: center;
    	font-weight: 400;
    	margin: 0 0 2rem;
    }
    
    .feature-block__icon {
    	fill: $color-secondary;
    	width: 36px;
    	height: 36px;
    }
    
    .feature-block__col h3 {
    	margin: 2rem 0;
    	font-weight: 400;
    }
    
    .feature-block__col p {
    	color: $color-grey-base;
    	margin-bottom: 0;
    }
  • URL: /components/raw/feature-block/feature-block.scss
  • Filesystem Path: components/02-components/_feature-block/feature-block.scss
  • Size: 343 Bytes