Edinburgh GEL

Contacts

A structured content block that groups an individual's or functional area's contact details.

You can set a single instance of a generic or personal contact box to appear in multiple places on your site.

There are a variety of fields available in the contact asset, including titles, award and contact details. There is also an 'extra details' field, for adding information that doesn't fit into the template. We recommend that you only use the fields you need, to avoid overwhelming visitors.

Accessibility review

Standard well-formed HTML contacts are fully accessible. There are no problems with these elements.

Accessibility issues

None.

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<h3>Functional</h3>            
<div class="panel">
<div class="panel-body">
  <h2>Contact us</h2>
  <div class="row">
    <div class="col-sm-12 col-md-5"> <a href="tel:+4412345678901" class="tel">+44 (0)1234567 <strong>8901</strong></a>
      <div class="enquiries">
        <h3>Undergraduate enquiries</h3>
        <a href="mailto:undergrad@ed.ac.uk" class="email">undergrad@ed.ac.uk</a> </div>
      <div class="enquiries">
        <h3>Postgraduate enquiries</h3>
        <a href="mailto:postgrad@ed.ac.uk" class="email">postgrad@ed.ac.uk</a> </div>
      <div>
        <h4>Address</h4>
        <dl class="address">
          <dt>Building</dt>
          <dd>Old College</dd>
          <dt>Street</dt>
          <dd>South Bridge</dd>
          <dt>City</dt>
          <dd>Edinburgh</dd>
          <dt>Post Code</dt>
          <dd>EH8 9YL</dd>
        </dl>
      </div>
    </div>
    <div class="col-sm-12 col-md-7">
      <div id="map_canvas" class="map"></div>
    </div>
  </div>
</div>
</div>

<h3>Individual</h3>
<section class="panel uoe-contact" itemtype="http://schema.org/Person" itemscope="">
  <div class="panel-body">
  <header>
    <h2>John Doe</h2>
    <h3 itemprop="jobTitle">Job title goes here</h3>
  </header>
  <div class="row">
    <div class="col-xs-12 col-sm-3 col-md-2" itemprop="image">
      <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
    </div>
    <div class="col-xs-12 col-sm-9 col-md-10">
      <ul class="organizations" itemtype="http://schema.org/Organization" itemscope="" itemprop="affiliation">
        <li itemprop="legalName">Organisation 1</li>
        <li itemprop="legalName">Organisation 2</li>
        <li itemprop="legalName">Organisation 3</li>
      </ul>
     
      <ul itemtype="http://schema.org/ContactPoint" itemscope="" itemprop="contactPoint">
          <li>
            <div class="inline glyphicon glyphicon-phone-alt"></div>
            Work:
            <a itemprop="telephone" class="tel" href="tel:+44 131 650 0000">+44 131 650 0000</a>
          </li>
          <li>
            <div class="inline glyphicon glyphicon-phone-alt"></div>
            Extra work phone:
            <a itemprop="telephone" class="tel" href="tel:+44 131 650 0003">+44 131 650 0003</a>
          </li>
          <li>
            <div class="inline glyphicon glyphicon-phone-alt"></div>
            Mobile:
            <a itemprop="telephone" class="tel" href="tel:+44 131 650 0002">+44 131 650 0002</a>
          </li>
          <li>
            <div class="inline glyphicon glyphicon-phone-alt"></div>
            Fax:
            <a itemprop="faxNumber" class="fax" href="fax:+44 131 650 0001">+44 131 650 0001</a>
          </li>
          <li>
            <div class="inline glyphicon glyphicon-envelope"></div>
            Email:
            <a itemprop="email" class="email" href="mailto:someone@ed.ac.uk">someone@ed.ac.uk</a>
          </li>
          <li>
            <div class="inline glyphicon glyphicon-home"></div>
            WWW:
            <a itemprop="url" title="Link title" class="url" href="http://www.ed.ac.uk">Web site</a>
          </li>
          <li>
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                Social media                 
                <span class="caret"></span>
              </button>
              <ul aria-labelledby="dropdownMenu1" role="menu" class="dropdown-menu">
                <li role="presentation">
                  <a class="url" itemprop="url" title="Social title" href="http://www.ed.ac.uk/social" role="menuitem">
                    <div class="inline glyphicon glyphicon-globe"></div>
                    Social media                   
                  </a>
                </li>
                <li role="presentation">
                  <a class="url" itemprop="url" title="Media 2" href="http://www.ed.ac.uk/more" role="menuitem">
                    <div class="inline glyphicon glyphicon-globe"></div>
                    A second social media list
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
    </div>
  </div>
  <div class="row">
    <div class="separator"></div>
    <div class="col-xs-12 col-sm-3 col-md-2 address">
      <dl itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address" class="address">
        <dt>Street</dt>
        <dd itemprop="streetAddress"><p>Address line 1<br>
                                        Address line 2<br>
                                        Address line 3<br>
                                        Address line 4</p>
                                        </dd>
        <dt>City</dt>
        <dd itemprop="addressLocality">Edinburgh</dd>
        <dt>Post Code</dt>
        <dd itemprop="postalCode">EH8 9YL</dd>
      </dl>
    </div>
    <div class="col-xs-12 col-sm-9 col-md-10 times">
      <ul itemtype="http://schema.org/ContactPoint" itemscope="" itemprop="contactPoint">
        <li itemprop="hoursAvailable"><p>Mon-Fri 9:30-5:30<br>
          Sat-Sun 10:00-14:00</p>
        </li>
      </ul>
    </div>
  </div>
  </div>
