Pattern sample

Annotation Teaser

[Do not use this base pattern directly: see the following variants of this pattern for usage]

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      [Do not use this base pattern directly: see the following variants of this pattern for usage]
    </div>


    <div class="annotation-teaser__content">
       
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">



            <span class="meta__type"> </span>

        </div>

    </footer>

</article>

Annotation Teaser Full

CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells

Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain

What was the Mg²⁺ concentration?

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells
    </div>

    <blockquote class="annotation-teaser__highlight">
      Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain
    </blockquote>

    <div class="annotation-teaser__content">
      What was the Mg<sup>2+</sup> concentration?
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">





    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Annotation Teaser Highlight

Clarinet (CLA-1), a novel active zone protein required for synaptic vesicle clustering and release

Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      Clarinet (CLA-1), a novel active zone protein required for synaptic vesicle clustering and release
    </div>

    <blockquote class="annotation-teaser__highlight">
      Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain
    </blockquote>

    <div class="annotation-teaser__content">
       
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">





    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Annotation Teaser Page Note

Gene free methodology for cell fate dynamics during development

What was the Mg²⁺ concentration?

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      Gene free methodology for cell fate dynamics during development
    </div>


    <div class="annotation-teaser__content">
      What was the Mg<sup>2+</sup> concentration?
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">





    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Annotation Teaser Reply

CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells

What was the Mg²⁺ concentration?

This is a reply.

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#" data-is-reply="1">

    <div class="annotation-teaser__document">
      CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells
    </div>


    <div class="annotation-teaser__content">
      What was the Mg<sup>2+</sup> concentration?
    </div>
      <div class="annotation-teaser__reply">
        This is a reply.
      </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">





    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Annotation Teaser Restricted

Molecular basis of fatty acid taste in Drosophila

Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain

What was the Mg²⁺ concentration?

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      Molecular basis of fatty acid taste in <i>Drosophila</i>
    </div>

    <blockquote class="annotation-teaser__highlight">
      Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain
    </blockquote>

    <div class="annotation-teaser__content">
      What was the Mg<sup>2+</sup> concentration?
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">



            <span class="meta__type">Only me</span>


    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Annotation Teaser With Image

CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells

Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain

https://images.pexels.com/photos/707837/pexels-photo-707837.jpeg?w=940&h=650&auto=compress&cs=tinysrgb

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells
    </div>

    <blockquote class="annotation-teaser__highlight">
      Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain
    </blockquote>

    <div class="annotation-teaser__content">
      https://images.pexels.com/photos/707837/pexels-photo-707837.jpeg?w=940&h=650&auto=compress&cs=tinysrgb
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">





    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Annotation Teaser With Link

CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells

Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain

https://www.youtube.com/watch?v=oHg5SJYRHA0

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells
    </div>

    <blockquote class="annotation-teaser__highlight">
      Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain
    </blockquote>

    <div class="annotation-teaser__content">
      https://www.youtube.com/watch?v=oHg5SJYRHA0
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">





    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Annotation Teaser With Math

CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells

<math xmlns="http://www.w3.org/1998/Math/MathML"><mlongdiv><mn> 12 </mn><mn> 16.5 </mn> <mn> 198 </mn> <msgroup position='1' shift='-1'> <msgroup> <mn> 12</mn> <msline length='2'/> </msgroup> <msgroup> <mn> 78</mn> <mn> 72</mn> <msline length='2'/> <mn> 6.0</mn> <mn> 6.0</mn> </msgroup> <msgroup position='-1'>  <msline length='3'/> <mn> 0</mn> </msgroup> </msgroup> </mlongdiv> </math>

Long division ftw.

