UCI

Splitters example 

<style>
    section {
        margin-bottom: 50px
    }
</style>

<div class="wrapper">
    <section class="splitter              ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter              ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter              ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                Two column
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                Two column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter              ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-4 col-sm-4 col-lg-4">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                Three column
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-ms-4 col-sm-4 col-lg-4">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                Three column
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-ms-4 col-sm-4 col-lg-4">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                Three column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter splitter_bg-color_yellow             ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter  splitter_bg-color_white            ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter   splitter_bg-color_accent           ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter   splitter_bg-color_accent  splitter_padding_top_small         ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter   splitter_bg-color_accent    splitter_padding_top_medium       ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter   splitter_bg-color_accent     splitter_padding_top_large      ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter   splitter_bg-color_accent      splitter_padding_bottom_small     ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter   splitter_bg-color_accent        splitter_padding_bottom_medium   ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="splitter   splitter_bg-color_accent         splitter_padding_bottom_large  ">
        <div class="container">
            <div class="splitter__wrapper">
                <div class="row">
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="splitter-placeholder">
                            <div class="splitter-placeholder__size">
                                One column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
 
<style>
    section {
        margin-bottom: 50px
    }
</style>

<div class="wrapper">
    {{ render '@splitter' }}
    {{ render '@splitter--two-column-five-seven' }}
    {{ render '@splitter--two-column-seven-five' }}
    {{ render '@splitter--three-column' }}
    {{ render '@splitter--background-color-yellow' }}
    {{ render '@splitter--background-color-white' }}
    {{ render '@splitter--background-color-accent' }}
    {{ render '@splitter--padding-top-small' }}
    {{ render '@splitter--padding-top-medium' }}
    {{ render '@splitter--padding-top-large' }}
    {{ render '@splitter--padding-bottom-small' }}
    {{ render '@splitter--padding-bottom-medium' }}
    {{ render '@splitter--padding-bottom-large' }}
</div>
 
/* No context defined. */

No notes defined.