comment.html

Guardian staff

14 December 2012 2:26 PM

This comment has been chosen by Guardian staff because it contributes to the debate

Post-ironic PBR forage twee quinoa actually. Lomo flexitarian neutra, Austin food truck YOLO stumptown. Kogi bushwick art party, etsy readymade ennui biodiesel ugh ethical vinyl. Selvage 8-bit disrupt, freegan trust fund cardigan wolf. Readymade mixtape cred synth. PBR williamsburg synth, actually locavore marfa 8-bit meh pug Austin. Mumblecore lomo ethical mlkshk, seitan trust fund YOLO four loko semiotics 3 wolf moon chambray williamsburg mustache terry richardson.

<span class="d2-badge d2-badge-staff d2-hidetext" title="Guardian staff" itemprop="jobTitle">Guardian staff</span>
            </div>
  <div class="d2-right-col">
    <div itemscope itemprop="author" itemtype="http://schema.org/Person">
      <a class="d2-username" href="http://www.guardian.co.uk/discussion/user/id/10000006" title="View bacondude’s profile" itemprop="url">
        <span itemprop="givenName">bacondude</span>
      </a>
    </div>
    <div class="d2-permalink">
      <a class="d2-datetime" href="http://discussion.guardian.co.uk/comment-permalink/10480" title="Link to this comment" itemprop="datePublished">14 December 2012 2:26 PM</a>
    </div>

<div class="d2-pick d2-hidetext" title="This comment has been chosen by Guardian staff because it contributes to the debate">This comment has been chosen by Guardian staff because it contributes to the debate</div>
        <div class="d2-body" itemprop="text"><p>Post-ironic PBR forage twee quinoa actually. Lomo flexitarian neutra, Austin food truck YOLO stumptown. Kogi bushwick art party, etsy readymade ennui biodiesel ugh ethical vinyl. Selvage 8-bit disrupt, freegan trust fund cardigan wolf. Readymade mixtape cred synth. PBR williamsburg synth, actually locavore marfa 8-bit meh pug Austin. Mumblecore lomo ethical mlkshk, seitan trust fund YOLO four loko semiotics 3 wolf moon chambray williamsburg mustache terry richardson.</p></div>
  </div>
</div>

cookie-noticebar.html

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies. Find out more here

Hide

factbox.html

Factbox title

Factbox text goes here. Factbox text goes here.

Factbox link

footer.html

form.html

Form title

Text Input

Note about this field

Password

Note about this field

Web Address with a long label

Note about this field

Email Address

Long long long note about this field

Search

Note about this field

Textarea

Note about this field

Single Checkbox

Label

I'd like to be kept up to date with offers and developments from Guardian News and Media Ltd.

Select

Note about this field

Checkbox

Choice A Choice B Choice C

Radio

Option 1 Option 2

Cancel

