Info bite (deprecated)

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

The info bite pattern is a short snippet of information shown on either a solid background colour or a background image with a semi-opaque colour overlay. Info bite is used in situations where you want to convey short snippets or 'bites' of information, quite possibly in a grid.

Default

Simple info bite with background image.

Oldest university
in Scotland, dating 1413

Code

<!-- Begin pattern: info-bite //-->

<div class="info-bite  ">
    <div class="image">
     <img src="../../assets/docs/images/placeholders/info-bite-1.jpg" alt="building">
   </div>
    <div class="bite-container">
      <div class="bite">
      <a href="#">Oldest university<br> in Scotland, dating 1413</a>
            </div>
    </div>
</div>

<!-- End pattern: info-bite //-->

Landscape

To get a landscape info bite for use in grids, add a class landscape. This adds styles to make text work better in the larger space.

32% undergraduate students international

Code

<!-- Begin pattern: info-bite //-->

<div class="info-bite  landscape">
    <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="#">32% undergraduate students international</a>
            </div>
    </div>
</div>

<!-- End pattern: info-bite //-->

Portrait

To get a portrait info bite, add a class portrait. This makes the info-bite twice as high.

Over 600 years of academic excellence

Code

<!-- Begin pattern: info-bite //-->

<div class="info-bite  portrait">
    <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="#">Over 600 years of academic excellence</a>
            </div>
    </div>
</div>

<!-- End pattern: info-bite //-->

No link

The link in the info bite is optional.

8,400 students

Code

<!-- Begin pattern: info-bite //-->

<div class="info-bite  ">
    <div class="image">
     <img src="../../assets/docs/images/placeholders/info-bite-1.jpg" alt="the St Andrews cathedral">
   </div>
    <div class="bite-container">
      <div class="bite">
      8,400 students
      </div>
    </div>
</div>

<!-- End pattern: info-bite //-->

No image and solid background

The image and therefore the <div class="image">...<div> is optional. In this case you should add a solid class e.g. <div class="info-bite solid">.

97% continuation rate

Code

<!-- Begin pattern: info-bite //-->

<div class="info-bite  solid">
    <div class="bite-container">
      <div class="bite">
      <a href="http://www.st-andrews.ac.uk">97% continuation rate</a>
            </div>
    </div>
</div>

<!-- End pattern: info-bite //-->