Style Guide Documentation

introduction

This is the living style guide supporting the British Society for Rheumatology’s digital collateral.

To maintain support for the substantial proportion of BSR’s core user base that still use Internet Explorer 8, this build is based upon Bootstrap V3.3.7. Please refer to the documentation on the Bootstrap website for usage, particularly with regards to grid layouts and javascript components.

BSR’s custom theme offers all these Bootstrap features although the look and detail have been augmented to represent the BSR brand.

Any comments please email Toby Trembath

scripts required

For optimisation we have compiled all css and javascript into as few files as possible, with a couple of exceptions.

Embedded in the head:

  • assets/js/legacy-ie.js
    This file should only be loaded by IE browser versions 8 or lower, it contains HTML5 Shim and Respond.js which provide support for HTML5 elements and media queries within these legacy browsers.
  • assets/js/modernizr.js
    This is custom generated specific to tags used in the build. Needed as we test for browser flexbox support.
  • assets/css/theme.css
    This compile includes Bootstrap V.3.3.7, Font Awesome 4.7.0 and all custom styles required to support the theme.

Embedded at the end of the body:

  • assets/js/jquery.min.js
    jQuery JavaScript Library v3.1.1, kept separate from script bundle for sanity.
  • assets/js/bootstrap.min.js
    Bootstrap v3.3.7 full Javascript library, kept separate from script bundle for sanity.
  • assets/js/theme.js
    This file contains a bundle of libraries as well as site specific scripts. Libraries included:
    • SVGeezy.js (automatically replaces SVG images with PNGs in unsupporting browsers, if PNG equivalents available)
    • jquery.matchHeight.js (a responsive equal heights plugin)

Foundation

colors

Main Colors

#211551
#4d4d68
#c2c2d1
#e0e0e8

Complementary Colors

#00965E
#00939d
#f0ad4e
#A6093D

Grey scale

#ebebf0
#777
#555
#333
#222

icons

Font Awesome

We have disabled the native Bootstrap Glyphicons to reduce file size overhead.
All font icons used are from the Font Awesome 4.7.0 library

typography

Font Stack

Facitweb, Calibri, Arial, sans-serif;

The Facit Web font library is massive, therefore we have restricted the available weights and styles:

  • Light (weight 300)
  • Regular (weight 400)
  • Regular Italic (Use of which should be avoided, provided just in case)
  • Semi Bold (weight 600)
  • Bold (weight 700)

Base Styles

address

Example

British Society for Rheumatology
Bride House, 18-20 Bride Lane,
London EC4Y 8EE
T: +44 (0) 20 7842 0900
E: bsr@rheumatology.org

Usage Notes

This element is used in the site footer and Get In Touch page, but can be used where ever an address is displayed.

View Source Back to Top
Copy Source
<address>
	<strong>British Society for Rheumatology</strong><br>
	Bride House, 18-20 Bride Lane,<br>
	London EC4Y 8EE
</address>
<address>
	<abbr title="Telephone">T:</abbr> +44 (0) 20 7842 0900<br>
	<abbr title="Email address">E:</abbr> <a href="mailto:#">bsr@rheumatology.org</a>
</address>

headings

Example

Page Header With Small Text

h1. Bootstrap heading Secondary text

h2 Bootstrap heading Secondary text

h3.top-title Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

h2.no-margin

h2.head-space

h3.top-title

Usage Notes

Huge variety of headings as well as a few classes available to modify the margins around the headings:

View Source Back to Top
Copy Source
<h1 class="page-header">Page Header <small>With Small Text</small></h1>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2 Bootstrap heading <small>Secondary text</small></h2>
<h3>h3.top-title Bootstrap heading </h3>
<h4>h4. Bootstrap heading </h4>
<h5>h5. Bootstrap heading </h5>
<h6>h6. Bootstrap heading </h6>

<div class="well">
	<h2 class="no-margin">h2.no-margin</h2>
</div>
<div class="well">
<h2 class="head-space">h2.head-space</h2>
</div>
<div class="well">
<h2 class="top-title">h3.top-title</h2>
</div>

text elements

Example

Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Big paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Mid paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.

Warning: Etiam porta sem malesuada magna mollis euismod.