</section>     

<h3>Individuals (text list)</h3>
<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Tel</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Dean of Faculty</td>
      <td>+44(0)1234 567 890</td>
      <td><a href="#">email@email.ac.uk</a></td>
    </tr>
    <tr>
      <td>Jake Simmons</td>
      <td>Professor</td>
      <td>+44(0)1234 567 890</td>
      <td><a href="#">email@email.ac.uk</a></td>
    </tr>
    <tr>
      <td>Bob Smith</td>
      <td>Vice Chancellor</td>
      <td>+44(0)1234 567 890</td>
      <td><a href="#">email@email.ac.uk</a></td>
    </tr>
    <tr>
      <td>Freda Bloggs</td>
      <td>Lecturer</td>
      <td>+44(0)1234 567 890</td>
       <td><a href="#">email@email.ac.uk</a></td>
    </tr>
    <tr>
      <td>Dave Brown</td>
      <td>Assistant</td>
      <td>+44(0)1234 567 890</td>
      <td><a href="#">email@email.ac.uk</a></td>
    </tr>
    <tr>
      <td>Leigh Howells</td>
      <td>Secretary</td>
      <td>+44(0)1234 567 890</td>
       <td><a href="#">email@email.ac.uk</a></td>
    </tr>
    <tr>
      <td>Chris Scott</td>
      <td>Lecturer</td>
      <td>+44(0)1234 567 890</td>
     <td><a href="#">email@email.ac.uk</a></td>
    </tr>
    <tr>
      <td>John Morgan</td>
      <td>Lecturer</td>
      <td>+44(0)1234 567 890</td>
       <td><a href="#">email@email.ac.uk</a></td>
    </tr>
  </tbody>
</table>

<h3>Individuals (thumbnail list)</h3>
<section class="panel">
  <header class="panel-heading">
    <h1>In this department</h1>
    <h3>People listing</h3>
  </header>
  <div class="panel-body">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
      <a href="#"> <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
      <div class="caption">
        <h4>Title or name here</h4>
        <h5>Name or title here</h5>
      </div>
      </a> </div></div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
      <a href="#"> <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
      <div class="caption">
        <h4>Title or name here</h4>
        <h5>Name or title here</h5>
      </div>
      </a> </div></div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
      <a href="#"> <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
      <div class="caption">
        <h4>Title or name here</h4>
        <h5>Name or title here</h5>
      </div>
      </a> </div></div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
      <a href="#"> <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
      <div class="caption">
        <h4>Title or name here</h4>
        <h5>Name or title here</h5>
      </div>
      </a> </div></div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
      <a href="#"> <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
      <div class="caption">
        <h4>Title or name here</h4>
        <h5>Name or title here</h5>
      </div>
      </a> </div></div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
      <a href="#"> <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
      <div class="caption">
        <h4>Title or name here</h4>
        <h5>Name or title here</h5>
      </div>
      </a> </div></div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
      <a href="#"> <img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/profile-icon.png?itok=puNK-EY1" width="100" height="130">
      <div class="caption">
        <h4>Title or name here</h4>
        <h5>Name or title here</h5>
      </div>
      </a> </div></div>
  </div>
  </div>
</section>