Info bite grid (deprecated)

Digital pattern library

This pattern is deprecated. Do not attempt to use this pattern for any new website developments. It will be removed in a future update.

The info bite grid pattern presents a set of info bite items in a grid.

Complex layout

Variety of info bite options.

Oldest university
in Scotland, dating 1413

5 times top for student satisfaction

Around 8,000 students

32% undergraduate students international

Over 600 years of academic excellence

Everything is awesome!

Code

<!-- Pattern: Info bite grid -->
<div class="info-bite-grid">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-6">
                <!-- Begin pattern: info-bite //-->
                
                <div class="info-bite  landscape solid">
                    <div class="bite-container">
                      <div class="bite">
                      <a href="http://www.st-andrews.ac.uk/">Oldest university<br> in Scotland, dating 1413</a>
                            </div>
                    </div>
                </div>
                
                <!-- End pattern: info-bite //-->            </div>
            <div class="col-md-4 col-sm-6 portrait-container">
                <!-- Begin pattern: info-bite //-->
                
                <div class="info-bite  portrait">
                    <div class="image">
                     <img src="../../assets/docs/images/placeholders/info-bite-2.jpg" alt="st andrews degree">
                   </div>
                    <div class="bite-container">
                      <div class="bite">
                      <a href="http://www.st-andrews.ac.uk/">5 times top for student satisfaction</a>
                            </div>
                    </div>
                </div>
                
                <!-- End pattern: info-bite //-->            </div>

            <div class="col-md-4 col-sm-6">
                <!-- Begin pattern: info-bite //-->
                
                <div class="info-bite  ">
                    <div class="image">
                     <img src="../../assets/docs/images/placeholders/info-bite-3.jpg" alt="st andrews students on beach">
                   </div>
                    <div class="bite-container">
                      <div class="bite">
                      <a href="http://www.st-andrews.ac.uk/">Around 8,000 students</a>
                            </div>
                    </div>
                </div>
                
                <!-- End pattern: info-bite //-->            </div>

            <div class="col-md-4 col-sm-6">
                <!-- Begin pattern: info-bite //-->
                
                <div class="info-bite  ">
                    <div class="image">
                     <img src="../../assets/docs/images/placeholders/info-bite-4.jpg" alt="st andrews student working together">
                   </div>
                    <div class="bite-container">
                      <div class="bite">
                      <a href="http://www.st-andrews.ac.uk/">32% undergraduate students international</a>
                            </div>
                    </div>
                </div>
                
                <!-- End pattern: info-bite //-->            </div>

            <div class="col-md-4 col-sm-6">
                <!-- Begin pattern: info-bite //-->
                
                <div class="info-bite  ">
                    <div class="image">
                     <img src="../../assets/docs/images/placeholders/info-bite-5.jpg" alt="st andrews on a cloudy day">
                   </div>
                    <div class="bite-container">
                      <div class="bite">
                      <a href="http://www.st-andrews.ac.uk/">Over 600 years of academic excellence</a>
                            </div>
                    </div>
                </div>
                
                <!-- End pattern: info-bite //-->            </div>

            <div class="col-md-8 col-sm-6">
                <!-- Begin pattern: info-bite //-->
                
                <div class="info-bite  landscape">
                    <div class="image">
                     <img src="../../assets/docs/images/placeholders/info-bite-6.jpg" alt="the st andrews cathedral">
                   </div>
                    <div class="bite-container">
                      <div class="bite">
                      Everything is awesome!
                      </div>
                    </div>
                </div>
                
                <!-- End pattern: info-bite //-->            </div>
        </div>  <!-- // End .row -->
    </div> <!-- // End .container -->
</div>  <!-- // End .info-bite-grid -->

Simple layout

Default-sized info bite items.