WordCamp Style Guide

6 #permalink Components

Designed components, chunks of UI

6.1 #6.accordions Accordions

List of accordions (used e.g. for volunteer roles) built with the use of checkboxes to help with accessibility.

Example
  • You are manning the info booth and roving the hallways to help attendees with any question they could have
  • You start conversations and help people that seem lost
  • This is perfect for you when you like interacting with people or of you don’t like being in 1 spot all the time
  • Check details and apply for Attendee orientation
  • You are the liaison between photography/video teams and the communication team
  • You will be selecting, editing, renaming and saving images and videos
  • The time constraint is an important part of the job so you are fast and accurate
  • Check details and apply for Communication support
  • It's your job to welcome people into the rooms before the session starts
  • You make sure people entering or exiting the rooms during the talks do that as quit as possible
  • You'll get to see the session while guarding the door.
  • Check details and apply for Door guard
  • You make sure only speakers preparing for their talk are in the Green Room
  • You maintain peace and quit in the room
  • If one of the speakers needs something you make sure it gets to the Green Room (you get it or you get someone to get it for you)
  • Check details and apply for Green room assistent
  • Your job is to organise and supervise Attendee Orientation volunteers
  • You schedule rotation between booth and roving volunteers
  • Hands on mentality is need for this job, you do the work when needed
  • Check details and apply for Hallway manager
  • You feel comforaccordionle helping people with all kinds of WordPress questions
  • If you don't know the answer you help people find a way to find an answer
  • You're the friendly inviting face that makes people feel comforaccordionle asking all the questions they have
  • Check details and apply for Happiness bar
  • You'll find and share news during the event
  • You prepare and set up interviews
  • You make sure all Media Supporters and Media Partners get updates during the conference
  • Check details and apply for PR support
  • You are the connection between registration desk and registration desk manager
  • You make sure all the volunteer seats are taken (by volunteers)
  • If there is a problem, you are there to fix it
  • Check details and apply for Registration lead
  • You are the connection between the registration leads and the organizing team
  • Coordinating registration with the different registration leads
  • You know what's going on at the different desks and take action when needed
  • Check details and apply for Registration manager
  • You are the team leader (timekeeper, door guards and runners)
  • You are part of the team to make sure the event runs smoothly in all the session rooms
  • You collaborating closely with the room emcee
  • Check details and apply for Room lead
  • Your job is to be the connector between the room leads and the volunteers team organizers
  • You'll be coordinating all the room leads
  • Your superpower is prioritizing and delegating
  • Check details and apply for Rooms manager
  • You are the super speedy person resolving last minute issues
  • You'll assist the Room Lead with things needed in the room
  • Run mic's at Q&A
  • Check details and apply for Runner
  • You'll write posts and share pictures during talks about the talk, speaker and post directly on WCEU social media accounts
  • You interact with people who are commenting on posts
  • You support attendees that ask for help using social media
  • Check details and apply for Social media support
  • You are responsible for speakers arriving in the right track on time
  • You assist the speakers with tech check and setup and everything else they might need
  • Finaly you'll be guiding the speakers back to the Green Room after their session
  • Check details and apply for Speaker wrangler
  • You’re the first point of contact on the floor for sponsors
  • You help resolve minor issues or reach out to the Sponsor wrangler manager for bigger issues
  • Make sure that any issues raised by our sponsors are addressed in a timely manner
  • Check details and apply for Sponsor wrangler
  • You will be leading a team of Sponsors Wranglers
  • You'll work closely with the Sponsors and Volunteers team and keep them updated.
  • You make sure that at all times there is at least one Sponsors Wrangler on the floor available and that sponsors know how to reach him/her
  • Check details and apply for Sponsor wrangler manager
  • Oversee the swag area and makes sure everything is fine
  • You need to make sure that the Swag and Shop stations have enough volunteers to function properly.
  • Provide assistance and guidance to the Swag and Shop leads
  • Check details and apply for Swag & shop manager
  • You get to give swag to attendees and check on a list who's received their swag
  • You make sure the swag accordionle doesn't turn into one messy pile of stuff
  • Unbox boxes of swag and move them where they’re needed
  • Check details and apply for Swag station
  • You make sure that the volunteers are present and know what to do
  • Create a system to hand out t-shirts and check of who got one
  • Set up the swag accordionle and making sure it’s in good order
  • Check details and apply for Swag station lead
  • Your job is making sure that no presentation is thwarted by technical difficulties
  • You have solid IT skills to resolve any issue that appears
  • This job is only suiaccordionle for the coolest people, an entire room is looking at you do your job
  • Check details and apply for Tech help
  • You are responsible for talks starting and ending on time
  • Help the speakers stay on track (timewise)
  • Show the speakers the remaining time panels during their session
  • Check details and apply for Time keeper
  • You'll be creating a save and friendly environment for Workshop Leads to have their workshop
  • Attendees need a ticket to get in a workshop and it's your job to check the tickets
  • You make sure nobody is a disturbance during a workshop
  • Check details and apply for Workshop room assistant
