Components
Meet the team
Meet the team type layouts are useful for displaying student and staff department teams.
Ektron documentation is currently being written.
List with no links

Antonia Brown
Information Director
somebody@brookes.ac.uk
+44 (0) 1865 484848
People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.

Julia Jones
Information Manager
somebody@brookes.ac.uk
+44 (0) 1865 484848
People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.

Allie Robinson
Information Assistant
somebody@brookes.ac.uk
+44 (0) 1865 484848
People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.
<div class="row flex-row">
<div class="col-xs-12">
<div class="flex-item box-object bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="#">
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<h3 class="sm-title hblack">Antonia Brown</h3>
<h4 class="georgia">Information Director</h4>
<p><a href="mailto:somebody@brookesacuk">somebody@brookes.ac.uk</a><br><a href="tel:+441865484848">+44 (0) 1865 484848</a></p>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="flex-item box-object bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="#">
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<h3 class="sm-title hblack">Julia Jones</h3>
<h4 class="georgia">Information Manager</h4>
<p><a href="mailto:somebody@brookesacuk">somebody@brookes.ac.uk</a><br><a href="tel:+441865484848">+44 (0) 1865 484848</a></p>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="flex-item box-object bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available" />
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<h3 class="sm-title hblack">Allie Robinson</h3>
<h4 class="georgia">Information Assistant</h4>
<p><a href="mailto:somebody@brookesacuk">somebody@brookes.ac.uk</a><br><a href="tel:+441865484848">+44 (0) 1865 484848</a></p>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</div>
</div>
</div>
Change the whole block to a link by changing the class box-object
to a box-link
and the div
to an a
with a link to a page with more information. Note that you can't have any links in the box-link
.
- Use the simple box style to display a block of information with no link.
- Use the link box style to link to a page with more information.
- Images should be sized to 800 by 800 pixels.
- Team members without an image should use the default image.
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
List with links
<div class="row flex-row">
<div class="col-xs-12">
<a href="#" class="flex-item box-link bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="#">
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<h3 class="sm-title hblack">Antonia Brown</h3>
<h4 class="georgia">History</h4>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</a>
</div>
<div class="col-xs-12">
<a href="#" class="flex-item box-link bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="#">
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<h3 class="sm-title hblack">Julia Jones</h3>
<h4 class="georgia">Philosophy</h4>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</a>
</div>
<div class="col-xs-12">
<a href="#" class="flex-item box-link bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available" />
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<h3 class="sm-title hblack">Allie Robinson</h3>
<h4 class="georgia">Psychology</h4>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</a>
</div>
</div>
Change the whole block to a link by changing the class box-object
to a box-link
and the div
to an a
with a link to a page with more information. Note that you can't have any links in the box-link
.
- Use the simple box style to display a block of information with no link.
- Use the link box style to link to a page with more information.
- Images should be sized to 800 by 800 pixels.
- Team members without an image should use the default image.
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Grid with no links



<div class="row flex-row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="flex-item box-object bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available">
</div>
<div class="col-xs-12">
<h3 class="sm-title hblack">Antonia Brown</h3>
<h4 class="georgia">Information Director</h4>
<p><a href="mailto:somebody@brookesacuk">somebody@brookes.ac.uk</a><br><a href="tel:+441865484848">+44 (0) 1865 484848</a></p>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="flex-item box-object bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available">
</div>
<div class="col-xs-12">
<h3 class="sm-title hblack">Julia Jones</h3>
<h4 class="georgia">Information Manager</h4>
<p><a href="mailto:somebody@brookesacuk">somebody@brookes.ac.uk</a><br><a href="tel:+441865484848">+44 (0) 1865 484848</a></p>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="flex-item box-object bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available" />
</div>
<div class="col-xs-12">
<h3 class="sm-title hblack">Allie Robinson</h3>
<h4 class="georgia">Information Assistant</h4>
<p><a href="mailto:somebody@brookesacuk">somebody@brookes.ac.uk</a><br><a href="tel:+441865484848">+44 (0) 1865 484848</a></p>
</div>
</div>
</div>
</div>
</div>
Change the whole block to a link by changing the class box-object
to a box-link
and the div
to an a
with a link to a page with more information. Note that you can't have any links in the box-link
.
- Use the simple box style to display a block of information with no link.
- Use the link box style to link to a page with more information.
- Images should be sized to 800 by 800 pixels.
- Team members without an image should use the default image.
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Grid with links
<div class="row flex-row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#" class="flex-item box-link bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available">
</div>
<div class="col-xs-12">
<h3 class="sm-title hblack">Antonia Brown</h3>
<h4 class="georgia">History</h4>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#" class="flex-item box-link bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available">
</div>
<div class="col-xs-12">
<h3 class="sm-title hblack">Julia Jones</h3>
<h4 class="georgia">Philosophy</h4>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a href="#" class="flex-item box-link bg-lightgrey fg-charcoal padding10">
<div class="row">
<div class="col-xs-12">
<img class="mb10" src="//static.brookes.ac.uk/pattern-library/assets/img/placeholder.png" alt="No photo available" />
</div>
<div class="col-xs-12">
<h3 class="sm-title hblack">Allie Robinson</h3>
<h4 class="georgia">Psychology</h4>
<p>People and their behaviour have sometimes perplexed and always fascinated me. I started studying psychology at A-level but choose it simply because it interested me. The Brookes open day showed me a dynamic place with great opportunities from going abroad to expanding academically choosing modules outside of your subject. Oxford as a town is pretty good too.</p>
</div>
</div>
</a>
</div>
</div>
Change the whole block to a link by changing the class box-object
to a box-link
and the div
to an a
with a link to a page with more information. Note that you can't have any links in the box-link
.
- Use the simple box style to display a block of information with no link.
- Use the link box style to link to a page with more information.
- Images should be sized to 800 by 800 pixels.
- Team members without an image should use the default image.
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Changelog
Added | Updates | Current version | Accessibility | Status |
---|---|---|---|---|
13 December 2016 | N/A | 1.0.0 | Accessible | Current |