<form class="form" action="#">
                    <h5 class="h3 zone-border h-backed">Form title</h2>
                        <fieldset>
                            <div class="field">
                                <label class="field-label" for="texti">Text Input</label>
                                <div class="field-inputs">
                                    <input id="texti" type="text"/>
                                    <div class="inline-message error">Note about this field</div>
                                </div>
                            </div>
                            <div class="field">
                                <label class="field-label" for="password">Password</label>
                                <div class="field-inputs">
                                    <input id="password" type="password"/>
                                    <em class="inline-message error">Note about this field</em>
                                </div>
                            </div>
                            <div class="field">
                                <label class="field-label" for="web-address">Web Address with a long label</label>
                                <div class="field-inputs">
                                    <input id="web-address" type="url"/>
                                    <em class="inline-message error">Note about this field</em>
                                </div>
                            </div>
                            <div class="field">
                                <label class="field-label" for="email">Email Address</label>
                                <div class="field-inputs">
                                    <input id="email" type="email"/>
                                    <em class="inline-message error">Long long long note about this field</em>
                                </div>
                            </div>
                            <div class="field">
                                <label class="field-label" for="search">Search</label>
                                <div class="field-inputs">
                                    <input id="search" type="search"/>
                                    <em class="inline-message error">Note about this field</em>
                                </div>
                            </div>
                            <div class="field">
                                <label class="field-label" for="textarea">Textarea</label>
                                <div class="field-inputs">
                                    <textarea id="textarea" rows="8" cols="48"></textarea>
                                    <em class="inline-message error">Note about this field</em>
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-label" for="checkbox">Single Checkbox</div>
                                <div class="field-inputs">
                                    <label for="checkbox" class="check"><input id="checkbox" type="checkbox" /> Label</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-label" for="checkbox">&nbsp;</div>
                                <div class="field-inputs">
                                    <label for="checkbox2" class="check"><input id="checkbox2" type="checkbox" /> I'd like to be kept up to date with offers and developments from Guardian News and Media Ltd.</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-inputs">
                                    <input type="button" value="Preview" />
                                </div>
                            </div>
                            <div class="field">
                                <label class="field-label" for="select">Select</label>
                                <div class="field-inputs">
                                    <select id="select">
                                        <optgroup label="Option Group">
                                            <option>Option One</option>
                                            <option>Option Two</option>
                                            <option>Option Three</option>
                                        </optgroup>
                                    </select>
                                    <em class="inline-message error">Note about this field</em>
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-label">Checkbox</div>
                                <div class="field-inputs">
                                    <label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox" checked="checked" /> Choice A</label>
                                    <label for="checkbox4" class="check"><input id="checkbox4" name="checkbox" type="checkbox" /> Choice B</label>
                                    <label for="checkbox5" class="check"><input id="checkbox5" name="checkbox" type="checkbox" /> Choice C</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-label">Radio</div>
                                <div class="field-inputs">
                                    <label for="radio1" class="radio"><input id="radio1" name="radio" type="radio" checked="checked" /> Option 1</label>
                                    <label for="radio2" class="radio"><input id="radio2" name="radio" type="radio" /> Option 2</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-inputs">
                                    <input type="submit" class="button" value="Post Comment" />
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-inputs">
                                    <button type="submit" class="button">Button</button>
                                </div>
                            </div>
                            <div class="field">
                                <div class="field-inputs">
                                    <a href="#" class="button">Cancel</a>
                                </div>
                            </div>
                        </fieldset>
                    </form>

nav-sections.html

<nav>
	<ul class="nav-sections" role="navigation">
		<li class="zone-news"><a href="/" class="zone-color zone-background-hover">News</a></li>
		<li class="zone-sport"><a href="/" class="zone-color zone-background-hover">Sport</a></li>
		<li class="zone-comment"><a href="/" class="zone-color zone-background-hover">Comment</a></li>
		<li class="zone-culture"><a href="/" class="zone-color zone-background-hover">Culture</a></li>
		<li class="zone-business"><a href="/" class="zone-color zone-background-hover">Business</a></li>
		<li class="zone-money"><a href="/" class="zone-color zone-background-hover">Money</a></li>
		<li class="zone-sport"><a href="/" class="zone-color zone-background-hover">London 2012</a></li>
		<li class="zone-lifeandstyle"><a href="/" class="zone-color zone-background-hover">Life &#38; style</a></li>
		<li class="zone-travel"><a href="/" class="zone-color zone-background-hover">Travel</a></li>
		<li class="zone-environment"><a href="/" class="zone-color zone-background-hover">Environment</a></li>
		<li><a href="/">Video</a></li>
		<li><a href="/">Apps</a></li>
		<li><a href="/">Offers</a></li>
		<li><a href="/">Jobs</a></li>
	</ul>
</nav>

nav-tags.html

<nav>
	<ul class="nav-tags zone-" role="navigation">
		<li><a href="/" class="zone-color zone-background">News</a></li>
		<li><a href="/" class="zone-color zone-background-hover">UK</a></li>
		<li><a href="/" class="zone-color zone-background-hover">World</a></li>
		<li><a href="/" class="zone-color zone-background-hover">Development</a></li>
		<li><a href="/" class="zone-color zone-background-hover">US</a></li>
		<li><a href="/" class="zone-color zone-background-hover">Politics</a></li>
		<li><a href="/" class="zone-color zone-background-hover">Media</a></li>
		<li><a href="/" class="zone-color zone-background-hover">Education</a></li>
		<li><a href="/" class="zone-color zone-background-hover">Society</a></li>
		<li><a href="/" class="zone-color zone-background-hover">Science</a></li>
        <li><a href="/" class="zone-color zone-background-hover">Tech</a></li>
        <li><a href="/" class="zone-color zone-background-hover">Law</a></li>
        <li><a href="/" class="zone-color zone-background-hover">Data</a></li>
        <li><a href="/" class="zone-color zone-background-hover">TV</a></li>
        <li><a href="/" class="zone-color zone-background-hover">Football</a></li>
        <li><a href="/" class="zone-color zone-background-hover">Observer</a></li>	
	</ul>