<div class="wrapper">
<div class="accordion"><input id="accordion-1" type="checkbox" name="accordions"><label for="accordion-1">After-party entrance</label><div class="accordion-content">
<ul>
 	<li>You welcome visitors to the after-party and check their badges</li>
 	<li>You are able to get people in the venue quickly and organised</li>
 	<li>You keep out unwanted guests</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/after-party-entrance/">Check details and apply for After-party entrance</a></li></ul></div></div>
<div class="accordion"><input id="accordion-2" type="checkbox" name="accordions"><label for="accordion-2">After-party entrance manager</label><div class="accordion-content">
<ul>
 	<li>You are responsible for after-party entrance workforce</li>
 	<li>You set the mood for the team to get people excited to enter the party</li>
 	<li>You're the problem solver (if needed)</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/after-party-entrance-manager/">Check details and apply for After-party entrance manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-3" type="checkbox" name="accordions"><label for="accordion-3">Attendee orientation</label><div class="accordion-content">
<ul>
 	<li>You are manning the info booth and roving the hallways to help attendees with any question they could have</li>
 	<li>You start conversations and help people that seem lost  </li>
 	<li>This is perfect for you when you like interacting with people or of you don’t like being in 1 spot all the time</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/attendee-orientation/">Check details and apply for Attendee orientation</a></li></ul></div></div>
<div class="accordion"><input id="accordion-4" type="checkbox" name="accordions"><label for="accordion-4">Communication support</label><div class="accordion-content">
<ul>
 	<li>You are the liaison between photography/video teams and the communication team</li>
 	<li>You will be selecting, editing, renaming and saving images and videos </li>
 	<li>The time constraint is an important part of the job so you are fast and accurate</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/communication-support/">Check details and apply for Communication support</a></li></ul></div></div>
<div class="accordion"><input id="accordion-5" type="checkbox" name="accordions"><label for="accordion-5">Door guard</label><div class="accordion-content">
<ul>
 	<li>It's your job to welcome people into the rooms before the session starts</li>
 	<li>You make sure people entering or exiting the rooms during the talks do that as quit as possible</li>
 	<li>You'll get to see the session while guarding the door.</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/door-guard/">Check details and apply for Door guard</a></li></ul></div></div>
<div class="accordion"><input id="accordion-6" type="checkbox" name="accordions"><label for="accordion-6">Green room assistent</label><div class="accordion-content">
<ul>
 	<li>You make sure only speakers preparing for their talk are in the Green Room</li>
 	<li>You maintain peace and quit in the room</li>
 	<li>If one of the speakers needs something you make sure it gets to the Green Room (you get it or you get someone to get it for you)</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/green-room-assistant/">Check details and apply for Green room assistent</a></li></ul></div></div>
<div class="accordion"><input id="accordion-7" type="checkbox" name="accordions"><label for="accordion-7">Hallway manager</label><div class="accordion-content">
<ul>
 	<li>Your job is to organise and supervise Attendee Orientation volunteers</li>
 	<li>You schedule rotation between booth and roving volunteers</li>
 	<li>Hands on mentality is need for this job, you do the work when needed</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/hallway-manager/">Check details and apply for Hallway manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-8" type="checkbox" name="accordions"><label for="accordion-8">Happiness bar</label><div class="accordion-content">
<ul>
 	<li>You feel comforaccordionle helping people with all kinds of WordPress questions</li>
 	<li>If you don't know the answer you help people find a way to find an answer</li>
 	<li>You're the friendly inviting face that makes people feel comforaccordionle asking all the questions they have</li>
