Modules

Article header

Dateline

Will show a 'LIVE' label where the content is a currently-updating liveblog.

  1. Output
  2. Source code

<p class="dateline type-11">
	 <i class="i i-date"></i> 
	 <time itemprop="datePublished" datetime='2012-12-18T17:58:00Z'
	 	data-timestamp="1355853480000">
		Tuesday 18 December 2012 17.58 GMT
	</time>
</p>

Relative dateline

Updated using JavaScript to be relative to the client's current locale. Note: The 'four hours ago'-style notation only happens within the first day of publication.

  1. Output
  2. Source code

<p class="relative-timestamp type-11 ">
	 <i class="i i-date"></i> 
	<time class="js-timestamp" itemprop="datePublished" datetime="2012-12-18T17:58:00Z" data-timestamp="1355853480000">
		
        18 Dec 2012
    </time>
</p>

Headline

This should always be an H1 for SEO purposes, so ensure this module is used sparingly and appropriately.

  1. Output
  2. Source code

Andrew Mitchell 'pleb' row: deputy chief whip passed on officer's account

<h1 itemprop="headline" class="article-headline ">Andrew Mitchell 'pleb' row: deputy chief whip passed on officer's account</h1>

Standfirst

Uses a paragraph rather than a heading as they can become quite lengthy in many cases.

  1. Output
  2. Source code

John Randall, who alerted Downing Street to witness's account, is understood to have had strained relationship with Mitchell 

<p class="article-standfirst type-7" itemprop="description" data-link-name="standfirst">
    
        John Randall, who alerted Downing Street to witness's account, is understood to have had strained relationship with Mitchell
        
    
</p>

Main Picture

Makes use of our responsive images technique – images are replaced with their 'fullsrc' version if the connection is speed is fast enough and the device width is large enough. Images can be forced to upgrade regardless of these tests by adding the 'force-upgrade' data attribute, as used here. Images will not be upgraded if the width of the 'fullsrc' image is not greater than the thumbnail width.

  1. Output
  2. Source code
Andrew Mitchell
John Randall was understood to have had a difficult relationship with Mitchell (pictured) who was appointed as his boss in the reshuffle in September. Photograph: Yui Mok/PA
<figure itemprop="associatedMedia primaryImageOfPage" itemscope itemtype="http://schema.org/ImageObject">
    <img class="maxed main-image" src="http://i.gucode.co.uk/n/sys-images/Guardian/Pix/pictures/2012/12/18/1355836527407/Andrew-Mitchell-004.jpg"
        data-force-upgrade="true"
        data-thumb-width="220"
        data-fullsrc="http://i.gucode.co.uk/n/sys-images/Guardian/Pix/pictures/2012/12/18/1355836532206/Andrew-Mitchell-008.jpg"
        data-full-width="460"
        itemprop="contentURL"
        alt="Andrew Mitchell"
        title="John Randall was understood to have had a difficult relationship with Mitchell (pictured) who was appointed as his boss in the reshuffle in September. Photograph: Yui Mok/PA" />
    
    <figcaption class="main-caption" itemprop="description">John Randall was understood to have had a difficult relationship with Mitchell (pictured) who was appointed as his boss in the reshuffle in September. Photograph: Yui Mok/PA</figcaption>
    
</figure>

Byline

Linked to the author's contributor tag page (if found).

  1. Output
  2. Source code
<p class="byline type-7" data-link-name="byline"><span itemscope="" itemtype="http://schema.org/Person" itemprop="author"><a rel="author" itemprop="url name" data-link-name="auto tag link" href="/profile/nicholaswatt">Nicholas Watt</a></span> and <span itemscope="" itemtype="http://schema.org/Person" itemprop="author"><a rel="author" itemprop="url name" data-link-name="auto tag link" href="/profile/sandralaville">Sandra Laville</a></span></p>

Quotes

Tweet

A tweet block

  1. Output
  2. Source code
— Angelique Chrisafis (@achrisafis) December 21, 2012

Baffled local builder said he kept getting filmed. "Workman walks down street, must be very exciting" #bugarach #endoftheworld 

    <blockquote class="tweet">
        <span class="tweet-user">— Angelique Chrisafis (@achrisafis)</span>
        <a href="https://twitter.com/achrisafis/status/282088154050203648" data-datetime="2012-12-21T11:40:31+00:00"
            data-link-name="in body link" class="tweet-date">December 21, 2012</a>
        <p class="tweet-body">Baffled local builder said he kept getting filmed. "Workman walks down street, must be very exciting"
            <a href="https://twitter.com/search/%23bugarach" data-link-name="in body link">#bugarach</a>
            <a href="https://twitter.com/search/%23endoftheworld" data-link-name="in body link">#endoftheworld</a>
        </p>
    </blockquote>

Quote

A quote.

N.B. This currently relies on a parent HTML class of .block

  1. Output
  2. Source code

