6 #permalink Components

Designed components, chunks of UI

<div id="tix-attendees">
  <ul class="tix-attendee-list tix-columns-3">
    <li>
      <img alt="" src="http://lorempixel.com/96/96/people/1/" class="avatar avatar-96 photo" height="96" width="96">
      <div class="tix-field tix-attendee-name">
        <span class="tix-first">Michelle</span>
        <span class="tix-last">Gutierrez</span>
      </div>
      <a class="tix-field tix-attendee-twitter" href="#">@MichelleGutierrez</a><a class="tix-field tix-attendee-url" href="#">m-gutierrez.dev</a>
    </li>
    <li>
      <img alt="" src="http://lorempixel.com/96/96/people/9/" class="avatar avatar-96 photo" height="96" width="96">
      <div class="tix-field tix-attendee-name">
        <span class="tix-first">Sara</span>
        <span class="tix-last">Mason</span>
      </div>
      <a class="tix-field tix-attendee-twitter" href="#">@saram</a><a class="tix-field tix-attendee-url" href="#">hellofromtheotherside.dev</a>
    </li>
    <li>
      <img alt="" src="http://lorempixel.com/96/96/people/10/" class="avatar avatar-96 photo" height="96" width="96">
      <div class="tix-field tix-attendee-name">
        <span class="tix-first">Willie</span>
        <span class="tix-last">Castro</span>
      </div>
      <a class="tix-field tix-attendee-twitter" href="#">@castroisawesome</a><a class="tix-field tix-attendee-url" href="#">castro-home.dev</a>
    </li>
    <li>
      <img alt="" src="http://lorempixel.com/96/96/people/5/" class="avatar avatar-96 photo" height="96" width="96">
      <div class="tix-field tix-attendee-name">
        <span class="tix-first">Eric</span>
        <span class="tix-last">Williamson</span>
      </div>
      <a class="tix-field tix-attendee-twitter" href="#">@willeric</a><a class="tix-field tix-attendee-url" href="#">willeric.dev</a>
    </li>
  </ul>
</div>

6.2 #6.branding Site branding

Site logo, title and description.

Example
<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <p class="site-title"><a href="#" rel="home">WordCamp Name</a></p>
    <p class="site-description">City, Country – Month, Date, Year.</p>
  </div><!-- .site-branding -->
  <!-- #site-navigation -->
</header><!-- #masthead -->

6.3 #6.buttons Buttons

Button variations and usage examples.

Examples
Default styling
:hover
Hover state
:focus
Focus state
.button--primary
Primary button example
.button--primary:hover
Primary button hover example
.button--primary:focus
Primary button focus example
.button--secondary
Secondary button example
.button--secondary:hover
Secondary button hover example
.button--secondary:focus
Secondary button focus example
.button--invert
Invert button example
.button--invert:hover
Invert button hover example
.button--invert:focus
Invert button focus example
.button--inactive
Inactive button example
<a class="button [modifier class]" href="#">Button</a>
<input class="[modifier class]" type="button" value="Input Button">
<input class="[modifier class]" type="submit" value="Input Submit">
Example

5 thoughts on “First photos from #WCEU

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia labore accusamus sunt porro expedita veritatis enim cumque doloremque voluptatibus sapiente molestias, ea dolores laborum culpa repudiandae fugiat. Tenetur eligendi quas similique molestias eos repellat reprehenderit, vitae consequatur, earum iste placeat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, suscipit.

  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque omnis inventore magni, alias repudiandae nam quisquam et repellat, temporibus saepe doloremque amet? Aut architecto atque porro illum magnam accusantium sint nesciunt quisquam praesentium expedita, libero deserunt in nobis nihil facilis?

  3. Pingback: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Leave a Reply

Logged in as Eric Williamson. Log out?

<h2 class="comments-title">5 thoughts on “<span>First photos from #WCEU</span>”</h2>
<ol class="comment-list">
  <li class="comment byuser comment-author-name even thread-even depth-1" id="li-comment-2952">
    <article id="div-comment-2952" class="comment-body">
      <footer>
        <div class="comment-author vcard">
          <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/1/" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="http://lorempixel.com/96/96/people/1/" scale="2">
          <b class="fn"><a href="http://www.Rarst.net" rel="external nofollow" class="url">Michelle Gutierrez</a></b> <span class="says">says:</span>
        </div><!-- .comment-author -->
        <div class="comment-metadata">
          <a href="#"><time pubdate="" datetime="2016-06-29T13:03:40+00:00">June 29, 2016 at 13:03</time></a>
        </div><!-- .comment-metadata -->
      </footer><!-- .comment-meta -->
      <div class="comment-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Dolores quos atque reprehenderit</a> quibusdam soluta quo sunt doloribus laudantium nobis, cupiditate possimus amet, accusamus eius, aut ea cum officia ad adipisci?</p>
      </div><!-- .comment-content -->
      <div class="reply">
        <a rel="nofollow" class="comment-reply-link" href="#">Reply</a>
      </div><!-- .reply -->
    </article><!-- .comment-body -->
  </li><!-- #comment-## -->
  <li class="comment byuser comment-author-name odd alt thread-odd thread-alt depth-1" id="li-comment-2953">
    <article id="div-comment-2953" class="comment-body">
      <footer>
        <div class="comment-author vcard">
          <img alt="" src="http://lorempixel.com/96/96/people/9/" srcset="http://lorempixel.com/96/96/people/9/" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="http://lorempixel.com/96/96/people/9/" scale="2">
          <b class="fn"><a href="#" rel="external nofollow" class="url">Sara Mason</a></b> <span class="says">says:</span>
        </div><!-- .comment-author -->
        <div class="comment-metadata">
          <a href="#"><time pubdate="" datetime="2016-06-29T13:28:18+00:00">June 29, 2016 at 13:28</time></a>
        </div><!-- .comment-metadata -->
      </footer><!-- .comment-meta -->
      <div class="comment-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia labore accusamus sunt porro expedita veritatis enim cumque doloremque voluptatibus sapiente molestias, ea dolores laborum culpa repudiandae fugiat. Tenetur eligendi quas similique molestias eos repellat reprehenderit, vitae consequatur, earum iste placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, suscipit.</p>
      </div><!-- .comment-content -->
      <div class="reply">
        <a rel="nofollow" class="comment-reply-link" href="#" aria-label="Reply to Sara Mason">Reply</a>
        </div><!-- .reply -->
    </article><!-- .comment-body -->
  </li><!-- #comment-## -->
  <li class="comment even thread-even depth-1" id="li-comment-2956">
    <article id="div-comment-2956" class="comment-body">
      <footer class="comment-meta">
        <div class="comment-author vcard">
          <img alt="" src="http://lorempixel.com/96/96/people/10/" srcset="http://lorempixel.com/96/96/people/10/" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="http://lorempixel.com/96/96/people/10/" scale="2">
          <b class="fn"><a href="#" rel="external nofollow" class="url">Willie Castro</a></b> <span class="says">says:</span>        </div><!-- .comment-author -->
        <div class="comment-metadata">
          <a href="#"><time pubdate="" datetime="2016-06-29T14:51:15+00:00">June 29, 2016 at 14:51</time></a>
        </div><!-- .comment-metadata -->
      </footer><!-- .comment-meta -->
      <div class="comment-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere sit soluta eaque, beatae excepturi ab nulla repellendus nesciunt culpa rerum suscipit animi amet natus inventore iste nemo provident voluptatem <a href="#">non iure doloremque doloribus</a> vel ad unde! Iste beatae, aliquam recusandae.</p>
      </div><!-- .comment-content -->
      <div class="reply">
        <a rel="nofollow" class="comment-reply-link" href="#" aria-label="Reply to Willie Castro">Reply</a>
      </div><!-- .reply -->
    </article><!-- .comment-body -->
  </li><!-- #comment-## -->
  <li id="comment-93" class="pingback even thread-even depth-1">
    <div class="comment-body">
      Pingback:
      <a href='#' rel='external nofollow' class='url'>Lorem ipsum dolor sit amet, consectetur adipisicing.</a>
      <span class="edit-link"><a class="comment-edit-link" href="#">Edit</a></span>
    </div>
  </li><!-- #comment-## -->
  <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2957">
    <article id="div-comment-2957" class="comment-body">
      <footer class="comment-meta">
        <div class="comment-author vcard">
          <img alt="" src="https://secure.gravatar.com/avatar/0e5b7c3ba4098e8e6de2c3b3faf2562c?s=100&amp;d=mm&amp;r=g" srcset="https://secure.gravatar.com/avatar/0e5b7c3ba4098e8e6de2c3b3faf2562c?s=80&amp;d=mm&amp;r=g 2x" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="https://secure.gravatar.com/avatar/0e5b7c3ba4098e8e6de2c3b3faf2562c?s=40&amp;d=mm&amp;r=g" scale="2">
          <b class="fn"><a href="#" rel="external nofollow" class="url">Eric Williamson</a></b> <span class="says">says:</span>        </div><!-- .comment-author -->
        <div class="comment-metadata">
          <a href="#"><time pubdate="" datetime="2016-06-29T16:07:57+00:00">June 29, 2016 at 16:07</time></a>
        </div><!-- .comment-metadata -->
      </footer><!-- .comment-meta -->
      <div class="comment-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque omnis inventore magni, alias repudiandae nam quisquam et repellat, temporibus saepe doloremque amet? Aut architecto atque porro illum magnam accusantium sint nesciunt quisquam praesentium expedita, libero deserunt in nobis nihil facilis?</p>
      </<!-- .comment-content -->
      <div class="reply">
        <a rel="nofollow" class="comment-reply-link" href="#" aria-label="Reply to Eric Williamson">Reply</a>
      </div><!-- .reply -->
    </article><!-- .comment-body -->
  </li><!-- #comment-## -->
  <li class="post pingback">
    <p>Pingback: <a href="#" rel="external nofollow" class="url">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></p>
  </li><!-- #comment-## -->