<li><a href="https://2018.europe.wordcamp.org/happiness-bar/">Check details and apply for Happiness bar</a></li></ul></div></div>
<div class="accordion"><input id="accordion-9" type="checkbox" name="accordions"><label for="accordion-9">Happiness bar manager</label><div class="accordion-content">
<ul>
 	<li>You are the Happiness Bar leader of the pack</li>
 	<li>The team is happy and productive and you keep them that way</li>
 	<li>You help the Happiness Bar team answering WordPress questions if you're done managing</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/happiness-bar-manager/">Check details and apply for Happiness bar manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-10" type="checkbox" name="accordions"><label for="accordion-10">PR support</label><div class="accordion-content">
<ul>
 	<li>You'll find and share news during the event</li>
 	<li>You prepare and set up interviews</li>
 	<li>You make sure all Media Supporters and Media Partners get updates during the conference</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/pr-support/">Check details and apply for PR support</a></li></ul></div></div>
<div class="accordion"><input id="accordion-11" type="checkbox" name="accordions"><label for="accordion-11">Registration desk</label><div class="accordion-content">
<ul>
 	<li>"Welcome to WordCamp Europe 2018" is your line and you'll use it to welcome and inform attendees at the entrance</li>
 	<li>You'll check tickets</li>
 	<li>Prepare and handout badges</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/registration-desk/">Check details and apply for Registration desk</a></li></ul></div></div>
<div class="accordion"><input id="accordion-12" type="checkbox" name="accordions"><label for="accordion-12">Registration lead</label><div class="accordion-content">
<ul>
 	<li>You are the connection between registration desk and registration desk manager</li>
 	<li>You make sure all the volunteer seats are taken (by volunteers)</li>
 	<li> If there is a problem, you are there to fix it</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/normal-registration-lead/">Check details and apply for Registration lead</a></li></ul></div></div>
<div class="accordion"><input id="accordion-13" type="checkbox" name="accordions"><label for="accordion-13">Registration manager</label><div class="accordion-content">
<ul>
 	<li>You are the connection between the registration leads and the organizing team</li>
 	<li>Coordinating registration with the different registration leads</li>
 	<li>You know what's going on at the different desks and take action when needed</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/registration-manager/">Check details and apply for Registration manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-14" type="checkbox" name="accordions"><label for="accordion-14">Room lead</label><div class="accordion-content">
<ul>
 	<li>You are the team leader (timekeeper, door guards and runners)</li>
 	<li>You are part of the team to make sure the event runs smoothly in all the session rooms</li>
 	<li>You collaborating closely with the room emcee</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/room-lead/">Check details and apply for Room lead</a></li></ul></div></div>
<div class="accordion"><input id="accordion-15" type="checkbox" name="accordions"><label for="accordion-15">Rooms manager</label><div class="accordion-content">
<ul>
 	<li>Your job is to be the connector between the room leads and the volunteers team organizers</li>
 	<li>You'll be coordinating all the room leads</li>
 	<li>Your superpower is prioritizing and delegating</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/rooms-manager/">Check details and apply for Rooms manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-16" type="checkbox" name="accordions"><label for="accordion-16">Runner</label><div class="accordion-content">
<ul>
 	<li>You are the super speedy person resolving last minute issues</li>
 	<li>You'll assist the Room Lead with things needed in the room</li>
 	<li>Run mic's at Q&amp;A</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/runner/">Check details and apply for Runner</a></li></ul></div></div>
<div class="accordion"><input id="accordion-17" type="checkbox" name="accordions"><label for="accordion-17">Shop station</label><div class="accordion-content">
<ul>
 	<li>You're selling WordPress swag in the WordPress shop</li>
 	<li>You're helpful and friendly</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/shop-station/">Check details and apply for Shop station</a></li></ul></div></div>
<div class="accordion"><input id="accordion-18" type="checkbox" name="accordions"><label for="accordion-18">Shop station lead</label><div class="accordion-content">
<ul>
 	<li>You are responsible for the volunteers manning the Swag shop</li>
 	<li>You make sure the right people are in the right place at the right time</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/shop-station-lead/">Check details and apply for Shop station lead</a></li></ul></div></div>
