Sample - Course Detail (Panel)

This is an alternative layout for the course detail page. See also Course Details main page for more information on the usage and options for this module.

Organizer

Thu, 04/21/16 8:00 p.m. Add to calendar
123 Address, City, State

Registration Type: State of CA Employee
Cost: $35 each

Course Details

Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Presenter:
First Middle Last

Presenter bio - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Participants will receive:

Certificate of Participation
One hour MCLE credit
One hour HRCI credit

<article class="course-detail"> 
    <header class="header"><h1><span class="ca-gov-icon-arrow-down"></span> Course Detail Title</h1></header>
    <strong>Organizer</strong>
    <p class="date-time"><time datetime="2016-04-21 20:00">Thu, 04/21/16 8:00 p.m.</time> <span class="ca-gov-icon-calendar"></span> <a href="">Add to calendar</a><br>
    <span class="ca-gov-icon-road-pin"></span> <a href="">123 Address, City, State</a></p>
    <p>Registration Type: State of CA Employee<br>
    Cost: $35 each</p>
    <div class="panel panel-overstated">
        <div class="panel-heading">
            <h4>Course Details</h4>
            <div class="options">
                <a href="" class="btn btn-default">Register</a>
            </div>
        </div>
        <div class="panel-body">
            <div class="description">
            <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
            <div class="presenter">
                <p><strong>Presenter:</strong><br>
                <strong class="presenter-name">First Middle Last</strong></p>
                <p><img src="images/75x75.gif" class="img-left" alt="">Presenter bio - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
            </div>
            <strong>Participants will receive:</strong>
            <ul class="list-understated">
                <li>Certificate of Participation</li>
                <li>One hour MCLE credit</li>
                <li>One hour HRCI credit</li>
            </ul>
        </div>
    </div>   
</article>

<article class="course-detail" itemscope itemtype="http://schema.org/Event">
    <div class="header">
        <h1 itemprop="name"><span class="ca-gov-icon-arrow-down"></span> Course Name or Title</h1>
    </div>
    <strong>Organizer</strong>
    <p class="date-time"><time itemprop="startDate" datetime="2016-04-21T20:00:00-08:00">Thu, 04/21/16 8:00 p.m.</time> <span class="ca-gov-icon-calendar"></span> <a href="">Add to calendar</a><br>
    <span class="ca-gov-icon-road-pin"></span> <a href="" itemprop="location" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">123 Address</span>, <span itemprop="addressLocality">City</span>, <span itemprop="addressRegion">State</span></a></p>
    <p itemprop="offers" itemscope itemtype="http://schema.org/Offer">Registration Type: State of CA Employee<br>
    Cost: <span itemprop="price">$35</span> each</p>
    <div class="panel panel-overstated">
        <div class="panel-heading">
            <h4>Course Details</h4>
            <div class="options">
                <a href="" class="btn btn-default">Register</a>
            </div>
        </div>
        <div class="panel-body">
            <div class="description" itemprop="description">
            <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
            <div class="presenter" itemprop="performer" itemscope="" itemtype="http://schema.org/Person">
                <p><strong>Presenter:</strong><br>
                <strong class="presenter-name"><span itemprop="givenName">First</span> <span itemprop="additionalName">Middle</span> <span itemprop="familyName">Last</span></strong></p>
                <div itemprop="description">
                    <p><img src="images/75x75.gif" class="img-left" alt="">Presenter bio - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                </div>
            </div>
            <strong>Participants will receive:</strong>
            <ul class="list-understated">
                <li>Certificate of Participation</li>
                <li>One hour MCLE credit</li>
                <li>One hour HRCI credit</li>
            </ul>
        </div>
    </div>
</article>