</ol>
<div id="respond" class="comment-respond">
  <h3 id="reply-title" class="comment-reply-title">Leave a Reply
    <small>
      <a rel="nofollow" id="cancel-comment-reply-link" href="#respond" style="display:none;">Cancel reply</a>
    </small>
  </h3>
  <form action="#" method="post" id="commentform" class="comment-form" novalidate>
    <p class="logged-in-as">
      <a href="#" aria-label="Logged in as Eric Williamson. Edit your profile.">Logged in as Eric Williamson</a>.
      <a href="#">Log out?</a>
    </p>
    <p class="comment-form-comment"><label for="comment">Comment</label>
      <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea>
    </p>
    <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" />
      <input type='hidden' name='comment_post_ID' value='15843' id='comment_post_ID' />
      <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
    </p>
    <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment_disabled" value="7ad16ed655" />
    <script>(function () {
      if ( window === window.parent ) {
        document.getElementById( '_wp_unfiltered_html_comment_disabled' ).name = '_wp_unfiltered_html_comment';
      }
    })();</script>
    <p class="comment-subscription-form">
      <input type="checkbox" name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" />
      <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">Notify me of follow-up comments by email.</label>
    </p>
    <p class="comment-subscription-form">
      <input type="checkbox" name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" />
      <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">Notify me of new posts by email.</label>
    </p></form>
</div><!-- #respond -->

6.6 #6.header Header

Header of the site (includes site branding and navigation)

<div class="home">

  <header id="masthead" class="site-header" role="banner">
    <div class="site-branding">
      <p class="site-title"><a href="#" rel="home">WordCamp Europe 2017</a></p>
      <p class="site-description">June 15-17, Paris, France | #WCEU</p>
    </div><!-- .site-branding -->

    <nav id="site-navigation" class="main-navigation page-navigation-container" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
      <div class="menu-main-navigation-container">
        <ul id="primary-menu" class="menu">
          <li id="menu-item-7826" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7826"><a href="#">News</a></li>
          <li id="menu-item-4446" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4446"><a href="#">Speakers</a></li>
          <li id="menu-item-6182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-6182"><a href="#">Schedules</a>
            <ul  class="sub-menu">
              <li id="menu-item-5453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5453"><a href="#">Conference Schedule</a></li>
              <li id="menu-item-6058" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6058"><a href="#">Contributor Day Schedule</a></li>
              <li id="menu-item-7063" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7063"><a href="#">Sponsor Workshops Schedule</a></li>
              <li id="menu-item-7633" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-7633"><a href="#">Tribe Meetups and Speed Networking</a></li>
            </ul>
          </li>
          <li id="menu-item-5137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5137"><a href="#">Sponsors</a></li>
          <li id="menu-item-41" class="use-title-for-small menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41"><a title="Info" href="#">Info</a>
          <ul  class="sub-menu">
          <li id="menu-item-981" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-981"><a title="Location" href="#">Location</a></li>
          <li id="menu-item-6142" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-6142"><a href="#">Afterparty</a></li>
          <li id="menu-item-5488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5488"><a href="#">Transportation</a></li>
          <li id="menu-item-6126" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-6126"><a href="#">Flight Discount</a></li>
          <li id="menu-item-1999" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1999"><a href="#">Hotels in Location</a></li>
          <li id="menu-item-6937" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6937"><a href="#">Restaurants In Location</a></li>
          <li id="menu-item-6178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6178"><a href="#">Getting Mobile</a></li>
          <li id="menu-item-5639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5639"><a href="#">Accessibility and Inclusivity</a></li>
          <li id="menu-item-6390" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-6390"><a href="#">Childcare</a></li>
          <li id="menu-item-5104" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-5104"><a href="#">Coworking</a></li>
          <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="#">FAQ</a></li>
          <li id="menu-item-1450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1450"><a href="#">Organizers</a></li>
          <li id="menu-item-31" class="use-title-for-small menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a title="CoC" href="#">Code of Conduct</a></li>
          </ul>
          </li>
          <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32"><a href="#">Tickets</a>
          <ul  class="sub-menu">
          <li id="menu-item-3053" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3053"><a href="#">Attendees</a></li>
          <li id="menu-item-5652" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5652"><a href="#">Request an Invoice</a></li>
          </ul>
          </li>
          <li id="menu-item-3060" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3060"><a href="#">Press</a></li>
        </ul>
      </div>
    </nav>

  </header><!-- #masthead -->

</div>

6.7 #6.main Main

Main section of the site

Example
Markup:
Markup:

6.8 #6.navigation Navigation