<div class="accordion"><input id="accordion-19" type="checkbox" name="accordions"><label for="accordion-19">Social media support</label><div class="accordion-content">
<ul>
 	<li>You'll write posts and share pictures during talks about the talk, speaker and post directly on WCEU social media accounts</li>
 	<li>You interact with people who are commenting on posts</li>
 	<li>You support attendees that ask for help using social media</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/social-media-support/">Check details and apply for Social media support</a></li></ul></div></div>
<div class="accordion"><input id="accordion-20" type="checkbox" name="accordions"><label for="accordion-20">Speaker wrangler</label><div class="accordion-content">
<ul>
 	<li>You are responsible for speakers arriving in the right track on time</li>
 	<li>You assist the speakers with tech check and setup and everything else they might need</li>
 	<li>Finaly you'll be guiding the speakers back to the Green Room after their session</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/speaker-wrangler/">Check details and apply for Speaker wrangler</a></li></ul></div></div>
<div class="accordion"><input id="accordion-21" type="checkbox" name="accordions"><label for="accordion-21">Speaker wrangler manager</label><div class="accordion-content">
<ul>
 	<li>You're in charge and responsible for the team of speaker wranglers</li>
 	<li>You participate on the smooth running of the talks</li>
 	<li>The connector between the speaker wranglers and the #content team = YOU</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/speaker-wrangler/">Check details and apply for Speaker wrangler manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-22" type="checkbox" name="accordions"><label for="accordion-22">Sponsor wrangler</label><div class="accordion-content">
<ul>
 	<li>You’re the first point of contact on the floor for sponsors</li>
 	<li>You help resolve minor issues or reach out to the Sponsor wrangler manager for bigger issues</li>
 	<li>Make sure that any issues raised by our sponsors are addressed in a timely manner</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/sponsor-wrangler/">Check details and apply for Sponsor wrangler</a></li></ul></div></div>
<div class="accordion"><input id="accordion-23" type="checkbox" name="accordions"><label for="accordion-23">Sponsor wrangler manager</label><div class="accordion-content">
<ul>
 	<li>You will be leading a team of Sponsors Wranglers</li>
 	<li>You'll work closely with the Sponsors and Volunteers team and keep them updated.</li>
 	<li>You make sure that at all times there is at least one Sponsors Wrangler on the floor available and that sponsors know how to reach him/her</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/sponsor-wrangler-manager/">Check details and apply for Sponsor wrangler manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-24" type="checkbox" name="accordions"><label for="accordion-24">Stage builder</label><div class="accordion-content">
<ul>
 	<li>You're the muscled helper that puts furniture on the stage for the keynote</li>
 	<li>And you remove the furniture after the keynote.</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/stage-builder/">Check details and apply for Stage builder</a></li></ul></div></div>
<div class="accordion"><input id="accordion-25" type="checkbox" name="accordions"><label for="accordion-25">Swag &amp; shop manager</label><div class="accordion-content">
<ul>
 	<li>Oversee the swag area and makes sure everything is fine</li>
 	<li>You need to make sure that the Swag and Shop stations have enough volunteers to function properly.</li>
 	<li>Provide assistance and guidance to the Swag and Shop leads</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/swag-shop-manager/">Check details and apply for Swag &amp; shop manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-26" type="checkbox" name="accordions"><label for="accordion-26">Swag station</label><div class="accordion-content">
<ul>
 	<li>You get to give swag to attendees and check on a list who's received their swag</li>
 	<li>You make sure the swag accordionle doesn't turn into one messy pile of stuff</li>
 	<li>Unbox boxes of swag and move them where they’re needed</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/swag-station/">Check details and apply for Swag station</a></li></ul></div></div>
<div class="accordion"><input id="accordion-27" type="checkbox" name="accordions"><label for="accordion-27">Swag station lead</label><div class="accordion-content">
<ul>
 	<li>You make sure that the volunteers are present and know what to do</li>
 	<li>Create a system to hand out t-shirts and check of who got one</li>
 	<li>Set up the swag accordionle and making sure it’s in good order</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/swag-station-lead/">Check details and apply for Swag station lead</a></li></ul></div></div>
