Automated Twitter feed

Twitter feed automated to pull in specific twitter feeds from different areas of the company (e.g. Adviser, Workplace, 1825).

Example

Mark-up

<div class="container slb-background-grey-pale">
    <div class="row d-flex flex-row align-items-center justify-content-center py-3 px-2">
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="slb-infobox">
                <div class="slb-infobox__content">
                    <h3><span class="fa fa-twitter mr-3"></span>...</h3>
                    <p>...</p>
                    <button class="slb-button slb-button--primary" role="button">...</button>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="slb-infobox slb-background-white my-2 my-md-0">
                <div class="slb-infobox__content">
                    <a href="#" target="_blank" title="" class="slb-h6 slb-colour-blue-alt slb-colour-blue-hover">...</a>
                    <p class="mt-3">...</p>
                    <p class="mb-5 slb-colour-grey-alt">...</p>
                    <div class="col-12 px-0">
                        <a href="#" title=""><span class="fa fa-reply slb-colour-grey-alt slb-colour-grey-hover"></span></a>
                        <a href="#" title=""><span class="fa fa-retweet slb-colour-grey-alt slb-colour-grey-hover mx-3"></span></a>
                        <a href="#" title=""><span class="fa fa-star-o slb-colour-grey-alt slb-colour-grey-hover"></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 d-sm-none d-lg-flex">
            <div class="slb-infobox slb-background-white my-2 my-md-0">
                <div class="slb-infobox__content">
                    <a href="#" target="_blank" title="" class="slb-h6 slb-colour-blue-alt slb-colour-blue-hover">...</a>
                    <p class="mt-3">...</p>
                    <p class="mb-5 slb-colour-grey-alt">...</p>
                    <div class="col-12 px-0">
                        <a href="#" title=""><span class="fa fa-reply slb-colour-grey-alt slb-colour-grey-hover"></span></a>
                        <a href="#" title=""><span class="fa fa-retweet slb-colour-grey-alt slb-colour-grey-hover mx-3"></span></a>
                        <a href="#" title=""><span class="fa fa-star-o slb-colour-grey-alt slb-colour-grey-hover"></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 d-sm-none d-lg-flex">
            <div class="slb-infobox slb-background-white my-2 my-md-0">
                <div class="slb-infobox__content">
                    <a href="#" target="_blank" title="" class="slb-h6 slb-colour-blue-alt slb-colour-blue-hover">...</a>
                    <p class="mt-3">...</p>
                    <p class="mb-5 slb-colour-grey-alt">...</p>
                    <div class="col-12 px-0">
                        <a href="#" title=""><span class="fa fa-reply slb-colour-grey-alt slb-colour-grey-hover"></span></a>
                        <a href="#" title=""><span class="fa fa-retweet slb-colour-grey-alt slb-colour-grey-hover mx-3"></span></a>
                        <a href="#" title=""><span class="fa fa-star-o slb-colour-grey-alt slb-colour-grey-hover"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Dependencies

• Twitter feed HTML
• Twitter feed CSS
• Twitter feed JS (for automation of feed)
• Bootstrap utilities