Main navigation of the site

<nav id="site-navigation" class="main-navigation page-navigation-container" role="navigation">
  <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
  <div class="menu-main-navigation-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-7826" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7826"><a href="#">News</a></li>
      <li id="menu-item-4446" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4446"><a href="#">Speakers</a></li>
      <li id="menu-item-6182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-6182"><a href="#">Schedules</a>
        <ul  class="sub-menu">
          <li id="menu-item-5453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5453"><a href="#">Conference Schedule</a></li>
          <li id="menu-item-6058" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6058"><a href="#">Contributor Day Schedule</a></li>
          <li id="menu-item-7063" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7063"><a href="#">Sponsor Workshops Schedule</a></li>
          <li id="menu-item-7633" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-7633"><a href="#">Tribe Meetups and Speed Networking</a></li>
        </ul>
      </li>
      <li id="menu-item-5137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5137"><a href="#">Sponsors</a></li>
      <li id="menu-item-41" class="use-title-for-small menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41"><a title="Info" href="#">Info</a>
      <ul  class="sub-menu">
      <li id="menu-item-981" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-981"><a title="Location" href="#">Location</a></li>
      <li id="menu-item-6142" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-6142"><a href="#">Afterparty</a></li>
      <li id="menu-item-5488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5488"><a href="#">Transportation</a></li>
      <li id="menu-item-6126" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-6126"><a href="#">Flight Discount</a></li>
      <li id="menu-item-1999" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1999"><a href="#">Hotels in Location</a></li>
      <li id="menu-item-6937" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6937"><a href="#">Restaurants In Location</a></li>
      <li id="menu-item-6178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6178"><a href="#">Getting Mobile</a></li>
      <li id="menu-item-5639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5639"><a href="#">Accessibility and Inclusivity</a></li>
      <li id="menu-item-6390" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-6390"><a href="#">Childcare</a></li>
      <li id="menu-item-5104" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-5104"><a href="#">Coworking</a></li>
      <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="#">FAQ</a></li>
      <li id="menu-item-1450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1450"><a href="#">Organizers</a></li>
      <li id="menu-item-31" class="use-title-for-small menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a title="CoC" href="#">Code of Conduct</a></li>
      </ul>
      </li>
      <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32"><a href="#">Tickets</a>
      <ul  class="sub-menu">
      <li id="menu-item-3053" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3053"><a href="#">Attendees</a></li>
      <li id="menu-item-5652" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5652"><a href="#">Request an Invoice</a></li>
      </ul>
      </li>
      <li id="menu-item-3060" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3060"><a href="#">Press</a></li>
    </ul>
  </div>
</nav>

6.9 #6.oembed oEmbed

Google Maps oEmbed

Example
<iframe width="100%" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed"></iframe>
Example

Michelle Gutierrez

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum quibusdam commodi, eius. Autem saepe quis laboriosam assumenda excepturi quos!

Sara Mason

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum quibusdam commodi, eius. Autem saepe quis laboriosam assumenda excepturi quos!

Willie Castro

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate error exercitationem dolor, repellendus facilis aspernatur.

Link

Eric Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui non, animi odit impedit, adipisci laudantium voluptatibus autem, sit sapiente libero distinctio. Ipsam suscipit libero iusto?

Link

<div class="wcorg-organizers">
 <div class="wcorg-organizer">
   <h2>Michelle Gutierrez</h2>
   <div class="wcorg-organizer-description">
     <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/1/" class="avatar avatar-100 photo avatar-default" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/1/" scale="2">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum quibusdam commodi, eius. Autem saepe quis laboriosam assumenda excepturi quos!</p>
   </div>
 </div>
 <div class="wcorg-organizer">
   <h2>Sara Mason</h2>
   <div class="wcorg-organizer-description">
     <img alt="" src="http://lorempixel.com/96/96/people/9/" srcset="http://lorempixel.com/96/96/people/9/" class="avatar avatar-100 photo avatar-default" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/9/" scale="2">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum quibusdam commodi, eius. Autem saepe quis laboriosam assumenda excepturi quos!</p>
   </div>
 </div>
 <div class="wcorg-organizer">
   <h2>Willie Castro</h2>
   <div class="wcorg-organizer-description">
     <img alt="" src="http://lorempixel.com/96/96/people/10/" srcset="http://lorempixel.com/96/96/people/10/" class="avatar avatar-100 photo avatar-default" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/10/" scale="2">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate error exercitationem dolor, repellendus facilis aspernatur.</p>
     <p><a href="#">Link</a></p>
   </div>
 </div>
 <div class="wcorg-organizer">
   <h2>Eric Williamson</h2>
   <div class="wcorg-organizer-description">
     <img alt="" src="http://lorempixel.com/96/96/people/5/" srcset="http://lorempixel.com/96/96/people/5/" class="avatar avatar-100 photo" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/5/" scale="2">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui non, animi odit impedit, adipisci laudantium voluptatibus autem, sit sapiente libero distinctio. Ipsam suscipit libero iusto?</p>
     <p><a href="#">Link</a></p>
   </div>
 </div>
</div>

6.11 #6.pagination Pagination

Bottom navigation for previous/next page of listing

<nav class="navigation post-navigation" role="navigation">
  <h2 class="screen-reader-text">Post navigation</h2>
  <div class="nav-links">
    <div class="nav-previous"><a href="#" rel="prev">Announcing tickets sale</a></div>
    <div class="nav-next"><a href="#" rel="next">After party information</a></div>
  </div>
</nav>
Example

One Really Long Interesting Article: WordCamps Are Cool!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere fugiat eligendi tempora, harum minus repudiandae iure maiores praesentium vitae nam itaque, natus ullam quaerat, incidunt nihil sed ipsum voluptas. Provident.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus laborum alias eaque, maxime numquam id impedit atque dicta, itaque dignissimos nam molestias et animi placeat omnis culpa reprehenderit doloribus excepturi quae minima, aliquam non sint ducimus dolorum facere. Voluptas delectus sequi cum, ipsum incidunt aperiam, animi nam fugit quidem at dolorum ab. Quas asperiores provident culpa, eaque inventore ab. Nulla eum, doloremque, in ipsa libero unde quae velit sunt! Quasi ipsa sint, deleniti repellat molestiae reprehenderit aperiam, excepturi modi a totam rem sed, delectus voluptates cumque iste vitae, atque quidem nemo minima aliquam repellendus ea quae expedita voluptatum. Dicta, nihil.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio temporibus accusantium expedita est, ea aliquid repellat vel aliquam qui aperiam voluptatem architecto pariatur esse nulla fugiat, totam autem veritatis, optio dicta voluptatum. Ullam odit, vero nostrum adipisci illo saepe, minima. Voluptates libero et, dolore officia nisi. Ex inventore, maiores.

