odoo_theme/theme_artists/theme_common/views/s_media_list.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template name="Media List" id="s_media_list">
        <section class="s_media_list pt24 pb24" style="background-color: rgba(239,239,239);">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <img src="/web/image/theme_common.image_content_20" class="img img-fluid" alt=""/>
                    </div>
                    <div class="col-lg-8 s_media_list_body">
                        <h3>Media heading</h3>
                        <p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fit your needs.</p>
                        <div class="s_btn text-left pt16 pb0" data-name="Buttons">
                            <a href="#" class="btn btn-primary">Read more</a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <img src="/web/image/theme_common.image_content_21" class="img img-fluid" alt=""/>
                    </div>
                    <div class="col-lg-8 s_media_list_body">
                        <h3>Event Heading</h3>
                        <p>Speakers from all over the world will join our experts to give inspiring talks on various topics.</p>
                        <div class="s_btn text-left pt16 pb0" data-name="Buttons">
                            <a href="#" class="btn btn-sm btn-primary">Register</a>
                        </div>
                        <div class="s_media_list_options">
                            <div class="s_media_list_option">
                                <i class="fa fa-1x fa-map-marker fa-fw mr-1 text-gamma"/>
                                <small>Location</small>
                            </div>
                            <div class="s_media_list_option">
                                <i class="fa fa-1x fa-calendar fa-fw mr-1 text-gamma"/>
                                <small>Date</small>
                            </div>
                            <div class="s_media_list_option">
                                <i class="fa fa-1x fa-clock-o fa-fw mr-1 text-gamma"/>
                                <small>Time</small>
                            </div>
                            <div class="s_media_list_option">
                                <i class="fa fa-1x fa-microphone fa-fw mr-1 text-gamma"/>
                                <small>100+ conferences</small>
                            </div>
                            <div class="s_media_list_option">
                                <i class="fa fa-1x fa-users fa-fw mr-1 text-gamma"/>
                                <small>2,000+ attendees</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row no-gutters">
                    <div class="col-lg-4">
                        <img class="img img-fluid" src="/web/image/theme_common.image_content_22" alt=""/>
                    </div>
                    <div class="col-lg-8 s_media_list_body">
                        <h3>Post heading</h3>
                        <span class="s_badge badge bg-gamma" data-name="Badge">
                            <i class="fa fa-1x fa-fw fa-clock-o"/>3 months ago
                        </span>
                        <span class="s_badge badge bg-gamma" data-name="Badge">
                            <i class="fa fa-1x fa-fw fa-user"/>by John DOE
                        </span>
                        <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
                        <div class="s_btn text-left pt16 pb0" data-name="Buttons">
                            <a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ml-1"/></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </template>

    <template id="s_media_list_options" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='layout_column']" position="attributes">
            <attribute name="data-exclude" add=".s_media_list" separator=","/>
        </xpath>
    </template>
</odoo>