The schedule is based on our custom HTML structure – it is a little bit more complex than other typography elements but it was necessary to create a proper HTML structure. We will describe the code based on the below example:

<dl class="gk-schedule">
<dt><strong>Friday, </strong>April 27, 2012</dt>
<dd>
<strong>10:00-12:00</strong>
<div class="gkcol1">
<div><span>Registration</span></div>
</div>
</dd>
<dd>
<strong>12:00-14:00</strong>
<div class="gkcol2">
<div>Location:<strong> San Jose, Scene 1</strong><a href="#">The Born This Way Ball</a> <small>Lady Gaga</small></div>
<div>Location:<strong> San Jose, Scene 2</strong><a href="#">Battle Born Tour</a> <small>The Killers</small></div>
</div>
</dd>
</dl>

As we can see the structure is based on the definition list (dl) with class gk-schedule. The definition term elements are used to create the date (you can highlight words in this element using the strong elements). The content of the specific hours for a day are defined in the definition description elements (dd). As it was listed – every dd element starts with the strong element – it is the period of time for a specific elements then the next element is the div with class gkcolX where is is a number from range 1-5 – here you can specify up to 5 columns with the events.

Every event can contain few informations:

• place (as a strong element)
• event name (as a link – usually to the longer description)
• and small additional information (in the small element)