HTML

									
										<article class="annotation-teaser" data-behaviour="AnnotationTeaser" data-in-context-uri="#">

    <div class="annotation-teaser__document">
      CRIg, a tissue-resident macrophage specific immune checkpoint molecule, promotes immunological tolerance in NOD mice, via a dual role in effector and regulatory T cells
    </div>

    <blockquote class="annotation-teaser__highlight">
      &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;&lt;mlongdiv&gt;&lt;mn&gt; 12 &lt;/mn&gt;&lt;mn&gt; 16.5 &lt;/mn&gt;  &lt;mn&gt; 198 &lt;/mn&gt;  &lt;msgroup position='1' shift='-1'&gt;  &lt;msgroup&gt;  &lt;mn&gt; 12&lt;/mn&gt;  &lt;msline length='2'/&gt;  &lt;/msgroup&gt;  &lt;msgroup&gt;  &lt;mn&gt; 78&lt;/mn&gt;  &lt;mn&gt; 72&lt;/mn&gt;  &lt;msline length='2'/&gt;  &lt;mn&gt; 6.0&lt;/mn&gt;  &lt;mn&gt; 6.0&lt;/mn&gt;  &lt;/msgroup&gt;  &lt;msgroup position='-1'&gt; &lt;!-- extra shift to move to the right of the "." --&gt;  &lt;msline length='3'/&gt;  &lt;mn&gt; 0&lt;/mn&gt;  &lt;/msgroup&gt;  &lt;/msgroup&gt;  &lt;/mlongdiv&gt;  &lt;/math&gt;
    </blockquote>

    <div class="annotation-teaser__content">
      Long division ftw.
    </div>

    <footer class="annotation-teaser__footer">

        <div data-behaviour="Meta" class="meta">





    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
        </div>

    </footer>

</article>

Teaser

HTML

									
										<div class="teaser teaser--main teaser--no-secondary-info">


  <header class="teaser__header">


    <h4 class="teaser__header_text">
        [Do not use this base pattern directly: see the following variants of this pattern for usage]
    </h4>


  </header>


</div>

Teaser Main For Version Of Record

Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.

HTML

									
										<div class="teaser teaser--main">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Cell biology</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Epidemiology and Global Health</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Ridiculously long name that is likely to get truncated</a></li>
    </ol>

  <header class="teaser__header">


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain</a>
    </h4>

    <div class="teaser__secondary_info">
      Akiko Terauchi, Erin M Johnson-Venkatesh ... Hisashi Umemori
    </div>

  </header>

  <div class="teaser__body">
    Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.
  </div>

  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">
          <div class="meta__status">
            <span class="meta__status-circle meta__status-circle-vor"></span>Version of Record
          </div>


          <a class="meta__type" href="#" >Research Article</a>



    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Main For Reviewed Preprint With Updated Date

Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.

HTML

									
										<div class="teaser teaser--main">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Cell biology</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Epidemiology and Global Health</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Ridiculously long name that is likely to get truncated</a></li>
    </ol>

  <header class="teaser__header">


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain</a>
    </h4>

    <div class="teaser__secondary_info">
      Akiko Terauchi, Erin M Johnson-Venkatesh ... Hisashi Umemori
    </div>

  </header>

  <div class="teaser__body">
    Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.
  </div>

  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">
          <div class="meta__status">
            <span class="meta__status-circle meta__status-circle-revised"></span>Revised
          </div>

          <div class="meta__version">Reviewed Preprint v2</div>




    <span class="date"> Updated <time datetime="2015-09-10">Sep 10, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Main Small Image

Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.

HTML

									
										<div class="teaser teaser--main">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Cell biology</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Epidemiology and Global Health</a></li>
    </ol>

  <header class="teaser__header">
      <a href="#" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--small">
            <img src="https://unsplash.it/70/70/"
                 srcset="https://unsplash.it/140/140/ 2x, https://unsplash.it/70/70/ 1x"
                 alt="Meaningful alt text here please."
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain</a>
    </h4>

    <div class="teaser__secondary_info">
      Akiko Terauchi, Erin M Johnson-Venkatesh ... Hisashi Umemori
    </div>

  </header>

  <div class="teaser__body">
    Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.
  </div>

  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Research article</a>



    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Main Big Image

Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.

HTML

									
										<div class="teaser teaser--main">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Cell biology</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Epidemiology and Global Health</a></li>
    </ol>

  <header class="teaser__header">
      <a href="#" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--big">
            <img src="https://unsplash.it/250/140/"
                 srcset="https://unsplash.it/500/280/ 2x, https://unsplash.it/250/140/ 1x"
                 alt="Meaningful alt text here please."
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Retrograde fibroblast growth factor 22 (FGF22) signaling regulates insulin-like growth factor 2 (IGF2) expression for activity-dependent synapse stabilization in the mammalian brain</a>
    </h4>

    <div class="teaser__secondary_info">
      Akiko Terauchi, Erin M Johnson-Venkatesh ... Hisashi Umemori
    </div>

  </header>

  <div class="teaser__body">
    Feedback signaling between the synapse and nucleus via FGF22 and IGF2 directs the activity-dependent stabilization of presynaptic terminals in the mouse hippocampus.
  </div>

  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Research article</a>



    <span class="date"> <time datetime="2015-09-10">Sep 10, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Secondary