Danger: Donec ullamcorper nulla non metus auctor fringilla.

Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Info: Maecenas sed diam eget risus varius blandit sit amet non magna.

Usage Notes

Many modifiers are available to adjust the look and sizing of the paragraphs and lists. Here are a few examples:

View Source Back to Top
Copy Source

             <p class="lead">Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              
              <p class="big">Big paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              
              <p class="mid">Mid paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              	
              
              
              <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
              
              <p><small>This line of text is meant to be treated as fine print.</small></p>
              <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
              <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
              <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
              <p class="text-left">Left aligned text.</p>
              <p class="text-center">Center aligned text.</p>
              <p class="text-right">Right aligned text.</p>
              <p class="text-justify">Justified text.</p>
     
                            <p class="text-muted">Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                            <p class="text-primary">Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p class="text-warning">Warning: Etiam porta sem malesuada magna mollis euismod.</p>
                            <p class="text-danger">Danger: Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p class="text-success">Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                            <p class="text-info">Info: Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

Patterns - Design and mark-up patterns unique to your site.

big badges

Example

Video Audio Papers Journal

Usage Notes

Add .badge-big to the .badge class and use icons and colour to identify content.

Colour can also be inherited from panel. Any Font Awesome icon can be used in these badges, but please remember to also provide screen reader friendly text with .sr-only span tags.

View Source Back to Top
Copy Source
	            
		            <span class="badge badge-big">
		            	<span class="sr-only">Video</span>
		            	<i class="fa fa-file-video-o" aria-hidden="true"></i>
		            </span>
		            
		              <span class="badge badge-big badge-green">
		            	<span class="sr-only">Audio</span>
		            	<i class="fa fa-file-audio-o" aria-hidden="true"></i>
		            </span>
		            
		            
		              <span class="badge badge-big badge-red">
		            	<span class="sr-only">Papers</span>
		            	<i class="fa fa-files-o" aria-hidden="true"></i>
		            </span>
		              <span class="badge badge-big badge-cyan">
		            	<span class="sr-only">Journal</span>
		            	<i class="fa fa-newspaper-o" aria-hidden="true"></i>
		            </span>

breadcrumbs

Example

  1. Home
  2. Section
  3. Library
  4. Data

Usage Notes

The breadcrumb element should only be used when at least two levels down and should always come directly after the main nav.content-navigation:

View Source Back to Top
Copy Source
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Section</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

grid row spacing

Example

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4

Usage Notes

We have some classes that control the spacing of grid rows. These are all based on the global grid gutter width value, which is 16px in this theme.

View Source Back to Top
Copy Source
<div class="row v-spc-half-gutter ">
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
</div>
<div class="row v-spc-full-gutter">
  <div class="col-md-8 lightboxed">.col-md-8</div>
  <div class="col-md-4 lightboxed">.col-md-4</div>
</div>
<div class="row v-spc-gridline-top">
  <div class="col-md-4 lightboxed">.col-md-4</div>
  <div class="col-md-4 lightboxed">.col-md-4</div>
  <div class="col-md-4 lightboxed">.col-md-4</div>
</div>
<div class="row v-spc-half-gutter-top">
  <div class="col-md-6 lightboxed">.col-md-6</div>
  <div class="col-md-6 lightboxed">.col-md-6</div>
</div>
<div class="row v-spc-full-gutter-top">
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
  <div class="col-md-1 lightboxed">.col-md-1</div>
</div>
<div class="row v-spc-half-gutter-bottom">
  <div class="col-md-8 lightboxed">.col-md-8</div>
  <div class="col-md-4 lightboxed">.col-md-4</div>
</div>
<div class="row v-spc-full-gutter-bottom">
  <div class="col-md-4 lightboxed">.col-md-4</div>
  <div class="col-md-4 lightboxed">.col-md-4</div>
  <div class="col-md-4 lightboxed">.col-md-4</div>
</div>

hero

Example

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Usage Notes

Should go at top of page below nav.content-navigation. Mainly used on top level pages instead of the breadcrumb.

Use .illustrated class to include background-image. Custom background image should be included in an inline style to over-ride the default one.