<article id="post-15869" class="post-15869 post type-post status-publish format-standard has-post-thumbnail hentry category-news tag-wceu-2016">
  <header class="entry-header">
    <h2 class="entry-title">
      <a href="#" rel="bookmark">One Really Long Interesting Article: WordCamps Are Cool!</a>
    </h2>
    <div class="entry-meta">
      <span class="posted-on">
        Posted on
        <a href="#" rel="bookmark">
          <time class="entry-date published" datetime="2016-07-26T12:44:02+00:00">July 26, 2016</time>
          <time class="updated" datetime="2016-07-28T13:14:05+00:00">July 28, 2016</time>
        </a>
      </span>
      <span class="byline"> by
        <span class="author vcard">
          <a class="url fn n" href="#">Mark Johnson</a>
        </span>
      </span>
    </div><!-- .entry-meta -->
  </header><!-- .entry-header -->
  <div class="entry-content">
    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit. Facere fugiat eligendi tempora, harum minus repudiandae iure maiores praesentium vitae nam itaque, natus ullam quaerat, incidunt nihil sed ipsum voluptas. Provident.</p>
    <p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>. Accusamus laborum alias eaque, maxime numquam id impedit atque dicta, itaque dignissimos nam molestias et animi placeat omnis culpa reprehenderit doloribus excepturi quae minima, aliquam non sint ducimus dolorum facere. Voluptas delectus sequi cum, ipsum incidunt aperiam, animi nam fugit quidem at dolorum ab. Quas asperiores provident culpa, eaque inventore ab. Nulla eum, doloremque, in ipsa libero unde quae velit sunt! Quasi ipsa sint, deleniti repellat <a href="#">molestiae reprehenderit aperiam</a>, excepturi modi a totam rem sed, delectus voluptates cumque iste vitae, atque quidem nemo minima aliquam repellendus ea quae expedita voluptatum. Dicta, nihil.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio temporibus accusantium expedita est, ea aliquid repellat vel aliquam qui aperiam voluptatem architecto pariatur esse nulla fugiat, totam autem veritatis, optio dicta voluptatum. Ullam odit, vero nostrum adipisci illo saepe, minima. Voluptates libero et, dolore officia nisi. Ex inventore, maiores.</p>
  </div><!-- .entry-content -->
 	<footer class="entry-footer">
 		<span class="tags-links">
 			Tagged
 			<a href="#" rel="tag">tag example</a>
 		</span>
 		<span class="comments-link"><a href="#">Leave a Comment<span class="screen-reader-text"> on One Really Long Interesting Article: WordCamps Are Cool!</span></a></span>
 		<span class="edit-link"><a class="post-edit-link" href="#">Edit <span class="screen-reader-text">"One Really Long Interesting Article: WordCamps Are Cool!"</span></a>
 		</span>
 	</footer><!-- .entry-footer -->
 </article><!-- #post-## -->