HTML

									
										<div class="teaser teaser--secondary">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Biochemistry</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Neuroscience</a></li>
    </ol>

  <header class="teaser__header">


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Mapping Ebola in wild animals for better disease control</a>
    </h4>

    <div class="teaser__secondary_info">
      Sebastian Funk, Peter Piot
    </div>

  </header>


  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Insight</a>



    <span class="date"> <time datetime="2015-12-16">Dec 16, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Secondary Small Image

HTML

									
										<div class="teaser teaser--secondary">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Biochemistry</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Neuroscience</a></li>
    </ol>

  <header class="teaser__header">
      <a href="#" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--small">
            <img src="https://unsplash.it/70/70/"
                 srcset="https://unsplash.it/140/140/ 2x, https://unsplash.it/70/70/ 1x"
                 alt="Meaningful alt text here please."
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Mapping Ebola in wild animals for better disease control</a>
    </h4>

    <div class="teaser__secondary_info">
      Sebastian Funk, Peter Piot
    </div>

  </header>


  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Insight</a>



    <span class="date"> <time datetime="2015-12-16">Dec 16, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Secondary Big Image

HTML

									
										<div class="teaser teaser--secondary">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Biochemistry</a></li>
        <li class="teaser__context_label_item"><a href="#" class="teaser__context_label_link">Neuroscience</a></li>
    </ol>

  <header class="teaser__header">
      <a href="#" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--big">
            <img src="https://unsplash.it/250/140/"
                 srcset="https://unsplash.it/500/280/ 2x, https://unsplash.it/250/140/ 1x"
                 alt="Meaningful alt text here please."
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Mapping Ebola in wild animals for better disease control</a>
    </h4>

    <div class="teaser__secondary_info">
      Sebastian Funk, Peter Piot
    </div>

  </header>


  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Insight</a>



    <span class="date"> <time datetime="2015-12-16">Dec 16, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Related Item Image

HTML

									
										<div class="teaser teaser--secondary teaser--related">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item">Part of</li>
    </ol>

  <header class="teaser__header">
      <a href="#" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--small">
            <img src="https://unsplash.it/70/70/"
                 srcset="https://unsplash.it/140/140/ 2x, https://unsplash.it/70/70/ 1x"
                 alt="Meaningful alt text here please."
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Reproducibility Project: Cancer Biology</a>
    </h4>

    <div class="teaser__secondary_info">
      Edited by Roger J Davis
    </div>

  </header>


  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Collection</a>


      </div>

  </footer>
</div>

Teaser Related Item

HTML

									
										<div class="teaser teaser--secondary teaser--related">

    <ol class="teaser__context_label_list" aria-label="These research categories are for the following article">
        <li class="teaser__context_label_item">Built upon by</li>
    </ol>

  <header class="teaser__header">


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Stem cells and  fluid flow drive cyst formation in an invertebrate excretory organ</a>
    </h4>

    <div class="teaser__secondary_info">
      Hanh Thi-Kim Vu, Jochen C Rink ... Alejandro Sánchez Alvarado
    </div>

  </header>


  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Research advance</a>



    <span class="date"> <time datetime="2015-12-16">Dec 16, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Basic

HTML

									
										<div class="teaser teaser--secondary teaser--no-secondary-info">


  <header class="teaser__header">
      <a href="https://medium.com/@elife/one-hundred-elife-digests-on-medium-5a99aa5e80a1#.mne4282yx" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--small">
            <img src="../../assets/img/patterns/molecules/teaser-medium-icon-1x.png"
                 srcset="../../assets/img/patterns/molecules/teaser-medium-icon-2x.png 2x, ../../assets/img/patterns/molecules/teaser-medium-icon-1x.png 1x"
                 alt="Meaningful alt text please"
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="https://medium.com/@elife/one-hundred-elife-digests-on-medium-5a99aa5e80a1#.mne4282yx" aria-label="Descriptive and accessible label" class="teaser__header_text_link">One hundred eLife digests on Medium&hellip; (&hellip; and counting)</a>
    </h4>


  </header>


  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="https://medium.com/@elife/one-hundred-elife-digests-on-medium-5a99aa5e80a1#.mne4282yx" ></a>



    <span class="date"> <time datetime="2015-12-16">Dec 16, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Main Event