Image used should be PNG with transparency, remember to support retina displays by embedding image at least double expected pixel height (ie. about 720px tall).

Images used should be processed in Photoshop and given overall 66% transparency with opacity feathered off to the left side.

View Source Back to Top
Copy Source

        <!-- Hero Content -->
        <div class="hero inverted illustrated" style="background-image: url(../sample-images/bsr_annual_report_2015-fade.png)">
	        <h2>Hello, world!</h2>
			  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
			  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
        </div>
        <!-- /.hero -->

list articles

Example

State of the NHS debate

Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel Lorem ipsum dolor sit amet, tiam eget.

Posted by Neil on 21st Jan 2017

Go to page >
Video

State of the NHS debate

Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel Lorem ipsum dolor sit amet, tiam eget.

Posted by Neil on 21st Jan 2017

Go to page >
Video

State of the NHS debate

Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel Lorem ipsum dolor sit amet, tiam eget.

Posted by Neil on 21st Jan 2017

Go to page >
Video

Usage Notes

Mainly used for search results and article lists. Can highlight content with icon and context using colour:

View Source Back to Top
Copy Source
<div class="article-listed">
		            <div class="list-text">
			            <h3>State of the NHS debate</h3>
			            <p class="extract">Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel Lorem ipsum dolor sit amet, tiam eget.</p>
			            <p class="meta">Posted by Neil on 21st Jan 2017</p>
			            <a href="#">Go to page &gt;</a>
			            
		            </div>
		            <span class="badge badge-big">
		            	<span class="sr-only">Video</span>
		            	<i class="fa fa-file-audio-o" aria-hidden="true"></i>
		            </span>
	            </div>
	            <div class="article-listed list-red">
		            <div class="list-text">
			            <h3>State of the NHS debate</h3>
			            <p class="extract">Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel Lorem ipsum dolor sit amet, tiam eget.</p>
			            <p class="meta">Posted by Neil on 21st Jan 2017</p>
			            <a href="#">Go to page &gt;</a>
			            
		            </div>		            
		            <span class="badge badge-big">
		            	<span class="sr-only">Video</span>
		            	<i class="fa fa-file-video-o" aria-hidden="true"></i>
		            </span>
	            </div>
	            <div class="article-listed list-cyan">
		            <div class="list-text">
			            <h3>State of the NHS debate</h3>
			            <p class="extract">Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel Lorem ipsum dolor sit amet, tiam eget.</p>
			            <p class="meta">Posted by Neil on 21st Jan 2017</p>
			            <a href="#">Go to page &gt;</a>
		            </div>
		            <span class="badge badge-big">
		            	<span class="sr-only">Video</span>
		            	<i class="fa fa-files-o" aria-hidden="true"></i>
		            </span>
	            </div>

list groups

Example

With links

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

With badges and contextual classes

  • 14 Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • 2 Porta ac consectetur ac
  • Vestibulum at eros

Usage Notes

Mainly used for sidebar sub-navigation element. Should appear below page content on mobile views. Give the .list-group-item a class of .active to highlight current location:

View Source Back to Top
Copy Source

    <h4>With links</h4>
    <div class="list-group">
      <a href="#" class="list-group-item active">
        Cras justo odio
      </a>
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item">Morbi leo risus</a>
      <a href="#" class="list-group-item">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>
    <h4>With badges and contextual classes</h4>
    <ul class="list-group">
      <li class="list-group-item list-group-item-success"><span class="badge">14</span> Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
      <li class="list-group-item list-group-item-warning"><span class="badge">2</span> Porta ac consectetur ac</li>
      <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>

media object

Example

Chetan Mukhtyar
Chetan Mukhtyar

Consultant Rheumatologist

Chetan’s story >


Bursaries and awards

Bursaries and awards

We offer a generous range of bursaries and awards to support your professional development and recognise achievements.



Use of media object to place icons inline with panel titles

Usage Notes

Examples cited used on Member Case Studies, Member Benefits and Knowledge pages.

View Source Back to Top
Copy Source


<div class="media">
	<div class="media-left">
		<img class="media-object" src="http://placehold.it/84x84" alt="Chetan Mukhtyar" width="84" height="84">
	</div>
	<div class="media-body">
		<h5 class="media-heading">Chetan Mukhtyar</h5>
		<p>Consultant Rheumatologist</p>
		<strong>Chetan’s story &gt;</strong>
	</div>