Example
Time Track 1 - Pullmann Track 2 - Eiffel
8:45 amOpening remarks Paolo Belcastro
9:00 amWordPress beyond borders: Cross cultural communication and the fundamentals of caring Petya RaykovskaDemystifying the WordPress Bootstrap Process Alain Schlesser
10:00 amBig little shame—A tale of empowered user experience through localisation Caspar HübingerImproving WordPress performance with XDebug and PHP profiling Otto Kekäläinen
11:00 amThe Three Kinds of Design John MaedaMaking your voice heard: how to win friends and influence policy Heather Burns
12:00 pmSecurity is a Process Mark Jaquith3 Gifts My Users Gave Me Alexandra Draghici
1:00 pmLunch
2:00 pmLightning Talks – Contributing to WordPress Jenny Wong, Pascal Birchler, Rahul Bansal, Alice StillLightning Talks – Content Monique Dubbelman, Dario Jazbec Hrvatin, Jennifer Miller, Syed Balkhi
3:00 pm5 ways you may be sabotaging your business + 2 proven ways to succeed Joshua StrebelWordPress security for all: you won’t believe how simple it can be Miriam Schwab
4:00 pmLessons learnt marketing WooCommerce since July 2014 Marina PapeIs your code ready for PHP7? Julka Grodel
5:00 pmHow to grow from freelancer to agency owner David LockieNew to theme design? Here’s what you should know Dmitry Mayorov
Time Track 1 - Pullmann Track 2 - Eiffel
9:00 amTBA Andrew NacinCSS Grid Changes Everything (about web layouts) Morten Rand-Hendriksen
10:00 amWe Are All Making This Up: Improv Lessons For Developers Dwayne McDanielUsing WordPress for good Sasha Endoh
11:00 amThe Pernicious Myth of the Code Poet Boone GorgesAccessibility in the age of the headless CMS Rian Rietveld
12:00 pmHow WordPress Communities Are Built Andrea MiddletonSelfish Accessibility Adrian Roselli
1:00 pmLunch
2:00 pmLightning Talks – Development Ivelina Dimova, Oleksandr Strikha, Borek Bernard, Yoav FarhiLightning Talks – Inspire Thabo Tswana, Marco Calicchia, Alice Orru, Tom Greenwood
4:00 pmNight of the living style guides Sarah SemarkReacting natively with WordPress Pirate Dunbar
5:00 pmBig design troubles in open source Michael ArestadData Visualization with the REST API K. Adam White
6:00 pmClosing remarks Paolo Belcastro
<table class="wcpt-schedule" border="0"><thead><tr><th class="wcpt-col-time">Time</th><th class="wcpt-col-track"> <span class="wcpt-track-name">Track 1 - Pullmann</span> <span class="wcpt-track-description"></span> </th><th class="wcpt-col-track"> <span class="wcpt-track-name">Track 2 - Eiffel</span> <span class="wcpt-track-description"></span> </th></tr></thead><tbody><tr class="wcpt-time-845am"><td class="wcpt-time">8:45&nbsp;am</td><td colspan="1" class="wcb-speaker-paolo-belcastro wcb-track-track-1 wcpt-session-type-session wcb-session-opening-remarks" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/opening-remarks/">Opening remarks</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/paolo-belcastro/">Paolo Belcastro</a></span></td><td class="wcpt-session-empty"></td></tr><tr class="wcpt-time-900am"><td class="wcpt-time">9:00&nbsp;am</td><td colspan="1" class="wcb-speaker-petya-raykovska wcb-track-track-1 wcpt-session-type-session wcb-session-wordpress-beyond-borders-cross-cultural-communication-and-the-fundamentals-of-caring" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/wordpress-beyond-borders-cross-cultural-communication-and-the-fundamentals-of-caring/">WordPress beyond borders: Cross cultural communication and the fundamentals of caring</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/petya-raykovska/">Petya Raykovska</a></span></td><td colspan="1" class="wcb-speaker-alain-schlesser wcb-track-track-2 wcpt-session-type-session wcb-session-demystifying-the-wordpress-bootstrap-process" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/demystifying-the-wordpress-bootstrap-process/">Demystifying the WordPress Bootstrap Process</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/alain-schlesser/">Alain Schlesser</a></span></td></tr><tr class="wcpt-time-1000am"><td class="wcpt-time">10:00&nbsp;am</td><td colspan="1" class="wcb-speaker-caspar-hubinger wcb-track-track-1 wcpt-session-type-session wcb-session-big-little-shame-a-tale-of-empowered-user-experience-through-localisation" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/big-little-shame-a-tale-of-empowered-user-experience-through-localisation/">Big little shame—A tale of empowered user experience through localisation</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/caspar-hubinger/">Caspar Hübinger</a></span></td><td colspan="1" class="wcb-speaker-otto-kekalainen wcb-track-track-2 wcpt-session-type-session wcb-session-improving-wordpress-performance-with-xdebug-and-php-profiling" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/improving-wordpress-performance-with-xdebug-and-php-profiling/">Improving WordPress performance with XDebug and PHP profiling</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/otto-kekalainen/">Otto Kekäläinen</a></span></td></tr><tr class="wcpt-time-1100am"><td class="wcpt-time">11:00&nbsp;am</td><td colspan="1" class="wcb-speaker-john-maeda wcb-track-track-1 wcpt-session-type-session wcb-session-the-three-kinds-of-design" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/the-three-kinds-of-design/">The Three Kinds of Design</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/john-maeda/">John Maeda</a></span></td><td colspan="1" class="wcb-speaker-heather-burns wcb-track-track-2 wcpt-session-type-session wcb-session-making-your-voice-heard-how-to-win-friends-and-influence-policy" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/making-your-voice-heard-how-to-win-friends-and-influence-policy/">Making your voice heard: how to win friends and influence policy</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/heather-burns/">Heather Burns</a></span></td></tr><tr class="wcpt-time-1200pm"><td class="wcpt-time">12:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-mark-jaquith wcb-track-track-1 wcpt-session-type-session wcb-session-security-is-a-process" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/security-is-a-process/">Security is a Process</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/mark-jaquith/">Mark Jaquith</a></span></td><td colspan="1" class="wcb-speaker-alexandra-draghici wcb-track-track-2 wcpt-session-type-session wcb-session-3-gifts-my-users-gave-me" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/3-gifts-my-users-gave-me/">3 Gifts My Users Gave Me</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/alexandra-draghici/">Alexandra Draghici</a></span></td></tr><tr class="wcpt-time-100pm global-session lunch"><td class="wcpt-time">1:00&nbsp;pm</td><td colspan="2" class="wcb-track-track-1 wcb-track-track-2 wcpt-session-type-custom wcb-session-lunch" data-track-title="Track 1 - Pullmann, Track 2 - Eiffel"><span class="wcpt-session-title">Lunch</span></td></tr><tr class="wcpt-time-200pm"><td class="wcpt-time">2:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-jenny-wong wcb-speaker-pascal-birchler wcb-speaker-rahul-bansal wcb-speaker-alice-still wcb-track-track-1 wcpt-session-type-session wcb-session-lightning-talks-contributing-to-wordpress" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/lightning-talks-contributing-to-wordpress/">Lightning Talks – Contributing to WordPress</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/jenny-wong/">Jenny Wong</a>, <a href="https://2017.europe.wordcamp.org/speaker/pascal-birchler/">Pascal Birchler</a>, <a href="https://2017.europe.wordcamp.org/speaker/rahul-bansal/">Rahul Bansal</a>, <a href="https://2017.europe.wordcamp.org/speaker/alice-still/">Alice Still</a></span></td><td colspan="1" class="wcb-speaker-monique-dubbelman wcb-speaker-dario-jazbec-hrvatin wcb-speaker-jennifer-miller wcb-speaker-syed-balkhi wcb-track-track-2 wcpt-session-type-session wcb-session-lightning-talks-content" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/lightning-talks-content/">Lightning Talks – Content</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/monique-dubbelman/">Monique Dubbelman</a>, <a href="https://2017.europe.wordcamp.org/speaker/dario-jazbec-hrvatin/">Dario Jazbec Hrvatin</a>, <a href="https://2017.europe.wordcamp.org/speaker/jennifer-miller/">Jennifer Miller</a>, <a href="https://2017.europe.wordcamp.org/speaker/syed-balkhi/">Syed Balkhi</a></span></td></tr><tr class="wcpt-time-300pm"><td class="wcpt-time">3:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-joshua-strebel wcb-track-track-1 wcpt-session-type-session wcb-session-5-ways-you-may-be-sabotaging-your-business-2-proven-ways-to-succeed" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/5-ways-you-may-be-sabotaging-your-business-2-proven-ways-to-succeed/">5 ways you may be sabotaging your business + 2 proven ways to succeed</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/joshua-strebel/">Joshua Strebel</a></span></td><td colspan="1" class="wcb-speaker-miriam-schwab wcb-track-track-2 wcpt-session-type-session wcb-session-wordpress-security-for-all-you-wont-believe-how-simple-it-can-be" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/wordpress-security-for-all-you-wont-believe-how-simple-it-can-be/">WordPress security for all: you won’t believe how simple it can be</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/miriam-schwab/">Miriam Schwab</a></span></td></tr><tr class="wcpt-time-400pm"><td class="wcpt-time">4:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-marina-pape wcb-track-track-1 wcpt-session-type-session wcb-session-lessons-learnt-marketing-woocommerce-since-july-2014" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/lessons-learnt-marketing-woocommerce-since-july-2014/">Lessons learnt marketing WooCommerce since July 2014</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/marina-pape/">Marina Pape</a></span></td><td colspan="1" class="wcb-speaker-julka-grodel wcb-track-track-2 wcpt-session-type-session wcb-session-is-your-code-ready-for-php7" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/is-your-code-ready-for-php7/">Is your code ready for PHP7?</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/julka-grodel/">Julka Grodel</a></span></td></tr><tr class="wcpt-time-500pm"><td class="wcpt-time">5:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-david-lockie wcb-track-track-1 wcpt-session-type-session wcb-session-how-to-grow-from-freelancer-to-agency-owner" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/how-to-grow-from-freelancer-to-agency-owner/">How to grow from freelancer to agency owner</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/david-lockie/">David Lockie</a></span></td><td colspan="1" class="wcb-speaker-dmitry-mayorov wcb-track-track-2 wcpt-session-type-session wcb-session-new-to-theme-design-heres-what-you-should-know" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/new-to-theme-design-heres-what-you-should-know/">New to theme design? Here’s what you should know</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/dmitry-mayorov/">Dmitry Mayorov</a></span></td></tr></tbody></table>
<table class="wcpt-schedule" border="0"><thead><tr><th class="wcpt-col-time">Time</th><th class="wcpt-col-track"> <span class="wcpt-track-name">Track 1 - Pullmann</span> <span class="wcpt-track-description"></span> </th><th class="wcpt-col-track"> <span class="wcpt-track-name">Track 2 - Eiffel</span> <span class="wcpt-track-description"></span> </th></tr></thead><tbody><tr class="wcpt-time-900am"><td class="wcpt-time">9:00&nbsp;am</td><td colspan="1" class="wcb-speaker-andrew-nacin wcb-track-track-1 wcpt-session-type-session wcb-session-tba" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/tba/">TBA</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/andrew-nacin/">Andrew Nacin</a></span></td><td colspan="1" class="wcb-speaker-morten-rand-hendriksen wcb-track-track-2 wcpt-session-type-session wcb-session-css-grid-changes-everything-about-web-layouts" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/css-grid-changes-everything-about-web-layouts/">CSS Grid Changes Everything (about web layouts)</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/morten-rand-hendriksen/">Morten Rand-Hendriksen</a></span></td></tr><tr class="wcpt-time-1000am"><td class="wcpt-time">10:00&nbsp;am</td><td colspan="1" class="wcb-speaker-dwayne-mcdaniel wcb-track-track-1 wcpt-session-type-session wcb-session-we-are-all-making-this-up-improv-lessons-for-developers" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/we-are-all-making-this-up-improv-lessons-for-developers/">We Are All Making This Up: Improv Lessons For Developers</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/dwayne-mcdaniel/">Dwayne McDaniel</a></span></td><td colspan="1" class="wcb-speaker-sasha-endoh wcb-track-track-2 wcpt-session-type-session wcb-session-using-wordpress-for-good" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/using-wordpress-for-good/">Using WordPress for good</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/sasha-endoh/">Sasha Endoh</a></span></td></tr><tr class="wcpt-time-1100am"><td class="wcpt-time">11:00&nbsp;am</td><td colspan="1" class="wcb-speaker-boone-gorges wcb-track-track-1 wcpt-session-type-session wcb-session-the-pernicious-myth-of-the-code-poet" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/the-pernicious-myth-of-the-code-poet/">The Pernicious Myth of the Code Poet</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/boone-gorges/">Boone Gorges</a></span></td><td colspan="1" class="wcb-speaker-rian-rietveld wcb-track-track-2 wcpt-session-type-session wcb-session-accessibility-in-the-age-of-the-headless-cms" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/accessibility-in-the-age-of-the-headless-cms/">Accessibility in the age of the headless CMS</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/rian-rietveld/">Rian Rietveld</a></span></td></tr><tr class="wcpt-time-1200pm"><td class="wcpt-time">12:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-andrea-middleton wcb-track-track-1 wcpt-session-type-session wcb-session-how-wordpress-communities-are-built" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/how-wordpress-communities-are-built/">How WordPress Communities Are Built</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/andrea-middleton/">Andrea Middleton</a></span></td><td colspan="1" class="wcb-speaker-adrian-roselli wcb-track-track-2 wcpt-session-type-session wcb-session-selfish-accessibility" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/selfish-accessibility/">Selfish Accessibility</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/adrian-roselli/">Adrian Roselli</a></span></td></tr><tr class="wcpt-time-100pm global-session lunch"><td class="wcpt-time">1:00&nbsp;pm</td><td colspan="2" class="wcb-track-track-1 wcb-track-track-2 wcpt-session-type-custom wcb-session-lunch-2" data-track-title="Track 1 - Pullmann, Track 2 - Eiffel"><span class="wcpt-session-title">Lunch</span></td></tr><tr class="wcpt-time-200pm"><td class="wcpt-time">2:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-ivelina-dimova wcb-speaker-oleksandr-strikha wcb-speaker-borek-bernard wcb-speaker-yoav-farhi wcb-track-track-1 wcpt-session-type-session wcb-session-lightning-talks-development" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/lightning-talks-development/">Lightning Talks – Development</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/ivelina-dimova/">Ivelina Dimova</a>, <a href="https://2017.europe.wordcamp.org/speaker/oleksandr-strikha/">Oleksandr Strikha</a>, <a href="https://2017.europe.wordcamp.org/speaker/borek-bernard/">Borek Bernard</a>, <a href="https://2017.europe.wordcamp.org/speaker/yoav-farhi/">Yoav Farhi</a></span></td><td colspan="1" class="wcb-speaker-thabo-tswana wcb-speaker-marco-calicchia wcb-speaker-alice-orru wcb-speaker-tom-greenwood wcb-track-track-2 wcpt-session-type-session wcb-session-lightning-talks-inspire" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/lightning-talks-inspire/">Lightning Talks – Inspire</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/thabo-tswana/">Thabo Tswana</a>, <a href="https://2017.europe.wordcamp.org/speaker/marco-calicchia/">Marco Calicchia</a>, <a href="https://2017.europe.wordcamp.org/speaker/alice-orru/">Alice Orru</a>, <a href="https://2017.europe.wordcamp.org/speaker/tom-greenwood/">Tom Greenwood</a></span></td></tr><tr class="wcpt-time-400pm"><td class="wcpt-time">4:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-sarah-semark wcb-track-track-1 wcpt-session-type-session wcb-session-night-of-the-living-style-guides" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/night-of-the-living-style-guides/">Night of the living style guides</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/sarah-semark/">Sarah Semark</a></span></td><td colspan="1" class="wcb-speaker-pirate-dunbar wcb-track-track-2 wcpt-session-type-session wcb-session-reacting-natively-with-wordpress" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/reacting-natively-with-wordpress/">Reacting natively with WordPress</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/pirate-dunbar/">Pirate Dunbar</a></span></td></tr><tr class="wcpt-time-500pm"><td class="wcpt-time">5:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-michael-arestad wcb-track-track-1 wcpt-session-type-session wcb-session-big-design-troubles-in-open-source" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/big-design-troubles-in-open-source/">Big design troubles in open source</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/michael-arestad/">Michael Arestad</a></span></td><td colspan="1" class="wcb-speaker-k-adam-white wcb-track-track-2 wcpt-session-type-session wcb-session-data-visualization-with-the-rest-api" data-track-title="Track 2 - Eiffel"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/data-visualization-with-the-rest-api/">Data Visualization with the REST API</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/k-adam-white/">K. Adam White</a></span></td></tr><tr class="wcpt-time-600pm"><td class="wcpt-time">6:00&nbsp;pm</td><td colspan="1" class="wcb-speaker-paolo-belcastro wcb-track-track-1 wcpt-session-type-session wcb-session-closing-remarks" data-track-title="Track 1 - Pullmann"><a class="wcpt-session-title" href="https://2017.europe.wordcamp.org/session/closing-remarks/">Closing remarks</a> <span class="wcpt-session-speakers"><a href="https://2017.europe.wordcamp.org/speaker/paolo-belcastro/">Paolo Belcastro</a></span></td><td class="wcpt-session-empty"></td></tr></tbody></table>
Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Presented by Michelle Gutierrez.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum fuga expedita nihil voluptatem, deleniti minus optio culpa, modi atque blanditiis enim corporis sint, quas dolorem itaque quidem! Eum voluptatem natus repellat aliquam id distinctio unde similique debitis ea exercitationem quisquam pariatur alias, inventore dicta eos ducimus, ex reprehenderit expedita, illo tempora quis facere odio a? Fugit ad aperiam doloremque molestias?

