MOVU Components

Bracket Loud Example: With Image 

<div class="container">
    <div class="row">
        <div class="col-xs-12 text-center">
            <div class="movu-bracket-heading">
                <h2 class="movu-spacing-0-top-bottom">Nam finibus orci ut tincidunt</h2>
                <p class="large large-description">Etiam consequat neque et ante pretium rutrum condimentu.</p>
            </div>
        </div>

        <div class="col-xs-12 col-sm-4">

            <div class="movu-bracket bracket-loud with-image">

                <img src="https://via.placeholder.com/320x240" alt="Movu bracket image" />

                <h4 class="visible-xs bracket-title">Etiam vitae dolor eu felis</h4>
                <h3 class="hidden-xs bracket-title">Etiam vitae dolor eu felis</h3>
                <p>Etiam consequat neque et ante pretium rutrum. Proin condimentum tellus ex, eget consectetur bibendum.</p>
            </div>

        </div>

        <div class="col-xs-12 col-sm-4">

            <div class="movu-bracket bracket-loud with-image">

                <img src="https://via.placeholder.com/320x240" alt="Movu bracket image" />

                <h4 class="visible-xs bracket-title">Etiam vitae dolor eu felis</h4>
                <h3 class="hidden-xs bracket-title">Etiam vitae dolor eu felis</h3>
                <p>Etiam consequat neque et ante pretium rutrum. Proin condimentum tellus ex, eget consectetur bibendum.</p>
            </div>

        </div>

        <div class="col-xs-12 col-sm-4">

            <div class="movu-bracket bracket-loud with-image">

                <img src="https://via.placeholder.com/320x240" alt="Movu bracket image" />

                <h4 class="visible-xs bracket-title">Etiam vitae dolor eu felis</h4>
                <h3 class="hidden-xs bracket-title">Etiam vitae dolor eu felis</h3>
                <p>Etiam consequat neque et ante pretium rutrum. Proin condimentum tellus ex, eget consectetur bibendum.</p>
            </div>

        </div>

    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 text-center">
            <div class="movu-bracket-heading">
                <h2 class="movu-spacing-0-top-bottom">Nam finibus orci ut tincidunt</h2>
                <p class="large large-description">Etiam consequat neque et ante pretium rutrum condimentu.</p>
            </div>
        </div>
        {% for i in range(0, 3) %}
        <div class="col-xs-12 col-sm-4">
            {% if imgSrc %}
            {% render "@bracket-loud" %}
            {% else %}
            {% render "@bracket-loud--with-logo" %}
            {% endif %}
        </div>
        {% endfor %}
    </div>    
</div>
 
{
  "imgSrc": true
}

No notes defined.