</div>

<br><br>

<div class="media">
	<div class="media-left">
		<img class="media-object" src="../assets/images/bursaries.svg" alt="Bursaries and awards" width="100" height="100">
	</div>
	<div class="media-body">
		<h4 class="media-heading">Bursaries and awards</h4>
		<p>We offer a generous range of bursaries and awards to support your professional development and recognise achievements. </p>
	</div>
</div>
			
<br><br>	
<div class="media badged">
	<div class="media-left media-middle">
		<span class="fa-stack fa-2x" aria-hidden="true">
			<i class="fa fa-circle fa-stack-2x"></i>
			<i class="fa fa-medkit fa-stack-1x fa-inverse"></i>
		</span>
	</div>
	<div class="media-body">
		<h3 class="media-heading">Use of media object to place icons inline with panel titles</h3>
	</div>
</div>

navbar

Example



Usage Notes

Goes at top of all pages. Fully responsive navigation header. Add .active class to li elements to highlight. top level icons disappear on smaller screens.

View Source Back to Top
Copy Source
<!-- Navigation -->
	    <nav class="navbar navbar-top" role="navigation">
            <!-- Brand and (desktop only) top row navbar-right -->
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">
	                <img src="../assets/images/British-Society-of-Rheumatology.svg" alt="British Society for Rheumatology" width="320" height="58">
	            </a>
            </div>
			<ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="contact.html">Get in touch</a>
                </li>
                <li class="icn">
                    <a href="https://twitter.com"><span class="sr-only">Twitter</span><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </li>
                <li class="icn">
                    <a href="https://facebook.com"><span class="sr-only">Facebook</span><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
                </li>
                <li class="icn">
                    <a href="https://linkedin.com"><span class="sr-only">LinkedIn</span><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
                </li>
                <li class="icn">
                    <a href="https://googleplus.com"><span class="sr-only">Google Plus</span><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a href="full-width.html" class="btn btn-primary navbar-btn">Join</a>
                </li>
                <li>
                    <a href="#" class="btn btn-primary navbar-btn">Login / Register</a>
                </li>
            </ul>
		</nav>
			 
        <!-- Main content navigation including mobile buttons -->
		<nav class="navbar content-navigation" role="navigation">
			<div class="navbar-mobile">
				<ul class="nav nav-pills">
		            <li><a href="search.html" class="navbar-search">
		                <span class="sr-only">Search</span>
		                <i class="fa fa-search" aria-hidden="true"></i>
		            	</a>
		            </li>
		            <li><a href="mybsr.html" class="navbar-user">
		                <span class="sr-only">My account</span>
		                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
		            	</a>
		            </li>
		            <li><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navbar-collapse">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="slicknav_menutxt">Menu</span>
		                <span class="slicknav_icon">
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
			                <span class="icon-bar"></span>
		                </span>
		            </button></li>
				</ul>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="primary-navbar-collapse">
				<ul class="nav nav-pills">
					<li class="active"><a href="what-we-do.html">What we do</a></li>
					<li><a href="pro-dev.hml">Professional development</a></li>
					<li><a href="knowledge.html">Knowledge</a></li>
					<li><a href="membership.html">Membership</a></li>
					<li><a href="working-with-us.html">Working with us</a></li>
					<li class="hide-desktop"><a href="about.html">About</a></li>
	                <li class="hide-desktop"><a href="contact.html">Get in touch</a></li>
					<li class="hide-mobile"><a href="search.html">
					  <span class="sr-only">Search</span>
					  <i class="fa fa-search" aria-hidden="true"></i></a>
					</li>
				</ul>
				
        	</div>
			<!-- /.navbar-collapse -->
		</nav>

page header

Example

Example page header Subtext for header

Usage Notes

Not required, to be used sparingly where a strong page title is required.

View Source Back to Top
Copy Source
<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

pagination

Example

Usage Notes

Different sizes available, although we use .pagination-lg through out the website. Please also ensure aria labels are included as shown:

