Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Event Cards

The Event Card can be used to make up schedules or agendas for conferences. It can also be used as a stand-alone component when giving information about a specific event or speaker. Event Cards are flexible and have multiple pieces that can be mixed-and-matched.

  • Basic Event Card
  • Event Card w/ Description
  • Event Card w/ Participant (Speaker)
  • Event Card w/ Sub-Event (for instances when event cards need to be broken down into parts)
  • Event Card w/ Footer

Basic Event Card

All Event Cards have, at the very least, .event-head which can contain:

  • Start time (end time is optional)
  • Event title
  • Event location

9:00 a.m.

Keynote Presentation: To Infinity And Beyond
Lone Star Lobby 
<div class="event-card shadow-">
    <div class="event-head">
        <div class="row bg-cprimary-lt">
        <div class="col-md-2 col-sm-3 event-time">
            <h3 class="h4">9:00 a.m.</h3></div>
        <div class="col-md-7 col-sm-9 event-card-title">
            <span class="h4">Keynote Presentation: To Infinity And Beyond</span> </div>
        <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
            <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a> </div>
        </div>
    </div>
</div>

Event Card w/ Description

9:00 a.m.

Keynote Presentation: To Infinity And Beyond
Lone Star Lobby

Kevin is a thought leader in the field of sustainability, having taught at over seven different universities and written four acclaimed books, including: “Return on Sustainability: How Business Can Increase Profitability & Address Climate Change in an Uncertain Economy,” “Making Sustainability Stick,” and “An Introduction to Sustainable Business.” He is on the cutting edge of online teaching, as he has successfully “flipped the classroom” with his multimedia online materials and videos that have made the online experience much more student-friendly.

<div class="event-card shadow-">
    <div class="event-head">
        <div class="row bg-cprimary-lt">
            <div class="col-md-2 col-sm-3 event-time">
              <h3 class="h4">9:00 a.m.</h3></div>
            <div class="col-md-7 col-sm-9 event-card-title">
              <span class="h4">Keynote Presentation: To Infinity And Beyond</span> </div>
            <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
              <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a> </div>
            </div>
            </div>
            <div class="event-body">
            <div class="row">
            <div class="col-md-9 col-md-offset-2 col-sm-9 col-sm-offset-3">
              <div class="event-description">
                <p>Kevin is a thought leader...</p>
              </div>
            </div>
        </div>
    </div>
</div>

Event Card w/ Participant (Speaker)

9:00 a.m.

Keynote Presentation: To Infinity And Beyond
Lone Star Lobby
  • Dr. Kevin Wilhelm CEO, Sustainable Business Consulting 
<div class="event-card shadow-">
    <div class="event-head">
        <div class="row bg-cprimary-lt">
            <div class="col-md-2 col-sm-3 event-time">
              <h3 class="h4">9:00 a.m.</h3></div>
            <div class="col-md-7 col-sm-9 event-card-title">
              <span class="h4">Keynote Presentation: To Infinity And Beyond</span> </div>
            <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
              <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a> </div>
            </div>
            </div>
            <div class="event-body">
            <div class="row">
            <div class="col-md-9 col-md-offset-2 col-sm-9 col-sm-offset-3">
              <ul class="list-unstyled">
                <li class="event-participant">
                  <img src="https://via.placeholder.com/100" class="img-circle float-left width-75" alt="">
                  <div class="participant-name">Dr. Kevin Wilhelm <span class="participant-title">CEO, Sustainable Business Consulting</span> </div>
                </li>
              </ul>
            </div>
        </div>
    </div>
</div>

Event Card w/ Footer

9:00 a.m.