Lorem ipsum dolor sit amet

Presented by Sara Mason.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis inventore, nesciunt! Recusandae enim inventore, quisquam iusto quaerat. Nostrum, deserunt. Doloremque inventore quam aliquam, provident, harum doloribus id maiores, quo voluptatum mollitia sequi nulla ut similique unde debitis at placeat! Ab.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis inventore, nesciunt! Recusandae enim inventore, quisquam iusto quaerat. Nostrum, deserunt. Doloremque inventore quam aliquam, provident, harum doloribus id maiores, quo voluptatum mollitia sequi nulla ut similique unde debitis at placeat! Ab.

Lorem ipsum dolor sit amet

Presented by Willie Castro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi delectus, veniam molestias magnam corporis, perferendis a. Reprehenderit esse eos consequuntur vero enim odio. Voluptatem hic dicta, non necessitatibus deserunt, aperiam quo magni molestias, eos odit consequatur alias iste aliquid modi, natus corporis tenetur obcaecati ullam possimus porro. Tempore aliquid, dolores.

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Presented by Eric Williamson.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci omnis esse, harum impedit dolorem minus libero. Perspiciatis quos, aut. Vitae incidunt minima, sapiente fugit quo totam qui obcaecati soluta eligendi quia. Ipsum sunt deserunt distinctio, provident eum est sit molestias fugiat, velit ab. Alias delectus vitae obcaecati molestias quae officia possimus quis consequatur molestiae facilis!

