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 //-->