Keynote Presentation: To Infinity And Beyond
Lone Star Lobby 
<div class="event-card shadow-">
    <div class="event-head">
        <div class="row bg-cprimary-lt">
            <div class="col-md-2 col-sm-3 event-time">
              <h3 class="h4">9:00 a.m.</h3></div>
            <div class="col-md-7 col-sm-9 event-card-title">
              <span class="h4">Keynote Presentation: To Infinity And Beyond</span> </div>
            <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
                <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a>
            </div>
        </div>
    </div>
    <div class="event-footer">
        <div class="row">
            <div class="col-md-9 col-md-offset-2 col-sm-9 col-sm-offset-3">
              <ul class="list-inline list-unstyled">
                <li><a href="#"><span class="text-cprimary ico fas fa-download ico-left" aria-hidden="true"></span>Download Slides</a></li>
                <li><a href="#"><span class="text-cprimary ico fas fa-play-circle ico-left" aria-hidden="true"></span>Watch Video Recording</a></li>
              </ul>
            </div>
        </div>
    </div>
</div>

Event Card w/ Sub-Events

Noon

General Session
Lone Star Lobby

A Conversation with Dr. Joe May

  • Dr. Joe May Chancellor, Dallas College
  • Dr. Robert Mong President, UNT at Dallas

Keynote Speaker

Chancellor's Award Presentation

Closing Remarks

<div class="event-card shadow-">
    <div class="event-head">
        <div class="row bg-cprimary-lt">
            <div class="col-md-2 col-sm-3 event-time">
                <h3 class="h4">Noon</h3></div>
            <div class="col-md-7 col-sm-9 event-card-title">
                <span class="h4">General Session</span> </div>
            <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
                  <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a> </div>
            </div>
        </div>
        <div class="event-body">
        <div class="row">
            <div class="col-md-9 col-md-offset-2 col-sm-9 col-sm-offset-3">
                  <div class="sub-event">
                        <h4 class="h5 page-header">A Conversation with Dr. Joe May</h4>
                        <ul class="row list-unstyled">
                            <li class="col-md-12 event-participant">
                                <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                                <div class="participant-name">Dr. Joe May <span class="participant-title">Chancellor, Dallas College</span> </div>
                            </li>
                            <li class="col-md-12 event-participant">
                                <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                                <div class="participant-name">Dr. Robert Mong <span class="participant-title">President, UNT at Dallas</span> </div>
                          </li>
                    </ul>
              </div>
              <div class="sub-event">
                <h4 class="h5 page-header">Keynote Speaker</h4>
                <ul class="row list-unstyled">
                  <li class="col-md-12 event-participant">
                    <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                    <div class="participant-name">
                      <a href="#">Wes Moore</a>
                      <span class="participant-title">CEO, Robin Hood</span> </div>
                  </li>
                </ul>
              </div>
              <div class="sub-event">
                <h4 class="h5 page-header">Chancellor's Award Presentation</h4></div>
              <div class="sub-event">
                <h4 class="h5 page-header">Closing Remarks</h4></div>
            </div>
        </div>
    </div>
</div>

Full Event Card

Noon to 9:00 a.m.

General Session
Lone Star Lobby

Kevin is a thought leader in the field of sustainability, having taught at over seven different universities and written four acclaimed books, including: “Return on Sustainability: How Business Can Increase Profitability & Address Climate Change in an Uncertain Economy,” “Making Sustainability Stick,” and “An Introduction to Sustainable Business.” He is on the cutting edge of online teaching, as he has successfully “flipped the classroom” with his multimedia online materials and videos that have made the online experience much more student-friendly.

Greetings from the Dallas College Board of Trustees

  • Diana Flores Chair, Dallas College Board of Trustees

A Conversation with Dr. Joe May

  • Dr. Joe May Chancellor, Dallas College
  • Dr. Robert Mong President, UNT at Dallas

Keynote Speaker

Words from the Foundation Board

  • Debbie Taylor Chair, Dallas College Foundation Board

Chancellor's Award Presentation

Employee Giving Campaign Announcement

Closing Remarks