View Source Back to Top
Copy Source
 <nav aria-label="Page navigation">
		  <ul class="pagination pagination-lg">
		    <li class="disabled">
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li class="active"><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>

panels

Example

Training courses

Developing Ultrasound

3–5 Feb, Wigan

This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.

Book now >

View all courses

Webinars

Cases of recovery

4 Sessions (18-24 Feb)

This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.

Book now >

View all webinars

E-Learning

Diagnosing rare conditions

This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.

View more >

Go to e-learning

Annual conference

27 April 2017

Find out more >>

Care practise workshop

27 May 2017

Find out more >>

Travelling fellowship

2 July 2017

Find out more >>

At conferences
In academic journals
Research

CPD

Drive your career in the right direction

This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.

Read more >

Mentoring

Others can help you identify your best

This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.

Read more >

Annual conference

27 April 2017

Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel ex.

Find out more >>

Updated guidelines

2 November 2017

Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel ex.

Find out more >>

Funding gaps identified

Whitepaper submitted to Department of Health

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Video

Bones and things

Podcast from the Guardian

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Audio

Usage Notes

We use many panel styles on the BSR website. For panels displayed in rows it may be necessary to add the .match-height class to elements in order to maintain the clean grid appearance (requires theme.js script).

View Source Back to Top
Copy Source


        <!-- .row -->
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4>Training courses</h4>
                    </div>
                    <div class="panel-body match-height">
	                    <header>
		                    <h4>Developing Ultrasound</h4>
			                <div class="date">3–5 Feb, Wigan</div>
	                    </header>
                        <p>This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.</p>
                        <p><a href="#">Book now &gt;</a></p>
                    </div>
                    <a href="#" class="panel-footer">View all courses <i class="fa fa-chevron-right top-right" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-green">
                    <div class="panel-heading">
                        <h4>Webinars</h4>
                    </div>
                    <div class="panel-body match-height">
	                    <header>
		                    <h4>Cases of recovery</h4>
		                    <div class="date">4 Sessions (18-24 Feb)</div>
	                    </header>
                        <p>This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.</p>
                        <p><a href="#">Book now &gt;</a></p>
                    </div>
                    <a href="#" class="panel-footer">View all webinars <i class="fa fa-chevron-right top-right" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-cyan">
                    <div class="panel-heading">
                        <h4>E-Learning</h4>
                    </div>
                    <div class="panel-body match-height">
	                    <header>
		                    <h4>Diagnosing rare conditions</h4>
	                    </header>
                        <p>This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.</p>
                        <p><a href="#">View more &gt;</a></p>
                    </div>
                    <a href="#" class="panel-footer">Go to e-learning <i class="fa fa-chevron-right top-right" aria-hidden="true"></i></a>
                </div>
            </div>
            
        </div>
        <!-- /.row -->
        
   <!-- .row -->
        <div class="row">
	        <div class="col-sm-4">
		        <div class="panel">
			        <img src="http://placehold.it/369x180" class="img-responsive" alt="">
			        <div class="panel-body match-height">
				        <header>
					        <h4 class="top-title">Annual conference</h4>
						    <div class="date">27 April 2017</div>
				        </header>
					    <p><a href="#" class="more">Find out more >&gt</a></p>
			        </div>
		        </div>
	        </div>
	         <div class="col-sm-4">
		        <div class="panel">
			        <img src="http://placehold.it/369x180" class="img-responsive" alt="">
			        <div class="panel-body match-height">
				        <header>
					        <h4 class="top-title">Care practise workshop</h4>
						    <div class="date">27 May 2017</div>
				        </header>
					    <p><a href="#" class="more">Find out more >&gt</a></p>
			        </div>
		        </div>
	        </div>
	         <div class="col-sm-4">
		        <div class="panel">
			        <img src="http://placehold.it/369x180" class="img-responsive" alt="">
			        <div class="panel-body match-height">
				        <header>
					        <h4 class="top-title">Travelling fellowship</h4>
						    <div class="date">2 July 2017</div>
				        </header>
					    <p><a href="#" class="more">Find out more >&gt</a></p>
			        </div>
		        </div>
	        </div>
        </div>
        <!-- /.row -->
        
         <!-- row -->
         <div class="row">
            <div class="col-sm-4 col-xs-6">
                <div class="panel panel-primary">
                    <a class="panel-block" href="#">At conferences</a>
                </div>
            </div>
             <div class="col-sm-4 col-xs-6">
                <div class="panel panel-red">
                    <a class="panel-block" href="#">In academic journals</a>
                </div>
            </div>
             <div class="col-sm-4 col-xs-6">
                <div class="panel panel-green">
                    <a class="panel-block" href="#">Research</a>
                </div>
            </div>
         </div>
        <!-- /.row -->
        
		<!-- .row -->
        <div class="row">
            <div class="col-md-6">
                <div class="panel match-height">
                    <div class="panel-heading">
                        <h4>CPD</h4>
                    </div>
                    <div class="panel-body">
	                    <header>
		                    <h4>Drive your career in the right direction</h4>
	                    </header>
                        <p>This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.</p>
                        <p><a href="#">Read more &gt;</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel match-height">
                    <div class="panel-heading">
                        <h4>Mentoring</h4>
                    </div>
                    <div class="panel-body">
	                    <header>
		                    <h4>Others can help you identify your best</h4>
	                    </header>
                        <p>This is dummy text lorum ipsum dolor sit amet labore magna aliqua member benefits are to help you.</p>
                        <p><a href="#">Read more &gt;</a></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
        
        
        <!-- .row -->
        <div class="row">
	        <div class="col-sm-6">
		        <div class="boxed-cta">
			        <img src="http://placehold.it/287x250" alt="">
			        <div class="text-box">
				        <header>
					        <h4 class="top-title">Annual conference</h4>
						    <div class="date">27 April 2017</div>
				        </header>
					    <p>Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel ex.</p>
					    <a href="#" class="more">Find out more >&gt</a>
			        </div>
		        </div>
	        </div>
	         <div class="col-sm-6">
		        <div class="boxed-cta">
			        <img src="http://placehold.it/287x250" alt="">
			        <div class="text-box">
				        <header>
					        <h4 class="top-title">Updated guidelines</h4>
						    <div class="date">2 November 2017</div>
				        </header>
					    <p>Lorem ipsum dolor sit amet, tiam eget pretium urna. Nunc sed risus non risus accumsan euismod et vel ex.</p>
					    <a href="#" class="more">Find out more >&gt</a>
			        </div>
		        </div>
	        </div>
        </div>
        <!-- /.row -->

	            <div class="row">
		            <div class="col-sm-6">
			            <div class="panel panel-badged match-height">
				            <div class="panel-body">
					            <a href="#">
						            <header class="related">
							            <h3>Funding gaps identified</h3>
							            <h4>Whitepaper submitted to Department of Health</h4>
						            </header>
						            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
						            <div class="top-right">
							            <span class="badge badge-big">
							            	<span class="sr-only">Video</span>
							            	<i class="fa fa-files-o" aria-hidden="true"></i>
							            </span>
						            </div>
					            </a>
				            </div>
			            </div>
		            </div>
		            <div class="col-sm-6">
			            <div class="panel panel-badged match-height">
				            <div class="panel-body">
					            <a href="#">
						            <header class="related">
							            <h3>Bones and things</h3>
							            <h4>Podcast from the Guardian</h4>
						            </header>
						            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
						            <div class="top-right">
							            <span class="badge badge-big badge-red">
							            	<span class="sr-only">Audio</span>
							            	<i class="fa fa-file-audio-o" aria-hidden="true"></i>
							            </span>
						            </div>
					            </a>
				            </div>
			            </div>
		            </div>
	            </div>