<div class="accordion"><input id="accordion-28" type="checkbox" name="accordions"><label for="accordion-28">Tech help</label><div class="accordion-content">
<ul>
 	<li>Your job is making sure that no presentation is thwarted by technical difficulties</li>
 	<li>You have solid IT skills to resolve any issue that appears</li>
 	<li>This job is only suiaccordionle for the coolest people, an entire room is looking at you do your job</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/tech-help/">Check details and apply for Tech help</a></li></ul></div></div>
<div class="accordion"><input id="accordion-29" type="checkbox" name="accordions"><label for="accordion-29">Time keeper</label><div class="accordion-content">
<ul>
 	<li>You are responsible for talks starting and ending on time</li>
 	<li>Help the speakers stay on track (timewise)</li>
 	<li>Show the speakers the remaining time panels during their session</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/time-keeper/">Check details and apply for Time keeper</a></li></ul></div></div>
<div class="accordion"><input id="accordion-30" type="checkbox" name="accordions"><label for="accordion-30">Volunteer happiness manager</label><div class="accordion-content">
<ul>
 	<li>You take care and assist other WCEU volunteers</li>
 	<li>You bring them everything they might need during their shift (volunteer runner)</li>
 	<li>Volunteers rely on you to handle their requests in the #volunteer Slack channel</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/volunteers-happiness-manager/">Check details and apply for Volunteer happiness manager</a></li></ul></div></div>
<div class="accordion"><input id="accordion-31" type="checkbox" name="accordions"><label for="accordion-31">Workshop room assistant</label><div class="accordion-content">
<ul>
 	<li>You'll be creating a save and friendly environment for Workshop Leads to have their workshop</li>
 	<li>Attendees need a ticket to get in a workshop and it's your job to check the tickets</li>
 	<li>You make sure nobody is a disturbance during a workshop</li>
<li><a href="https://2018.europe.wordcamp.org/volunteer-information/volunteer-roles/workshop-room-assistant/">Check details and apply for Workshop room assistant</a></li></ul></div></div>
</div>
<div id="tix-attendees">
  <ul class="tix-attendee-list tix-columns-3">
    <li>
      <img alt="" src="../source/assets/images/placeholder-96x96.jpg" 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="../source/assets/images/placeholder-96x96.jpg" 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="../source/assets/images/placeholder-96x96.jpg" 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="../source/assets/images/placeholder-96x96.jpg" 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.3 #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 Europe 2018</a></p>
    <p class="site-description">June 14-16, Belgrade, Serbia | #WCEU</p>
  </div><!-- .site-branding -->
  <!-- #site-navigation -->
</header><!-- #masthead -->

6.4 #6.buttons Buttons

Button variations and usage examples.

Examples
Default styling
:hover
Hover state
:focus
Focus state
.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="../source/assets/images/placeholder-40x40.jpg" srcset="../source/assets/images/placeholder-40x40.jpg" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="../source/assets/images/placeholder-40x40.jpg" 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="../source/assets/images/placeholder-40x40.jpg" srcset="../source/assets/images/placeholder-40x40.jpg" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="../source/assets/images/placeholder-40x40.jpg" 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="../source/assets/images/placeholder-40x40.jpg" srcset="../source/assets/images/placeholder-40x40.jpg" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="../source/assets/images/placeholder-40x40.jpg" 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="../source/assets/images/placeholder-40x40.jpg 2x" class="avatar avatar-40 photo" height="40" width="40" originals="40" src-orig="../source/assets/images/placeholder-40x40.jpg" 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.7 #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="custom-header">
      <div class="site-branding">
        <p class="site-title"><a href="#" rel="home">WordCamp Europe 2018</a></p>
        <p class="site-description">June 14-16, Belgrade, Serbia | #WCEU</p>
      </div><!-- .site-branding -->
    </div>
    <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.8.1 #6.headings.return-top Heading

Link inside a heading that anchors the user to top of the page

Example

Heading Return to top

<h2 class="heading-top" id="main">Heading <a href="#main">Return to top</a></h2>

6.9 #6.helpers Helpers

Styles that can be used in the WordPress editor

6.9.1 #6.helpers.grid Grid

Converts children to a grid layout. Use modifiers grid-two, grid-three or grid-four to create a column layout.

Example

Hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudan atibus commodi.

Hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi.

Hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi.