Lorem ipsum dolor sit

Presented by Michelle Gutierrez.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime consectetur ipsum eum quasi repudiandae voluptatum, minima quidem possimus enim nulla. Doloribus dicta debitis nam, libero quisquam amet aliquam quia consequatur eveniet accusamus ipsam itaque vero iste at, minus deserunt beatae, facere quas saepe dolorum molestiae! Quam reiciendis numquam repudiandae nemo porro veniam voluptas ab.

Lorem ipsum dolor sit:

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, placeat.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ipsa laudantium consectetur dolorum, ullam architecto mollitia!
  • Lorem ipsum dolor sit amet, consectetur adipisicing.
<div class="wcorg-sessions">
 <div id="wcorg-session-4042" class="wcorg-session">
   <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
   <div class="wcorg-session-description">
     <p class="wcpt-session-meta">Presented by <a href="#">Michelle Gutierrez</a>.</p>
     <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/1/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/1/" scale="2" id="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum fuga expedita nihil voluptatem, deleniti minus optio culpa, modi atque blanditiis enim corporis sint, quas dolorem itaque quidem! Eum voluptatem natus repellat aliquam id distinctio unde similique debitis ea exercitationem quisquam pariatur alias, inventore dicta eos ducimus, ex reprehenderit expedita, illo tempora quis facere odio a? Fugit ad aperiam doloremque molestias?</p>
   </div>
 </div>
 <div id="wcorg-session-4093" class="wcorg-session">
   <h2>Lorem ipsum dolor sit amet</h2>
   <div class="wcorg-session-description">
     <p class="wcpt-session-meta">Presented by <a href="#">Sara Mason</a>.</p>
     <img alt="" src="http://lorempixel.com/96/96/9/" srcset="http://lorempixel.com/96/96/people/9/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/9/" scale="2" id="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis inventore, nesciunt! Recusandae enim inventore, quisquam iusto quaerat. Nostrum, deserunt. Doloremque inventore quam aliquam, provident, harum doloribus id maiores, quo voluptatum mollitia sequi nulla ut similique unde debitis at placeat! Ab.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis inventore, nesciunt! Recusandae enim inventore, quisquam iusto quaerat. Nostrum, deserunt. Doloremque inventore quam aliquam, provident, harum doloribus id maiores, quo voluptatum mollitia sequi nulla ut similique unde debitis at placeat! Ab.</p>
   </div>
 </div>
 <div id="wcorg-session-4298" class="wcorg-session">
   <h2>Lorem ipsum dolor sit amet</h2>
   <div class="wcorg-session-description">
     <p class="wcpt-session-meta">Presented by <a href="#">Willie Castro</a>.</p>
     <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/10/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/10/" scale="2" id="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi delectus, veniam molestias magnam corporis, perferendis a. Reprehenderit esse eos consequuntur vero enim odio. Voluptatem hic dicta, non necessitatibus deserunt, aperiam quo magni molestias, eos odit consequatur alias iste aliquid modi, natus corporis tenetur obcaecati ullam possimus porro. Tempore aliquid, dolores.</p>
   </div>
 </div>
 <div id="wcorg-session-4312" class="wcorg-session">
   <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
   <div class="wcorg-session-description">
     <p class="wcpt-session-meta">Presented by <a href="#">Eric Williamson</a>.</p>
     <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/5/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/5/" scale="2" id="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci omnis esse, harum impedit dolorem minus libero. Perspiciatis quos, aut. Vitae incidunt minima, sapiente fugit quo totam qui obcaecati soluta eligendi quia. Ipsum sunt deserunt distinctio, provident eum est sit molestias fugiat, velit ab. Alias delectus vitae obcaecati molestias quae officia possimus quis consequatur molestiae facilis!</p>
   </div>
 </div>
 <div id="wcorg-session-4016" class="wcorg-session">
   <h2>Lorem ipsum dolor sit</h2>
   <div class="wcorg-session-description">
     <p class="wcpt-session-meta">Presented by <a href="#">Michelle Gutierrez</a>.</p>
     <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/1/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/1/" scale="2" id="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime consectetur ipsum eum quasi repudiandae voluptatum, minima quidem possimus enim nulla. Doloribus dicta debitis nam, libero quisquam amet aliquam quia consequatur eveniet accusamus ipsam itaque vero iste at, minus deserunt beatae, facere quas saepe dolorum molestiae! Quam reiciendis numquam repudiandae nemo porro veniam voluptas ab.</p>
     <h3>Lorem ipsum dolor sit:</h3>
     <ul>
       <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, placeat.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ipsa laudantium consectetur dolorum, ullam architecto mollitia!</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
     </ul>
   </div>
 </div>
</div>
Example

Michelle Gutierrez

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem repellat dolorem incidunt provident pariatur illum non praesentium quis dolorum dicta, aliquam quos laborum distinctio numquam, sapiente, aliquid! Possimus assumenda quasi, distinctio commodi minima quidem praesentium, molestias esse repellendus nam facere repellat. Quis architecto labore earum itaque fugiat similique consectetur error voluptate doloribus ullam. Nihil eveniet, velit repellat fuga sit sequi.

Sara Mason

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum explicabo labore illo a tempora earum deleniti, facere in modi error excepturi consectetur consequuntur expedita distinctio ratione iste atque facilis officia laborum. Earum quia quam beatae nesciunt reprehenderit sit quos debitis maxime consectetur aliquam voluptas quisquam, necessitatibus recusandae cupiditate perspiciatis praesentium eius rem harum minima hic vel et reiciendis. Voluptates quae pariatur repellat, quam quod. Hic aliquam animi ab, facere dolorem.

Willie Castro

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dicta neque, ipsa dolores, autem a ipsam tempore quam nobis cupiditate fugiat incidunt enim, totam odio officia, necessitatibus voluptatem voluptatibus accusamus veniam ipsum voluptate aperiam molestiae quae cumque. Ipsa vitae, eveniet quisquam dolorum cupiditate quos incidunt! Sequi ipsum quisquam delectus quas ex illum, vitae repudiandae! Iusto porro dignissimos odit, animi libero.

Eric Williamson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque asperiores officiis recusandae at sequi esse accusantium, ipsa minus nulla quae dolores illo, velit nam beatae suscipit quis distinctio quasi optio et accusamus voluptate ipsam? In vero quasi quisquam, suscipit excepturi. Architecto perspiciatis provident tempora officiis facere placeat recusandae unde animi quae, quos temporibus maiores consequuntur incidunt illo ipsa! Unde consectetur dolore tenetur, doloribus placeat illum omnis atque odio neque totam!