</nav>

section-pulldown.html

Go to:

<div class="section-pulldown">
	<form method="post" action="http://www.guardian.co.uk/redirect/1,,,00.html" target="_TOP">
	<fieldset>
		<label for="go-to">Go to: </label>
		<select id="go-to" name="Url">
			<option value="/Guardian/0,,,00.html?gusrc=gpd">guardian.co.uk home</option>
			<option value="/Guardian/uklatest?gusrc=gpd">UK news</option>
			<option value="/Guardian/worldlatest?gusrc=gpd">World news</option>
			<option value="http://commentisfree.guardian.co.uk?gusrc=gpd">Comment is free blog</option>
			<option value="http://blogs.guardian.co.uk/news?gusrc=gpd">Newsblog</option>
			<option value="http://blogs.guardian.co.uk/sport?gusrc=gpd">Sport blog</option>
			<option value="http://blogs.guardian.co.uk/arts?gusrc=gpd">Arts &amp; entertainment blog</option>
			<option value="/Guardian/podcasts/0,,,00.html?gusrc=gpd">Podcasts</option>
			<option value="/Guardian/inpictures/0,,,00.html?gusrc=gpd">In pictures</option>
			<option value="/video">Video</option>
			<option value="">----------------------</option>
			<option value="/Guardian/Archive/0,,,00.html?gusrc=gpd">Archive search</option>
			<option value="/Arts/0,,,00.html?gusrc=gpd">Arts &amp; entertainment</option>
			<option value="/Books/0,,,00.html?gusrc=gpd">Books</option>
			<option value="/Business/0,,,00.html?gusrc=gpd">Business</option>
			<option value="/Education/0,,,00.html?gusrc=gpd">EducationGuardian.co.uk</option>
			<option value="/Environment?gusrc=gpd">Environment</option>
			<option value="/Film/0,,,00.html?gusrc=gpd">Film</option>
			<option value="/Football/0,,,00.html?gusrc=gpd">Football</option>
			<option value="http://www.guardianjobswebtest.madgex.co.uk/?gusrc=gpd">Jobs</option>
			<option value="/katine">Katine appeal</option>
			<option value="http://lifeandhealth.guardian.co.uk?gusrc=gpd">Life &amp; style</option>
			<option value="/Media/0,,,00.html?gusrc=gpd">MediaGuardian.co.uk</option>
			<option value="/Money/0,,,00.html?gusrc=gpd">Money</option>
			<option value="/Music/0,,,00.html?gusrc=gpd">Music</option>
			<option value="/Observer?gusrc=gpd">The Observer</option>
			<option value="/Politics?gusrc=gpd">Politics</option>
			<option value="/Guardian/science?gusrc=gpd">Science</option>
			<option value="/Shopping/0,,,00.html?gusrc=gpd">Shopping</option>
			<option value="/Society/0,,,00.html?gusrc=gpd">SocietyGuardian.co.uk</option>
			<option value="/Sport/0,,,00.html?gusrc=gpd">Sport</option>
			<option value="/Guardian/index/talk/0,,,00.html?gusrc=gpd">Talk</option>
			<option value="/Guardian/technology?gusrc=gpd">Technology</option>
			<option value="/Guardian/travel?gusrc=gpd">Travel</option>
			<option value="http://www.ivebeenthere.co.uk?gusrc=gpd">Been there</option>
			<option value="">----------------------</option>
			<option value="/Guardian/audio/0,,,00.html?gusrc=gpd">Audio</option>
			<option value="/Guardian/index/services/0,,,00.html?gusrc=gpd">Email services</option>
			<option value="/Guardian/Documentaries/0,,,00.html?gusrc=gpd">Special reports</option>
			<option value="/Guardian/guardian?gusrc=gpd">The Guardian</option>
			<option value="/Guardian/northerner/0,,,00.html?gusrc=gpd">The northerner</option>
			<option value="/Guardian/thewrap/0,,,00.html?gusrc=gpd">The wrap</option>
			<option value="">----------------------</option>
			<option value="http://adinfo-guardian.co.uk?gusrc=gpd">Advertising guide</option>
			<option value="http://www.ogenterprises.co.uk/?gusrc=gpd">Compare finance products</option>
			<option value="/Guardian/crossword/0,,,00.html?gusrc=gpd">Crossword</option>
			<option value="/Guardian/eventsandoffers/0,,,00.html?gusrc=gpd">Events / offers</option>
			<option value="/Guardian/feedback/0,,,00.html?gusrc=gpd">Feedback</option>
			<option value="http://www.guardiangardencentre.co.uk?gusrc=gpd">Garden centre</option>
			<option value="/Guardian/pressoffice/0,,,00.html?gusrc=gpd">GNM press office</option>
			<option value="/Guardian/graduate/0,,,00.html?gusrc=gpd">Graduate</option>
			<option value="http://www.guardianbookshop.co.uk/BerteShopWeb/home.do?gusrc=gpd">Guardian Bookshop</option>
			<option value="http://www.guardianecostore.co.uk/guardian/default.aspx?gusrc=gpd">GuardianEcostore</option>
			<option value="/Guardian/guardianfilms/0,,,00.html?gusrc=gpd">GuardianFilms</option>
			<option value="/Guardian/headlineservice/0,,,00.html?gusrc=gpd">Headline service</option>
			<option value="/Guardian/gu_contacts/0,,180767,00.html?gusrc=gpd">Help / contacts</option>
			<option value="/Guardian/information/0,,,00.html?gusrc=gpd">Information</option>
			<option value="/Guardian/values/0,,,00.html?gusrc=gpd">Living our values</option>
			<option value="/Guardian/newsroom/0,,,00.html?gusrc=gpd">Newsroom</option>
			<option value="/Guardian/notesandqueries/0,,,00.html?gusrc=gpd">Notes &amp; Queries</option>
			<option value="http://www.guardianoffers.co.uk/mall/departmentpage.cfm/Guardian?gusrc=gpd">Reader Offers</option>
			<option value="http://www.guardian.co.uk/readerseditor">Readers' editor</option>
			<option value="http://dating.guardian.co.uk/s/?gusrc=gpd">Soulmates dating</option>
			<option value="/Guardian/styleguide/0,,,00.html?gusrc=gpd">Style guide</option>
			<option value="/Guardian/syndication/0,,,00.html?gusrc=gpd">Syndication services</option>
			<option value="/Guardian/travel/readeroffers?gusrc=gpd">Travel offers</option>
			<option value="/Guardian/TV/0,,,00.html?gusrc=gpd">TV listings</option>
			<option value="/Guardian/weather?gusrc=gpd">Weather</option>
			<option value="/Guardian/index/webguides/0,,,00.html?gusrc=gpd">Web guides</option>
			<option value="http://www.careersatgnl.co.uk?gusrc=gpd">Working for us</option>
			<option value="">----------------------</option>
			<option value="http://www.guardianabroad.co.uk?gusrc=gpd">Guardian Abroad</option>
			<option value="/Guardian/guardianweekly/0,,,00.html?gusrc=gpd">Guardian Weekly</option>
			<option value="http://www.moneyobserver.com?gusrc=gpd">Money Observer</option>
			<option value="/Guardian/public/0,,,00.html?gusrc=gpd">Public</option>
			<option value="http://www.learn.co.uk?gusrc=gpd">Learn</option>
			<option value="http://www.guardian.backissuenewspapers.co.uk?gusrc=gpd">Guardian back issues</option>
			<option value="http://www.observer.backissuenewspapers.co.uk?gusrc=gpd">Observer back issues</option>
			<option value="http://guardianprofessional.co.uk?gusrc=gpd">Guardian Professional</option>
		</select> 
		
		<input type="submit" value="Go" />
		</fieldset>
	</form>