Hello world

Lorem consectetur adipisicing elit. Minus laudan atibus commodi.

Hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus us laudantium maiores nobis voluptatibus commodi.

Hello world

Lorem ipsum dodip isicing elit. Minus laudantium maiores nobis voluptatibus commodi.

<div class="grid grid-wide grid-three">
  <div class="outline">
    <h3>Hello world</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudan atibus commodi.</p>
  </div>
  <div class="note">
    <h3>Hello world</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi.</p>
  </div>
  <div class="highlight">
    <h3>Hello world</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi.</p>
  </div>
  <div class="outline">
    <h3>Hello world</h3>
    <p>Lorem consectetur adipisicing elit. Minus laudan atibus commodi.</p>
  </div>
  <div class="note">
    <h3>Hello world</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus us laudantium maiores nobis voluptatibus commodi.</p>
  </div>
  <div class="highlight">
    <h3>Hello world</h3>
    <p>Lorem ipsum dodip isicing elit. Minus laudantium maiores nobis voluptatibus commodi.</p>
  </div>
</div>

6.9.2 #6.helpers.highlight Highlight

Block of content with background color

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.

<div class="highlight">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.</p>
</div>

6.9.3 #6.helpers.note Note

Block of content with background color

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.

<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.</p>
</div>

6.9.4 #6.helpers.outline Outline

Block of content with border

Example

Hello world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.

<div class="outline">
  <h3>Hello world</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus laudantium maiores nobis voluptatibus commodi, aspernatur animi optio dicta ullam hic, nisi, assumenda facere tenetur explicabo architecto repellendus, minima. Aut, eligendi.</p>
</div>
Example
<img class="size-full" src="../source/assets/images/placeholder-800x200.jpg" />

6.11 #6.main Main

Main section of the site

Example

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sequi cum, aut, dolorum quam recusandae eum velit? Esse assumenda perspiciatis, reiciendis? At provident vero harum, id, rem sunt beatae ratione!

<div id="content" class="site-content">

  <div id="content-widgets">

    <div id="content-widget-1" class="content-widgets-block">

      <aside class="widget widget_text" id="text-3">
        <h1 class="widget-title">Get your #wceu Early Bird tickets</h1>
        <div class="textwidget">
          <p>And receive a special, limited-edition swag item</p>
          <a class="realistic-ticket" href="#">
            <span class="realistic-ticket__part-left">
              <span class="realistic-ticket__info-label">1000 tickets released</span>
              <span class="realistic-ticket__info-action">Get your ticket today!</span>
            </span>
            <span class="realistic-ticket__part-right">
              <span class="realistic-ticket__info-event">WordCamp Europe 2018</span>
            <span>
          </a>
        </div>
      </aside>

    </div>

  </div>

  <div id="primary" class="content-area" role="main">

    <article>

      <h1>Lorem ipsum dolor sit amet.</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sequi cum, aut, dolorum quam recusandae eum velit? Esse assumenda perspiciatis, reiciendis? At provident vero harum, id, rem sunt beatae ratione!</p>

    </article>

  </div>

  <div id="secondary" class="widget-area" role="complementary">

    <div id="primary-sidebar">

      <section id="blog_subscription-3" class="widget jetpack_subscription_widget">
        <h2 class="widget-title">Subscribe to WordCamp Europe 2017 News by email</h2>
        <form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-3">
          <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="hidden" name="action" value="subscribe">
            <input type="hidden" name="source" value="https://wceu2017.wc.dev.kau-boys.com/location/">
            <input type="hidden" name="sub-type" value="widget">
            <input type="hidden" name="redirect_fragment" value="blog_subscription-3">
            <input type="hidden" id="_wpnonce" name="_wpnonce" value="f9cf755eb4">            <input type="submit" value="Sign me up!" name="jetpack_subscriptions_widget">
          </p>
        </form>
      </section>

    </div>

  </div>

</div>

6.12 #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.13 #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="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo avatar-default" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo avatar-default" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo avatar-default" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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.15 #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><img class="size-full" src="../source/assets/images/placeholder-1400x700.jpg" /></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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas pariatur qui cupiditate aperiam sit delectus, velit dignissimos amet ipsam nihil, sed nesciunt quaerat quam voluptas et! Ea error illum omnis cum aliquam modi culpa vel laudantium sunt, voluptatum aspernatur sed, adipisci quasi at architecto amet iusto veniam magnam. Nobis necessitatibus placeat similique deserunt, sapiente dolorem hic reiciendis doloribus natus? Nihil sapiente, commodi debitis! Et dicta sit, culpa illo facilis magnam.