HTML

									
										<div class="teaser teaser--event">


  <header class="teaser__header">

        <a href="#"><time class="date date--expanded" datetime="2015-12-18"> <span class="date__prominent">18</span> <span class="date__normal">Dec 2015</span></time>

</a>

    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">HSFP Postdoctoral Fellowships from the Human Frontier Science Program</a>
    </h4>

    <div class="teaser__secondary_info">
      eLife
    </div>

  </header>


</div>

Teaser Secondary Event

HTML

									
										<div class="teaser teaser--event teaser--secondary">


  <header class="teaser__header">

        <a href="#"><time class="date date--expanded" datetime="2015-12-18"> <span class="date__prominent">18</span> <span class="date__normal">Dec 2015</span></time>

</a>

    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">HSFP Postdoctoral Fellowships from the Human Frontier Science Program</a>
    </h4>

    <div class="teaser__secondary_info">
      eLife
    </div>

  </header>


</div>

Teaser Grid Style Labs

Lorem ipsum dolor sit amet,consectetur adipiscing elit. Pellentesque sem enim, pretium non risus non, molestie.

HTML

									
										<div class="teaser teaser--grid-style teaser--no-secondary-info">


  <header class="teaser__header">
      <a href="#" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--prominent">
            <img src="https://unsplash.it/250/140/"
                 srcset="https://unsplash.it/500/280/ 2x, https://unsplash.it/250/140/ 1x"
                 alt="An image."
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">eLife Lens search</a>
    </h4>


  </header>

  <div class="teaser__body">
    Lorem ipsum dolor sit amet,consectetur adipiscing elit. Pellentesque sem enim, pretium non risus non, molestie.
  </div>

  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" >Experiment: 001</a>



    <span class="date"> <time datetime="2015-03-31">Mar 31, 2015</time></span>
      </div>

  </footer>
</div>

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 commodo consequat.

HTML

									
										<div class="teaser teaser--grid-style">


  <header class="teaser__header">
      <a href="#" class="teaser__picture--link" tabindex="-1">
        <picture class="teaser__picture teaser__picture--prominent">
            <img src="https://unsplash.it/250/140/"
                 srcset="https://unsplash.it/500/280/ 2x, https://unsplash.it/250/140/ 1x"
                 alt="An image."
            >
        </picture>
      </a>


    <h4 class="teaser__header_text">
        <a href="#" aria-label="Descriptive and accessible label" class="teaser__header_text_link">Multicellular life, potato blight and Hepatitis&nbsp;B</a>
    </h4>

    <div class="teaser__secondary_info">
      Episode 24
    </div>

  </header>

  <div class="teaser__body">
    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 commodo consequat.
  </div>

  <footer class="teaser__footer">

      <div data-behaviour="Meta" class="meta">


          <a class="meta__type" href="#" ></a>



    <span class="date"> <time datetime="2015-03-31">Mar 31, 2015</time></span>
      </div>

  </footer>
</div>

Teaser Main With List

The centre of the stage at eLife in 2015 was occupied by a new human ancestor 'Homo naledi' discovered by scientists in an extraordinary find in South Africa and published in eLife in two stunning papers in September. That these scientists chose to publish such ground-breaking findings in eLife is testament both to the journal's growing significance, and to the steady cultural shift towards greater transparency and collaboration in science, which lie at the heart of eLife's mission.

HTML

									
										<div class="teaser teaser--main teaser--no-secondary-info">


  <header class="teaser__header">


    <h4 class="teaser__header_text">
        The eLife Sciences 2015 Annual Report
    </h4>


  </header>

  <div class="teaser__body">
    <p>The centre of the stage at eLife in 2015 was occupied by a new human ancestor '<i>Homo naledi</i>' discovered by scientists in an extraordinary find in South Africa and published in eLife in two stunning papers in September. That these scientists chose to publish such ground-breaking findings in eLife is testament both to the journal's growing significance, and to the steady cultural shift towards greater transparency and collaboration in science, which lie at the heart of eLife's mission.</p><ul class="list list--bullet list--teaser"><li><a href="#">View report</a></li><li><a href="#">Download Pdf</a></li></ul>
  </div>

</div>