Feature 4

Feature Block/Service Block

Summary

The feature grid processes a list or DIV-collection to a grid

Markup

<div class="feature-block v4">
    <h2 class="feature-caption">Feature Caption</h2>
    <p>
        ...
    </p>
    <ul class="feature-grid">
        <li>
            <div class="feature-card">
                <h3 class="feature-card-title">Feature Title</h3>
                <p>
                    ...
                </p>
            </div>
        </li>
        <li>
            <div class="feature-card">
                <h3 class="feature-card-title">Feature Title</h3>
                <p>
                    ...
                </p>
            </div>
        </li>
    </ul>
</div>

Example

Feature Caption

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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.

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Option 2

<div class="feature-block v4">
    <h2 class="feature-caption">Feature Caption</h2>
    <p>
        ...
    </p>
    <ul class="feature-grid">
        <div>
            <div class="feature-card">
                <div class="feature-img">
                    <i aria-hidden="true" class="acms-icon acms-icon-database"></i>
                </div>
                <div class="info">
                    <h3 class="feature-card-title">Feature Title</h3>
                    <p>
                        ...
                    </p>
                </div>
            </div>
        </div>
        <div>
            <div class="feature-card">
                <div class="feature-img">
                    <i aria-hidden="true" class="acms-icon acms-icon-users"></i>
                </div>
                <div class="info">
                    <h3 class="feature-card-title">Feature Title</h3>
                    <p>
                        ...
                    </p>
                </div>
            </div>
        </div>
    </ul>
</div>

Feature Caption

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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.

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Feature Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat