Teasers

To show an overview of nodes we us teasers. On average the content of the teasers is pretty consistent, but each content type can have different fields.

Teasers always have an image on the left. This can be a photo is the content contains an image field. The fallback is always an image showing the content type icon.

Page

<div class='views-row'>
  <article class='node-teaser-page node-teaser'>
    <div class='field-type-image'></div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'>ea dolorem omnis dolores ut voluptate voluptas ipsa voluptas voluptas soluta</a></h2>
      <div class='submitted'>
        <span class='type page' href='#'>Page</span> 16 Nov 2014, by <a href='#'> Jason Adkins </a>
      </div>
      <div class='field-name-body'>
        Voluptatum velit quod hic temporibus officia inventore dolorum ab quia  cupiditate maiores et. ut et beatae dolores. hic reprehenderit minima  similique at necessitatibus pariatur minima dolores laborum omnis dolorum est  ad quia
      </div>
    </div>
  </article>
</div>

FAQ

  <div class='views-row'>
    <article class='node-teaser-faq node-teaser'>
      <div class='field-type-image'></div>
      <div class='field-type-wrapper'>
        <h2 class='node-title'><a href='#'>voluptatibus id eum et aut libero?</a></h2>
        <div class='submitted'>
          <a class='type faq' href='#'>Faq</a> 05 Dec 2014, by <a href='#'>Collin Holmes</a>
        </div>
        <div class='field-name-body'>
          Ut inventore tempora reiciendis. corrupti ducimus eaque consequatur sequi sint  . in voluptatibus sit quod. ipsa ut rerum et voluptas voluptatem id hic eos   explicabo aut. et modi consequatur delectus corporis sit. et facere   consectetur doloremque quidem id modi. facilis voluptas molestias culpa velit
        </div>
      </div>
    </article>
  </div>

News

  <div class='views-row'>
    <article class='node-teaser-news node-teaser lazyload' data-expand='0'>
      <div class='field-type-image'></div>
      <div class='field-type-wrapper'>
        <h2 class='node-title'>
          <a href='./news-article.html'>
            Farmer Phills Music Festival
          </a>
        </h2>
        <div class='submitted'>
          <a class='type news' href='./news.html'>News</a>
          12 Apr 2015, by
          bart_goldman
        </div>
        <div class='field-name-body'>
          We're  really pleased to confirm that we will be back at Farmer Phills music festival this year. The festival is held just outside Shrewsbury in the Shropshire hills on the 14th-16th August.
        </div>
      </div>
    </article>
  </div>

Blog

<div class='views-row'>
  <article class='node-teaser-blog node-teaser'>
    <div class='field-type-image'>
      <picture>
        <!--[if IE 9]> <video style="display: none;"> <![endif]-->
        <source media='(min-width: 48em)' srcset='http://lorempixel.com/130/90/animals/1/desk, http://lorempixel.com/260/180/animals/2/deskx1.5 1.5x'>
        <source srcset='http://lorempixel.com/180/120/animals/3/mobx2 2x, http://lorempixel.com/90/60/animals/4/mob 1x'>
        <!--[if IE 9]> </video> <![endif]-->
        <img alt='Example of image.' src='http://lorempixel.com/90/60/animals/5/img'>
      </picture>
    </div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='./news-article.html'>voluptatem nostrum quibusdam unde repudiandae vero mollitia provident nobis magni</a></h2>
      <div class='submitted'>
        <a class='type blog' href='#'>Blog</a> 11 Aug 2014, by <a href='#'>Allyson Hatcher</a>
      </div>
      <div class='field-name-body'>
        Et aut ut a magni et quam praesentium ut a sint sequi architecto veniam et. quia eum omnis rerum velit mollitia veritatis recusandae voluptatem corrupti commodi consequatur quia. error odit ea vel aut et eaque placeat mollitia voluptatibus quae rerum aliquam repellendus. reiciendis odit tempore neque. suscipit asperiores perspiciatis maiores praesentium dolorem voluptas dolores praesentium accusantium at quae asperiores laborum quod. odio et impedit qui vel. incidunt aut voluptas enim earum sapiente earum
      </div>
    </div>
  </article>
</div>

Document

Ipsam quis maxime ut soluta et sed

Eligendi quia et placeat nisi eos ut ducimus corporis et quis recusandae. itaque et ipsam dolorum ipsam sit hic beatae qui porro provident ut mollitia dolores saepe. officiis nobis in sunt assumenda debitis ducimus repudiandae ut explicabo. explicabo autem libero beatae sed magnam similique ut at illo similique in. veritatis dignissimos illum sed exercitationem vitae eaque veritatis fugit et non
<div class='views-row'>
  <article class='node-teaser-document node-teaser'>
    <div class='field-type-image'></div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'>Quia minus sunt corporis</a></h2>
      <div class='submitted'>
        <a class='type document' href='#'>Document</a>24 Sep 2013, by<a href='#'>Sydney Rowe</a>
      </div>
      <div class='field-name-body'>
        Dicta quia sed voluptates architecto perferendis quis aliquid sequi nemo nisi   quae. dicta esse molestiae voluptatum dicta vitae qui. aut optio quis   inventore voluptates itaque
      </div>
    </div>
  </article>
</div>

Idea

Aliquam expedita consequatur excepturi maiores in earum est qui

Dolor eos libero repudiandae voluptatem sit rerum repellat quo nulla. earum beatae sint et et ut est iure dolores ut explicabo. molestiae est enim qui accusamus beatae sit mollitia a necessitatibus molestiae eos incidunt voluptas. nulla quia quia molestiae doloremque expedita est. voluptate excepturi quidem magnam sapiente ipsam quia nostrum quas magnam voluptatem dolores. molestias debitis omnis numquam vero animi eligendi numquam enim unde quod nesciunt assumenda voluptatem. tempora error excepturi unde exercitationem laudantium velit
<div class='views-row'>
  <article class='node-teaser-idea node-teaser'>
    <div class='field-type-image'></div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'>deleniti sunt corporis ullam</a></h2>
      <div class='submitted'>
        <a class='type idea' href='#'>Idea</a> 9 Dec, by<a href='#'>Phil Graves</a>
      </div>
      <div class='field-name-body'>
        Eveniet exercitationem placeat dolorum cumque quis aspernatur. possimus   doloribus ea est dolorum vero. deserunt minima qui non. enim voluptatibus   aspernatur repellat accusamus inventore praesentium aut eaque hic eveniet et  debitis. occaecati possimus facere nemo eveniet ut minus ullam occaecati eos   facere possimus. eum similique perspiciatis omnis dolores et repudiandae at   ullam veniam illum at. qui qui nemo porro sint numquam animi ut nam id
      </div>
    </div>
  </article>
</div>

Photo

<div class='views-row'>
  <article class='node-teaser-photo node-teaser'>
    <div class='field-type-image'>
      <picture>
        <!--[if IE 9]> <video style="display: none;"> <![endif]-->
        <source media='(min-width: 48em)' srcset='http://lorempixel.com/130/90/animals/1/desk, http://lorempixel.com/260/180/animals/2/deskx1.5 1.5x'>
        <source srcset='http://lorempixel.com/180/120/animals/3/mobx2 2x, http://lorempixel.com/90/60/animals/4/mob 1x'>
        <!--[if IE 9]> </video> <![endif]-->
        <img alt='Example of image.' src='http://lorempixel.com/90/60/animals/5/img'>
      </picture>
    </div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'> sit excepturi nobis nulla ut ea </a></h2>
      <div class='submitted'>
        <a class='type photo' href='#'>Photos</a>4 Mar, by<a href='#'>Janet Bowden</a>
      </div>
      <div class='field-name-body'>
        Rerum adipisci commodi maxime at et sed reiciendis velit est quam. nam est iste animi sed reiciendis impedit. eos quia aut voluptatem sunt debitis vitae. autem est enim et quis itaque enim id maxime qui eum nesciunt quasi blanditiis. dignissimos ab placeat quo vel dignissimos voluptatem rerum. impedit eligendi voluptatem aut ducimus explicabo non maxime voluptas
      </div>
    </div>
  </article>
</div>

Video

Example of image.

Qui error laborum alias et

Molestiae ut esse omnis. ab quis ad beatae. modi doloremque praesentium aspernatur perferendis. aliquid accusamus quod quis nulla odit blanditiis. vel vitae assumenda suscipit occaecati repellendus velit consectetur ut voluptate porro in explicabo ex. sint aliquam ut molestiae est excepturi. omnis quia quis omnis consequuntur aut rem cumque laboriosam et numquam repellendus eos suscipit
<div class='views-row'>
  <article class='node-teaser-video node-teaser'>
    <div class='field-type-image'>
      <picture>
        <!--[if IE 9]> <video style="display: none;"> <![endif]-->
        <source media='(min-width: 48em)' srcset='http://lorempixel.com/130/90/animals/1/desk, http://lorempixel.com/260/180/animals/2/deskx1.5 1.5x'>
        <source srcset='http://lorempixel.com/180/120/animals/3/mobx2 2x, http://lorempixel.com/90/60/animals/4/mob 1x'>
        <!--[if IE 9]> </video> <![endif]-->
        <img alt='Example of image.' src='http://lorempixel.com/90/60/animals/5/img'>
      </picture>
    </div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'> quisquam quos molestiae dolorem vero necessitatibus dignissimos rerum itaque iste</a></h2>
      <div class='submitted'><a class='type video' href='#'>Video</a>14 Apr, by<a href='#'>Eoin Hill</a>
      </div>
      <div class='field-name-body'>
        Cum ipsam qui quod est dolores dolore. non libero similique voluptatibus enim veritatis. temporibus totam officia non et impedit qui nihil dicta vel aut at vero. dolor aut quas ut deleniti dolor vitae ea maiores voluptatem neque non. deleniti quisquam adipisci qui doloribus et est officia deserunt ipsum quasi earum. doloribus est et cum velit aut porro fugit aliquid quo nostrum minus voluptatem. porro ab voluptatem excepturi suscipit et autem dolore dolor et atque dicta temporibus architecto
      </div>
    </div>
  </article>
</div>

Event

<div class='views-row'>
  <article class='node-teaser-event node-teaser'>
    <div class='field-type-image'>
      <picture>
        <!--[if IE 9]> <video style="display: none;"> <![endif]-->
        <source media='(min-width: 48em)' srcset='./../../images/event-map-example_130.jpg, ./../../images/event-map-example_260.jpg 1.5x'>
        <source srcset='./../../images/event-map-example_90.jpg, ./../../images/event-map-example_180.jpg 1.5x'>
        <!--[if IE 9]> </video> <![endif]-->
        <img alt='Example of image.' src='./../../images/event-map-example_90.jpg'>
      </picture>
    </div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'>Nostrum eum deleniti qui ut nemo provident vero</a></h2>
      <div class='submitted'>
        <a class='type event' href='./events.html'>Event</a>2 Jan, 20:00 - 23:00 CET
      </div>
      <div class='field-group-format'>
        <div class='field-type-date'><label>Time:</label>August 10th, 8:00PM until  11:30 PM
        </div>
        <div class='field-type-location'><label>Address:</label>Oude Markt 9B,  Enschede (Market Square)
        </div>
      </div>
    </div>
  </article>
</div>

Group

Example of image.

Veritatis ipsa quia quos natus dolor

Qui recusandae dicta eos est vitae nostrum. sint aut non molestiae earum optio. quidem aut fugiat quasi deleniti mollitia. qui nisi nobis dicta consectetur voluptatibus tempora aut iure. laboriosam eum delectus inventore voluptatem consequatur blanditiis quia ipsa sed rerum provident magni reprehenderit. quae officia molestiae voluptatibus voluptatum voluptatem magni distinctio dolore qui modi. in aut iusto quos et quisquam aliquid
<div class='views-row'>
  <article class='node-teaser-group node-teaser'>
    <div class='field-type-image'>
      <picture>
        <!--[if IE 9]> <video style="display: none;"> <![endif]-->
        <source media='(min-width: 48em)' srcset='http://lorempixel.com/130/90/animals/1/desk, http://lorempixel.com/260/180/animals/2/deskx1.5 1.5x'>
        <source srcset='http://lorempixel.com/180/120/animals/3/mobx2 2x, http://lorempixel.com/90/60/animals/4/mob 1x'>
        <!--[if IE 9]> </video> <![endif]-->
        <img alt='Example of image.' src='http://lorempixel.com/90/60/animals/5/img'>
      </picture>
    </div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'>veritatis necessitatibus vero accusantium commodi quis sed</a></h2>
      <div class='submitted'><a class='type group' href='#'>Group</a>Country group (open)</div>
      <div class='field-name-body'>
        Vero dolor labore ullam nemo voluptas corrupti rerum rerum officia temporibus. vel maiores possimus est voluptas eius quo molestiae esse voluptatum sint eaque quae iure. in aut ducimus ut. consequuntur tempora perferendis accusantium odio enim autem eveniet. et et soluta consequuntur dolorem eaque iusto amet. aut distinctio in autem vel tenetur optio quis est quia id dicta
      </div>
    </div>
  </article>
</div>

Member

<div class='views-row'>
  <article class='node-teaser-user node-teaser'>
    <div class='field-type-image'>
      <picture>
        <!--[if IE 9]> <video style="display: none;"> <![endif]-->
        <source media='(min-width: 48em)' srcset='/photos/130/people4.jpg, /photos/260/people5.jpg 1.5x'>
        <source srcset='/photos/180/people1.jpg 2x, /photos/90/people2.jpg 1x'>
        <!--[if IE 9]> </video> <![endif]-->
        <img alt='Example of image.' src='/photos/blank.png' srcset='/photos/90/people3.jpg'>
      </picture>
    </div>
    <div class='field-type-wrapper'>
      <h2 class='node-title'><a href='#'>Adrianna Connolly<span class='username'>(alexandra_scarborough)</span></a></h2>
      <div class='submitted'><a class='type user' href='#'>Staff</a><span>Portland</span></div>
      <div class='field-name-body'>
        Quae et et nobis enim nihil sequi nemo est assumenda cum quisquam eveniet et. porro repellendus ad aut voluptate voluptatem illum. est et ad quaerat minus vel unde placeat saepe quam fugit debitis inventore sapiente aliquid. doloribus pariatur amet mollitia et rerum autem ad veritatis aut velit quis. quis debitis quo facere ut qui repellat qui deleniti quia voluptatibus ex dolorum. ut est assumenda vel vel sapiente maiores vel. voluptates ut fugit enim incidunt atque nemo delectus
      </div>
    </div>
  </article>
</div>