<div class="wcorg-speakers">
  <div id="wcorg-speaker-name" class="wcorg-speaker wcorg-speaker-name">
    <h2><a href="#">Michelle Gutierrez</a></h2>
    <div class="wcorg-speaker-description">
      <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/1/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/1/" scale="2" id="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem repellat dolorem incidunt provident pariatur illum non praesentium quis dolorum dicta, aliquam quos laborum distinctio numquam, sapiente, aliquid! Possimus assumenda quasi, distinctio commodi minima quidem praesentium, molestias esse repellendus nam facere repellat. Quis architecto labore earum itaque fugiat similique consectetur error voluptate doloribus ullam. <a href="#">Nihil eveniet</a>, velit repellat fuga sit sequi.</p>
    </div>
  </div><!-- .wcorg-speaker -->
  <div id="wcorg-speaker-name" class="wcorg-speaker wcorg-speaker-name">
    <h2><a href="#">Sara Mason</a></h2>
    <div class="wcorg-speaker-description">
      <img alt="" src="http://lorempixel.com/96/96/9/" srcset="http://lorempixel.com/96/96/people/9/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/9/" scale="2" id="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum explicabo labore illo a tempora earum deleniti, facere in modi error excepturi consectetur consequuntur expedita distinctio ratione iste atque facilis officia laborum. Earum quia quam beatae nesciunt reprehenderit sit quos debitis maxime consectetur aliquam voluptas quisquam, necessitatibus recusandae cupiditate perspiciatis <a href="#">praesentium eius rem harum minima</a> hic vel et reiciendis. Voluptates quae pariatur repellat, quam quod. Hic aliquam animi ab, facere dolorem.</p>
    </div>
  </div><!-- .wcorg-speaker -->
  <div id="wcorg-speaker-name" class="wcorg-speaker wcorg-speaker-name">
    <h2><a href="#">Willie Castro</a></h2>
    <div class="wcorg-speaker-description">
      <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/10/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/10/" scale="2" id="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dicta neque, ipsa dolores, autem a ipsam tempore quam nobis cupiditate fugiat incidunt enim, totam odio officia, necessitatibus <a href="#">voluptatem voluptatibus</a> accusamus veniam ipsum voluptate aperiam molestiae quae cumque. Ipsa vitae, eveniet quisquam dolorum cupiditate quos incidunt! Sequi ipsum quisquam delectus quas ex illum, vitae repudiandae! <a href="#">Iusto porro dignissimos</a> odit, animi libero.</p>
    </div>
  </div><!-- .wcorg-speaker -->
  <div id="wcorg-speaker-name" class="wcorg-speaker wcorg-speaker-name">
    <h2><a href="#">Eric Williamson</a></h2>
    <div class="wcorg-speaker-description">
       <img alt="" src="http://lorempixel.com/96/96/people/1/" srcset="http://lorempixel.com/96/96/people/5/" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="http://lorempixel.com/96/96/people/5/" scale="2" id="">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Doloremque asperiores officiis</a> recusandae at sequi esse accusantium, ipsa minus nulla quae dolores illo, velit nam beatae suscipit quis distinctio quasi optio et accusamus voluptate ipsam? In vero quasi quisquam, suscipit excepturi. Architecto perspiciatis provident tempora officiis facere placeat recusandae unde animi quae, quos temporibus maiores consequuntur incidunt illo ipsa! Unde consectetur dolore tenetur, doloribus placeat illum omnis atque odio neque totam!</p>
    </div>
  </div><!-- .wcorg-speaker -->
</div>

6.16 #6.tickets Tickets

Table for buying tickets

Example
Description Price Remaining Quantity
WordCamp Name - Date, Year
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum mollitia recusandae, voluptatibus labore atque sit hic, rem vel obcaecati a. Dolores dicta, quo placeat deserunt ut necessitatibus consequatur magni amet temporibus? Fugit adipisci, quasi accusamus natus expedita, voluptatibus maxime assumenda.
€ 40.00 215
Click here to enter a coupon code


<div id="tix" class="tix-js">
 <form action="#" method="POST">
   <table class="tix_tickets_table">
     <thead>
       <tr>
         <th class="tix-column-description">Description</th>
         <th class="tix-column-price">Price</th>
         <th class="tix-column-remaining">Remaining</th>
         <th class="tix-column-quantity">Quantity</th>
       </tr>
     </thead>
     <tbody>
       <tr class="tix-ticket-13">
         <td class="tix-column-description">
           <strong class="tix-ticket-title">WordCamp Name - Date, Year</strong>
           <br><span class="tix-ticket-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum mollitia recusandae, voluptatibus labore atque sit hic, rem vel obcaecati a. Dolores dicta, quo placeat deserunt ut necessitatibus consequatur magni amet temporibus? Fugit adipisci, quasi accusamus natus expedita, voluptatibus maxime assumenda.</span>
         </td>
         <td class="tix-column-price" style="vertical-align: middle;">€&nbsp;40.00</td>
         <td class="tix-column-remaining" style="vertical-align: middle;">215</td>
         <td class="tix-column-quantity" style="vertical-align: middle;">
           <select name="tix_tickets_selected[13]">
             <option value="0">0</option>
             <option selected="selected" value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
             <option value="10">10</option>
           </select>
         </td>
       </tr>
       <tr class="tix-row-coupon">
         <td colspan="4" style="text-align: right;">
           <a href="#" id="tix-coupon-link" class="">Click here to enter a coupon code</a>
           <div id="tix-coupon-container" style="display: none;">
             <input type="text" id="tix-coupon-input" name="tix_coupon" value="">
             <input type="submit" name="tix_coupon_submit" value="Apply Coupon">
           </div>
           <script>
             // Hide the link and show the coupon form on click.
             var link_el = document.getElementById( 'tix-coupon-link' );
             link_el.onclick = function() {
               this.style.display = 'none';
               document.getElementById( 'tix-coupon-container' ).style.display = 'block';
               document.getElementById( 'tix-coupon-input' ).focus();
               return false;
             };
           </script>
         </td>
       </tr>
     </tbody>
   </table>
   <p>
     <input type="submit" value="Register →" style="float: right; cursor: pointer;" class="">
     <br class="tix-clear">
   </p>
 </form>
</div>
Example
<div id="secondary">
  <aside id="" class="widget jetpack_subscription_widget">
   <h2 class="widget-title">Subscribe to WordCamp Name News by email</h2>
   <form action="#" method="post" accept-charset="utf-8" id="">
     <div id="subscribe-text">
       <p>Enter your email address to subscribe to this site and receive news by email.</p>
     </div>
     <p id="subscribe-email">
       <label id="jetpack-subscribe-label" for="subscribe-field-blog_subscription-3" style="clip: rect(1px 1px 1px 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;">Email Address</label>
       <input type="email" name="email" required="required" class="required" value="" id="subscribe-field-blog_subscription-3" placeholder="Email Address">
     </p>
     <p id="subscribe-submit">
       <input type="submit" value="Sign me up!" name="jetpack_subscriptions_widget">
     </p>
   </form>
  </aside>
</div>
<div id="secondary">
  <aside class="widget widget_text" id="text-2">
    <h1 class="widget-title">Follow WordCamp Name</h1>
    <div class="textwidget">
      <ul class="list-social">
        <li class="social-twitter" id="twitter">
          <a href="#"><strong>@WordPress</strong> on Twitter</a>
        </li>
        <li class="social-facebook" id="facebook">
          <a href="#"><strong>WordPress</strong> on Facebook</a>
        </li>
        <li class="social-instagram" id="instagram">
          <a href="#"><strong>WordPress</strong> on Instagram</a>
        </li>
      </ul>
    </div>
  </aside>
</div>