<div class="event-card shadow-">
    <div class="event-head">
        <div class="row bg-cprimary-lt">
          <div class="col-md-2 col-sm-3 event-time">
            <h3 class="h4">Noon <span>to 9:00 a.m.</span></h3></div>
          <div class="col-md-7 col-sm-9 event-card-title">
            <span class="h4">General Session</span> </div>
          <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
            <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a> </div>
        </div>
    </div>
    <div class="event-body">
        <div class="row">
          <div class="col-md-9 col-md-offset-2 col-sm-9 col-sm-offset-3">
            <ul class="row list-unstyled">
              <li class="col-md-6 event-participant">
                <img src="https://via.placeholder.com/100" class="img-circle float-left width-75" alt="">
                <div class="participant-name"><a href="#">Professer Bob Newhart</a> <span class="participant-title">CEO, Sustainable Business Consulting</span> </div>
              </li>
              <li class="col-md-6 event-participant">
                <img src="https://via.placeholder.com/100" class="img-circle float-left width-75" alt="">
                <div class="participant-name">Kevin Wilhelm <span class="participant-title">CEO, <a href="#">Sustainable Business Consulting</a></span> </div>
              </li>
            </ul>
            <div class="event-description">
              <p>Kevin is a thought leader in the field of sustainability, having taught at over seven different universities and written four acclaimed books, including: “Return on Sustainability: How Business Can Increase Profitability &amp; Address Climate Change in an Uncertain Economy,” “Making Sustainability Stick,” and “An Introduction to Sustainable Business.” He is on the cutting edge of online teaching, as he has successfully “flipped the classroom” with his multimedia online materials and videos that have made the online experience much more student-friendly.</p>
            </div>
            <div class="sub-event">
              <h4 class="h5 page-header">Greetings from the Dallas College Board of Trustees<br></h4>
              <ul class="row list-unstyled">
                <li class="col-md-12 event-participant">
                  <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                  <div class="participant-name">Diana Flores
                    <span class="participant-title">Chair, Dallas College Board of Trustees</span> </div>
                </li>
              </ul>
            </div>
            <div class="sub-event">
              <h4 class="h5 page-header">A Conversation with Dr. Joe May</h4>
              <ul class="row list-unstyled">
                <li class="col-md-12 event-participant">
                  <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                  <div class="participant-name">Dr. Joe May
                    <span class="participant-title">Chancellor, Dallas College</span> </div>
                </li>
                <li class="col-md-12 event-participant">
                  <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                  <div class="participant-name">Dr. Robert Mong
                    <span class="participant-title">President, UNT at Dallas</span> </div>
                </li>
              </ul>
            </div>
            <div class="sub-event">
              <h4 class="h5 page-header">Keynote Speaker</h4>
              <ul class="row list-unstyled">
                <li class="col-md-12 event-participant">
                  <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                  <div class="participant-name">
                    <a href="#">Wes Moore</a>
                    <span class="participant-title">CEO, Robin Hood</span> </div>
                </li>
              </ul>
            </div>
            <div class="sub-event">
              <h4 class="h5 page-header">Words from the Foundation Board</h4>
              <ul class="row list-unstyled">
                <li class="col-md-12 event-participant">
                  <img src="https://via.placeholder.com/100" class="img-circle float-left" alt="">
                  <div class="participant-name">Debbie Taylor
                    <span class="participant-title">Chair, Dallas College Foundation Board</span> </div>
                </li>
              </ul>
            </div>
            <div class="sub-event">
              <h4 class="h5 page-header">Chancellor's Award Presentation</h4></div>
            <div class="sub-event">
              <h4 class="h5 page-header">Employee Giving Campaign Announcement</h4></div>
            <div class="sub-event">
              <h4 class="h5 page-header">Closing Remarks</h4></div>
          </div>
        </div>
    </div>
    <div class="event-footer">
        <div class="row">
          <div class="col-md-9 col-md-offset-2 col-sm-9 col-sm-offset-3">
            <ul class="list-inline list-unstyled">
              <li>
                <a href="#"><span class="text-cprimary ico fas fa-download ico-left" aria-hidden="true"></span>Download Slides</a></li>
              <li>
                <a href="#"><span class="text-cprimary ico fas fa-play-circle ico-left" aria-hidden="true"></span>Watch Video Recording</a></li>
            </ul>
          </div>
        </div>
    </div>
</div>

Components