In all the excitement over the discovery of a Higgs-like particle at Cern this year, physicists at the lab were probably not thinking about the end of the world. But the Standard Model of particle physics – of which the Higgs boson is part and which describes fundamental particles and forces of nature – hides a terrifying secret: a theoretical composite particle that is so stable it can transform any other particle of matter into a copy of itself.

    <blockquote >
        <p>In all the excitement over the discovery of a <a href="/science/2012/jul/04/higgs-boson-cern-scientists-discover" data-link-name="in body link">Higgs-like particle</a> at Cern this year, physicists at the lab were probably not thinking about the end of the world. But the Standard Model of particle physics – of which the Higgs boson is part and which describes fundamental particles and forces of nature – hides a terrifying secret: a theoretical composite particle that is so stable it can transform any other particle of matter into a copy of itself.</p>
    </blockquote>

Pull quote

A pull quote

N.B. This currently relies on a parent HTML class of .from-content-api

  1. Output
  2. Source code

In all the excitement over the discovery of a Higgs-like particle at Cern this year, physicists at the lab were probably not thinking about the end of the world. But the Standard Model of particle physics – of which the Higgs boson is part and which describes fundamental particles and forces of nature – hides a terrifying secret: a theoretical composite particle that is so stable it can transform any other particle of matter into a copy of itself.

    <blockquote class="quoted">
        <p>In all the excitement over the discovery of a <a href="/science/2012/jul/04/higgs-boson-cern-scientists-discover" data-link-name="in body link">Higgs-like particle</a> at Cern this year, physicists at the lab were probably not thinking about the end of the world. But the Standard Model of particle physics – of which the Higgs boson is part and which describes fundamental particles and forces of nature – hides a terrifying secret: a theoretical composite particle that is so stable it can transform any other particle of matter into a copy of itself.</p>
    </blockquote>

Trailblocks

Trail: featured

Generally used for a large trail as seen on network/section fronts.

  1. Output
  2. Source code

Trail: thumbnail

Typically displayed in threes when showing multiple trails.

  1. Output
  2. Source code
<ul class="unstyled">
    
        <li class="trail t1  has-image " data-link-name="trail">
             



<p class="relative-timestamp type-11  front-timestamp">
	 <i class="i i-date"></i> 
	<time class="js-timestamp" itemprop="datePublished" datetime="2012-12-19T15:25:11Z" data-timestamp="1355930711000">
		
        19 Dec 2012
    </time>
</p>
<div class="media">
    
        
            <a href="/politics/video/2012/dec/19/andrew-mitchell-cctv-plebgate-incident-video" class="media-img" data-link-name="1 | image">
                <img class="maxed" src="http://i.gucode.co.uk/n/sys-images/Guardian/Pix/audio/video/2012/12/19/1355929914604/Andrew-Mitchell-on-plebga-009.jpg"
                    data-thumb-width="140"
                    
                        data-fullsrc="http://cdn.theguardian.tv/brightcove/poster/2012/12/19/121219MitchellCCTV_7046113.jpg"
                        data-full-width="480"
                        alt="" 
                        title=""
                    
                    itemprop="contentURL"
                />
            </a>
        
    

    <h2 class="media-body trail-headline type-5">
        <a href="/politics/video/2012/dec/19/andrew-mitchell-cctv-plebgate-incident-video"  data-link-name="1 | text">
            Andrew Mitchell insists CCTV clears him over 'plebgate' incident - video
        </a>
    </h2>

     <div class="trail-text">The former Tory chief whip, Andrew Mitchell, says CCTV footage of the 'plebgate' incident clearly shows that the allegations against him are completely untrue</div> 
</div>
 
        </li>
    
</ul>

Trail: headline

Usually used to show underneath three 'trail: thumbnail' trails.

  1. Output
  2. Source code
<ul class="unstyled">
    
        <li class="trail t1  has-image " data-link-name="trail">
             



<p class="relative-timestamp type-11  front-timestamp">
	 <i class="i i-date"></i> 
	<time class="js-timestamp" itemprop="datePublished" datetime="2012-12-19T15:25:11Z" data-timestamp="1355930711000">
		
        19 Dec 2012
    </time>
</p>

<h2 class="trail-headline type-5">
    <a href="/politics/video/2012/dec/19/andrew-mitchell-cctv-plebgate-incident-video"  data-link-name="1 | text">
        Andrew Mitchell insists CCTV clears him over 'plebgate' incident - video
    </a>
</h2> 
        </li>
    
</ul>

Headers

Section head

Usually used as page head on section & tag pages.

  1. Output
  2. Source code

Life & Style

<h1 class="section-head zone-color ">Life & Style</h1>

Front section head

Usually used as section head on network front

  1. Output
  2. Source code
<div class="sub-section-head">
    <h1>
       <a class="zone-color" data-link-name="section heading" href="/lifeandstyle">
         Life &amp; Style
        </a>
    </h1>
    
        <button class="js-visible js-toggle-trailblock toggle-trailblock js-trigger-lifeandstyle"
            data-zone-name="uk"
            data-block-name="lifeandstyle"
            data-link-name="Hide">Hide</button>
    
</div>