Feature Layouts

Feature Layouts

• News Feature Layout
• Profile Feature Layout
• Infographic Feature Layout

News Feature Layout

A news listing is implemented as a Card Panel. Where each card is is a news item formatted as below:

<div class="card card-linked">
  <div class="card-media-wrap force-3-2">
    <img class="card-img" src="{ARTICLE_THUMBNAIL}" alt="{ARTICLE_TITLE}">
  </div>
  <a class="card-title-link" href="{ARTICLE_URL}"><h3 class="card-title">{ARTICLE_TITLE}</h3></a>
  <a href="{ARTICLE_URL}" class="faux-link-overlay" aria-hidden="true">{ARTICLE_TITLE}</a>
  <time class="card-meta" datetime="{ARTICLE_DATE format: ISO}">{ARTICLE_DATE format:"j F Y"}</time>
</div>

Profile Feature Layout

A profile listing is implemented as a Card Panel. Using backed cards with split headers. Where each card is is a news item formatted as below:

<div class="card card-linked">
  <header class="card-header">
    <img class="card-img img-circle" src="{PROFILE_IMG_SRC}">
  </header>
  <a class="card-title-link" href="{PROFILE_URL}"><h3 class="card-title">{PROFILE_DISPLAYNAME}</h3></a>
  <a href="{PROFILE_URL}" class="faux-link-overlay" aria-hidden="true">{PROFILE_DISPLAYNAME}</a>
  <p class="card-subtitle">{PROFILE_JOB_TITLE}</p>
</div>

Infographic Feature Layout

A Infographic Feature Layout is implemented as a Card Panel. Using card-backed with different colours and card-title-figure such as below.

<div class="card-panel cards-backed cards-linked">
  <div class="card-panel-body">
    <div class="card card-backed-primary">
      <h3 class="card-title card-title-figure">37%</h3>
      <p class="card-text">37% of our academic staff are from overseas and we have students representing 148 nationalities.</p>
    </div>
    <div class="card card-backed-primary-light">
      <h3 class="card-title card-title-figure">1</h3>
      <p class="card-text">Dolphin mascot who speaks Astro French</p>
    </div>
    <div class="card card-backed-energy">
      <h3 class="card-title card-title-figure">92%</h3>
      <p class="card-text">92% of our research was found to be international quality in the Research Excellence Framework 2014 (an independent national survey of UK univercities).</p>
    </div>
    <div class="card card-backed-primary">
      <h3 class="card-title card-title-figure">5<sup>th</sup></h3>
      <p class="card-text">Kent gained the 5th highest score for overall student satisfaction in the National Student Survey 2015.</p>
    </div>
  </div>
</div>