csslayout/contents/feature-list.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Feature list	Create a feature list with CSS flexbox	css feature list, css flexbox

HTML

<!-- Feature item -->
<div class="feature-list">
    <!-- Image -->
    <div class="feature-list__image">
        ...
    </div>

    <!-- Right side -->
    <div class="feature-list__desc">
        ...
    </div>
</div>

<!-- Repeated items -->
...

CSS

.feature-list {
    display: flex;

    /* OPTIONAL: Spacing between items */
    margin: 0.5rem 0;
}

/* Reverse the order of image and content */
.feature-list--reverse {
    flex-direction: row-reverse;
}

.feature-list__image {
    width: 2rem;
}

.feature-list__desc {
    /* Take the remaining width */
    flex: 1;
}

{% demo %} {% include "patterns/feature-list.njk" %} {% enddemo %}