seamless grid

Example

Hello

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Hello

Lorem ipsum dolor sit amet, ident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read the reports >

Lorem ipsum dolor at non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Further information >

Hello

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage Notes

The What We Do page uses the seamless grid layout. Essentially collapses gutters so we can have coloured backgrounds.

Requires assets/theme.js script which applies matchHeights.

View Source Back to Top
Copy Source
 <!-- Content Row -->
        <div class="row v-spc-gridline-top">
            <div class="col-sm-7 col-seamless-left">
	            <div class="section-box light">
	               <h3 class="top-title">Hello</h3>
	               <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a>
	            </div>
            </div>
            <div class="col-sm-5 col-seamless-right">
	            <div class="section-box lightest">
	               <h3 class="top-title">Hello</h3>
	               <p class="lead">Lorem ipsum dolor sit amet, ident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a>
					<p class="top-right"><a href="#">Read the reports &gt;</a></p>
	            </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-4 col-seamless-left">
	            <div class="section-box lightest">
	               <p class="lead">Lorem ipsum dolor at non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a>

			<p><a href="#">Further information &gt;</a></p>
	            </div>
            </div>
            <div class="col-sm-8 col-seamless-right">
	            <div class="section-box dark">
	            
	               <h3 class="top-title">Hello</h3>
	               <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a>
	            </div>
            </div>
        </div>
        <!-- /.row -->