Speaker

Categories
<article id="post-4963" class="post-4963 wcb_session type-wcb_session status-private hentry wcb_track-workshop-3 wcb_session_category-workshop-3h">
  <header class="entry-header">
    <h1 class="entry-title">Lorem ipsum dolor sit</h1> </header>

  <div class="entry-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas pariatur qui cupiditate aperiam sit delectus, velit dignissimos amet ipsam nihil, sed nesciunt quaerat quam voluptas et! Ea error illum omnis cum aliquam modi culpa vel laudantium sunt, voluptatum aspernatur sed, adipisci quasi at architecto amet iusto veniam magnam. Nobis necessitatibus placeat similique deserunt, sapiente dolorem hic reiciendis doloribus natus? Nihil sapiente, commodi debitis! Et dicta sit, culpa illo facilis magnam.</p>
<h2 class="session-speakers">Speaker</h2><ul id="session-speaker-names"><li><a href="#">Annie Johnson</a></li></ul><span class="session-categories-links"><span class="screen-reader-text">Categories</span> <a href="https://2018.europe.wordcamp.org/session-category/workshop-3h/" rel="tag">Workshop 3h</a></span>  </div>

  <footer class="entry-footer">
    <span class="edit-link"><a class="post-edit-link" href="https://2018.europe.wordcamp.org/wp-admin/post.php?post=4963&amp;action=edit&amp;classic-editor">Edit <span class="screen-reader-text">Lorem ipsum dolor.</span></a></span> </footer>
</article>
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="../source/assets/images/placeholder-96x96.jpg" srcset="../source/assets/images/placeholder-96x96.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-96x96.jpg" 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="../source/assets/images/placeholder-96x96.jpg" srcset="../source/assets/images/placeholder-96x96.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-96x96.jpg" 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="../source/assets/images/placeholder-96x96.jpg" srcset="../source/assets/images/placeholder-96x96.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-96x96.jpg" 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="../source/assets/images/placeholder-96x96.jpg" srcset="../source/assets/images/placeholder-96x96.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-96x96.jpg" 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="../source/assets/images/placeholder-96x96.jpg" srcset="../source/assets/images/placeholder-96x96.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-96x96.jpg" 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 Fernandez Guerilla de la Cruz

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Session

<article id="post-4014" class="wcb_speaker type-wcb_speaker status-publish hentry wcb_speaker_group-full-session-speaker">
    <header class="entry-header">
        <h1 class="entry-title">Michelle Gutierrez Fernandez Guerilla de la Cruz</h1>	
    </header>
    <div class="entry-content">
        <div class="speaker-avatar"><img alt='' src='../source/assets/images/placeholder-100x100.jpg' class='avatar avatar-320 photo' height='320' width='320' /></div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <h2 class="speaker-sessions">Session</h2>
            <ul id="speaker-session-names">
                <li><a href="https://2017.europe.wordcamp.org/session/selfish-accessibility/">Selfish Accessibility</a></li>
            </ul>	
    </div>
	<footer class="entry-footer"></footer>
</article>

<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="https://2017.europe.wordcamp.org/speaker/rian-rietveld/" rel="prev">Rian Rietveld</a></div><div class="nav-next"><a href="https://2017.europe.wordcamp.org/speaker/heather-burns/" rel="next">Heather Burns</a></div></div>
</nav>
Example

Michelle Gutierrez Fernandez Guerilla de la Cruz

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 Fernandez Guerilla de la Cruz</a></h2>
    <div class="wcorg-speaker-description">
      <img alt="" src="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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="../source/assets/images/placeholder-100x100.jpg" srcset="../source/assets/images/placeholder-100x100.jpg" class="avatar avatar-100 photo grav-hashed grav-hijack" height="100" width="100" originals="100" src-orig="../source/assets/images/placeholder-100x100.jpg" 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.22 #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>

6.23.3 #6.widget.text-tickets-cta Widget: Tickets

