Display Element

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>display element component with small text</h1>
        </div>
    </div>
    <div class="row movu-spacing-32-top">
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element>
                <h4>Headline</h4>
                <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <movu-button flat text="click me" custom_class="button-small movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="normal">
                <h4>Headline</h4>
                <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <movu-button flat text="click me" custom_class="button-small movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="loud">
                <h4>Headline</h4>
                <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <movu-button flat text="click me" custom_class="button-small movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h1>display element component with illustration and small text</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element>
                <div class="mde-content-with-image">
                    <h4>Headline</h4>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <movu-button flat text="click me" custom_class="button-small movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="normal">
                <div class="mde-content-with-image">
                    <h4>Headline</h4>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <movu-button flat text="click me" custom_class="button-small movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="loud">
                <div class="mde-content-with-image">
                    <h4>Headline</h4>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <movu-button flat text="click me" custom_class="button-small movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h1>display element component with large text</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element>
                <h3>Headline</h3>
                <p class="movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <movu-button flat text="click me" custom_class="movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="normal">
                <h3>Headline</h3>
                <p class="movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <movu-button flat text="click me" custom_class="movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="loud">
                <h3>Headline</h3>
                <p class="movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <movu-button flat text="click me" custom_class="movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h1>display element component with illustration and large text</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element>
                <div class="mde-content-with-image">
                    <h3>Headline</h3>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <movu-button flat text="click me" custom_class="movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="normal">
                <div class="mde-content-with-image">
                    <h3>Headline</h3>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <movu-button flat text="click me" custom_class="movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="loud">
                <div class="mde-content-with-image">
                    <h3>Headline</h3>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <movu-button flat text="click me" custom_class="movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h1>display element component use cases</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element>
                <div class="mde-content-with-image">
                    <h4>Headline</h4>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <ul class="small movu-spacing-16-top">
                    <li>bullet point 1</li>
                    <li>bullet point 2</li>
                    <li>bullet point 3</li>
                    <li>bullet point 4</li>
                    <li>bullet point 5</li>
                </ul>
                <movu-button flat text="click me" custom_class="button-small movu-spacing-16-top" right_icon="local_shipping"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="normal">
                <h3>Headline</h3>
                <p class="movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <ul class="movu-spacing-16-top">
                    <li>bullet point 1</li>
                    <li>bullet point 2</li>
                    <li>bullet point 3</li>
                    <li>bullet point 4</li>
                    <li>bullet point 5</li>
                </ul>
                <movu-button secondary text="click me" custom_class="movu-spacing-16-top"></movu-button>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="loud">
                <div class="mde-content-with-image">
                    <h4>Headline</h4>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <movu-button secondary text="click me" custom_class="movu-spacing-16-top"></movu-button>
            </movu-display-element>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element>
                <div class="mde-content-with-image">
                    <h4>Headline</h4>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                    <p class="small movu-spacing-4-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="normal">
                <h3>Headline</h3>
            </movu-display-element>
        </div>
        <div class="col-xs-12 col-lg-4 movu-spacing-32-bottom">
            <movu-display-element type="loud">
                <div class="mde-content-with-image">
                    <h4>Headline</h4>
                    <span class="mde-image" style="background-image: url('https://demo-01.movu.ch/public/build/assets/images/image.jpg')"></span>
                </div>
            </movu-display-element>
        </div>
    </div>
</div>