</div>

site-search.html

topbar.html

<div class="topbar">
	<div class="topbar-menu-container">
		<h2 class="h">Menu heading</h2>
		<ul class="topbar-menu pull-left">
			<li class="dropdown-holder">
				<a href="#menu1">Menu item: <span>current</span></a>
				<ul id="menu1" class="dropdown align-right">
					<li><a href="#">Menu item</a></li>
				</ul>
			</li>
			<li><a href="#">Menu item</a></li>
			<li><a href="#">Menu item</a></li>
			<li class="dropdown-holder">
				<a href="#menu2">Menu item</a>
				<ul id="menu2" class="dropdown">
					<li><a href="#">Menu item</a></li>
					<li><a href="#">Menu item with longer text</a></li>
				</ul>
			</li>
		</ul>
		
		<h2 class="h">Menu heading</h2>
		<ul class="topbar-menu pull-right">
			<li class="dropdown-holder">
				<a href="#menu3">Menu item</a>
				<ul id="menu3" class="dropdown align-right">
					<li><a href="#">Menu item with longer text</a></li>
					<li><a href="#">Menu item</a></li>
				</ul>
			</li>
			<li class="dropdown-holder">
				<a href="#menu4">Menu item</a>
				<ul id="menu4" class="dropdown align-right">
					<li><a href="#">Menu item</a></li>
					<li><a href="#">Menu item with longer text</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