Custom tickets call–to–action widget displayed on the homepage

Example
<div id="secondary">
  <aside class="widget widget_text" id="text-4">
    <h1 class="widget-title">Get your #wceu Early Bird tickets</h1>
    <div class="textwidget">
      <p>And receive a special, limited-edition swag item</p>
      <a class="realistic-ticket" href="#">
        <span class="realistic-ticket__part-left">
          <span class="realistic-ticket__info-label">1000 tickets released</span>
          <span class="realistic-ticket__info-action">Get your ticket today!</span>
        </span>
        <span class="realistic-ticket__part-right">
          <span class="realistic-ticket__info-event">WordCamp Europe 2018</span>
        <span>
      </a>
    </div>
  </aside>
</div>

6.24 #6.widget-areas Widgets

Showing all available widget areas on the page

Example
YOUR CONTENT
Before Content (All Pages except Homepage)
Before Content (Homepage) Area 1
Before Content (Homepage) Area 2
Before Content (Homepage) Area 3
Before Content (Homepage) Area 4
Before Content (Homepage) Area 5
Before Content (Day Of) Area 1
Before Content (Day Of) Area 2
Before Content (Day Of) Area 3
Before Content (Day Of) Area 4
Before Content (Day Of) Area 5
<div id="page" class="site styleguide-widget-areas">
	<header id="masthead" class="site-header" role="banner">
		Logo and branding
        <div id="header-widgets">
            <div id="header-widget-1" class="header-widgets-block">
                Header Widget Area 1
            </div>
            <div id="header-widget-2" class="header-widgets-block">
                Header Widget Area 2
            </div>
            <div id="header-widget-3" class="header-widgets-block">
                Header Widget Area 3
            </div>
            <div id="header-widget-4" class="header-widgets-block">
                Header Widget Area 4
            </div>
            <div id="header-widget-5" class="header-widgets-block">
                Header Widget Area 5
            </div>
        </div>
	</header>
    <div id="content" class="site-content">
        <div id="primary" class="content-area">
            YOUR CONTENT
        </div>
        <div id="content-widgets">
			<div id="content-widget-1" class="content-widgets-block">
				Before Content (All Pages except Homepage)
			</div>
			<div id="content-widget-2" class="content-widgets-block">
				Before Content (Homepage) Area 1
			</div>
            <div id="content-widget-3" class="content-widgets-block">
				Before Content (Homepage) Area 2
			</div>
            <div id="content-widget-4" class="content-widgets-block">
				Before Content (Homepage) Area 3
			</div>
            <div id="content-widget-5" class="content-widgets-block">
				Before Content (Homepage) Area 4
			</div>
            <div id="content-widget-6" class="content-widgets-block">
				Before Content (Homepage) Area 5
			</div>
            <div id="content-widget-7" class="content-widgets-block">
				Before Content (Day Of) Area 1 
			</div>
            <div id="content-widget-8" class="content-widgets-block">
				Before Content (Day Of) Area 2 
			</div>
            <div id="content-widget-9" class="content-widgets-block">
				Before Content (Day Of) Area 3 
			</div>
            <div id="content-widget-10" class="content-widgets-block">
				Before Content (Day Of) Area 4 
			</div>
            <div id="content-widget-11" class="content-widgets-block">
				Before Content (Day Of) Area 5 
			</div>
		</div>
        <aside id="secondary" class="widget-area" role="complementary">
			<div id="primary-sidebar">
                Primary Sidebar
            </div>
            <div id="secondary-sidebar">
                Secondary Sidebar
            </div>
        </aside>
    </div>
    <footer id="colophon" class="site-footer" role="contentinfo">
        <div id="footer-widgets">
            <div id="footer-widget-1" class="footer-widgets-block">
				Footer Widget Area 1
			</div>
            <div id="footer-widget-2" class="footer-widgets-block">
				Footer Widget Area 2
			</div>
            <div id="footer-widget-3" class="footer-widgets-block">
				Footer Widget Area 3
			</div>
            <div id="footer-widget-4" class="footer-widgets-block">
				Footer Widget Area 4
			</div>
            <div id="footer-widget-5" class="footer-widgets-block">
				Footer Widget Area 5
			</div>
        </div>
    </footer>
</div>