site footer

Example



Usage Notes

Goes at bottom of all pages. Fully responsive footer content. Social media icons appear twice in the markup but only appear once when viewed, location dependent on screen size.

View Source Back to Top
Copy Source

        <!-- footer.site-footer -->
        <footer class="site-footer">
	        <div class="row">
		        <div class="col">
			        <h4 class="top-title"><i class="fa fa-twitter" aria-hidden="true"></i> Latest Tweet</h4>
			        <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh. </p>
			        <a href="#">2hrs ago @bsr_uk</a>
		        </div>
		        <div class="col">
			        <h4 class="top-title">Contact us</h4>
			        <address>
					  <strong>British Society for Rheumatology</strong><br>
					  Bride House, 18-20 Bride Lane,<br>
					  London EC4Y 8EE
					</address>
					<address>
					  <abbr title="Telephone">T:</abbr> +44 (0) 20 7842 0900<br>
					  <abbr title="Email address">E:</abbr> <a href="mailto:#">bsr@rheumatology.org</a>
					
					</address>

		        </div>
		        <div class="col">
			        <h4 class="top-title">Support us</h4>
			        <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
		        </div>
		        <div class="col">
			        <ul class="social-networks">
		                <li class="icn">
		                    <a href="https://twitter.com"><span class="sr-only">Twitter</span><i class="fa fa-twitter" aria-hidden="true"></i></a>
		                </li>
		                <li class="icn">
		                    <a href="https://facebook.com"><span class="sr-only">Facebook</span><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
		                </li>
		                <li class="icn">
		                    <a href="https://linkedin.com"><span class="sr-only">LinkedIn</span><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
		                </li>
		                <li class="icn">
		                    <a href="https://googleplus.com"><span class="sr-only">Google Plus</span><i class="fa fa-google-plus" aria-hidden="true"></i></a>
		                </li>
			        </ul>
			        <a class="btn btn-primary btn-block" href="join.html">
				        Join
			        </a>
		        </div>
	        </div>
            <div class="house-keeping">
                <div class="info-links">
	                <nav class="navbar navbar-bottom" role="navigation">
			            <!-- footer navbar-right -->
			            
						<ul class="nav navbar-nav">
			                <li>
			                    <a href="#">Company information</a>
			                </li>
			                <li>
			                    <a href="#">Terms &amp; conditions</a>
			                </li>
			                <li>
			                    <a href="#">Privacy policy</a>
			                </li>
			                <li>
			                    <a href="#">Sitemap</a>
			                </li>
			                <li class="icn">
			                    <a href="https://twitter.com"><span class="sr-only">Twitter</span><i class="fa fa-twitter" aria-hidden="true"></i></a>
			                </li>
			                <li class="icn">
			                    <a href="https://facebook.com"><span class="sr-only">Facebook</span><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
			                </li>
			                <li class="icn">
			                    <a href="https://linkedin.com"><span class="sr-only">LinkedIn</span><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
			                </li>
			                <li class="icn">
			                    <a href="https://googleplus.com"><span class="sr-only">Google Plus</span><i class="fa fa-google-plus" aria-hidden="true"></i></a>
			                </li>
			            </ul>
					</nav>
                </div>
                
                <div class="copyright">
                    <p>&copy; 2017 British Society for Rheumatology</p>
                </div>
            </div>
        </footer>
		<!-- /footer.site-footer -->