tweet.html

The guardian has shifted domains this morning. Here's how and why. http://t.co/BOCYW7Jp78
— alan rusbridger (@arusbridger) July 30, 2013

witness.html

A text contribution

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 nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

KFC — An image contribution

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 nisi ut aliquip ex ea commodo consequat.

A video contribution

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 nisi.

Ut aliquip ex ea commodo consequat.

<div>
  <figure class="element element-witness element-witness-text" itemscope itemtype="http://schema.org/WebPageElement">
    <div class="element-witness--main">
      <h3 class="element-witness--title" itemprop="name"><a href="#" itemprop="url">A text contribution</a></h3>
      <div itemprop="text">
        <p>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 nisi ut aliquip ex ea commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <footer class="element-witness--footer">
      <p class="element-witness--source">Sent via <a href="#" class="element-witness--brand" itemprop="provider">GuardianWitness</a></p>
      <div class="element-witness--metadata">
        <p class="element-witness--author" itemprop="author" itemscope itemtype="http://schema.org/Person">
          By <a href="#" class="element-witness--author-name" itemprop="name">dafitness</a>
        </p>
        <p class="element-witness--date">
          <time itemprop="dateCreated" datetime="2013-01-04T17:49:01+1000">4 January 2013, 17:49</time>
        </p>
      </div>
    </footer>
  </figure>

<figure class="element element-witness element-witness-image" itemscope itemtype="http://schema.org/ImageObject">
    <div class="element-witness--main">
      <a href="#" itemprop="url"><img src="http://n0tice-static.s3.amazonaws.com/images/reports/microblogs/mediumlandscapedouble/cc0aa1b805fcd1d16cef545b05ec1502.jpg" alt="KFC" itemprop="contentURL"/></a>
      <figcaption>
        <h3 class="element-witness--title" itemprop="name"><a href="#" itemprop="url">An image contribution</a></h3>
        <div itemprop="description">
          <p>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 nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </figcaption>
    </div>
    <footer class="element-witness--footer">
      <p class="element-witness--source">Sent via <a href="#" class="element-witness--brand" itemprop="provider">GuardianWitness</a></p>
      <div class="element-witness--metadata">
        <p class="element-witness--author" itemprop="author" itemscope itemtype="http://schema.org/Person">
          By
          <a href="#" class="element-witness--author-name" itemprop="name">dafitness</a>
        </p>
        <p class="element-witness--date">
          <time itemprop="dateCreated" datetime="2013-01-04T17:49:01+1000">4 January 2013, 17:49</time>
        </p>
      </div>
    </footer>
  </figure>

<figure class="element element-witness element-witness-video" itemscope itemtype="http://schema.org/VideoObject">
    <div class="element-witness--main">
      <iframe width="460" height="259" src="http://www.youtube.com/embed/1MN8MAsbr9w?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen=""></iframe>
      <figcaption>
        <h3 class="element-witness--title" itemprop="name"><a href="#" itemprop="url">A video contribution</a></h3>
        <div itemprop="description">
          <p>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 nisi.</p>
          <p>Ut aliquip ex ea commodo consequat.</p>
        </div>
      </figcaption>
    </div>
    <footer class="element-witness--footer">
      <p class="element-witness--source">Sent via <a href="#" class="element-witness--brand" itemprop="provider">GuardianWitness</a></p>
      <div class="element-witness--metadata">
        <p class="element-witness--author" itemprop="author" itemscope itemtype="http://schema.org/Person">
          By
          <a href="#" class="element-witness--author-name" itemprop="name">dafitness</a>
        </p>
        <p class="element-witness--date">
          <time itemprop="dateCreated" datetime="2013-01-04T17:49:01+1000">4 January 2013, 17:49</time>
        </p>
      </div>
    </footer>
  </figure>
</div>

Pasteup Module Library

comment.html

cookie-noticebar.html

factbox.html

Factbox title

footer.html

form.html

Form title

nav-sections.html

nav-tags.html

section-pulldown.html

site-search.html

topbar.html

Menu heading

Menu heading

tweet.html

witness.html

A text contribution

An image contribution

A video contribution