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

Award Cards

These are for use when displaying degree or certificate information.

Degree Award Cards

Card Header

Award Title

View Degree Plan for Accounting AAS

Campuses:

  • Brookhaven
  • Cedar Valley
  • Eastfield
  • El Centro
  • Mountain View
  • North Lake
  • Richland
  • Code below must be nested inside of a bootstrap column (either <div class="col-sm-12"> or <div class="col-sm-6">)
  • "Card Header" divs for degrees should be .bg-cprimary-lt and .text-cprimary-dk
  • The type of degree should be written out in the "Card Header" div. For example, "Degree, Associate of Applied Science" for AAS, or "Degree, Associate of Science" for AS, etc.
  • The "Award Title" should reflect what the title of the award is in the catalog
  • The "Award Title" is wrapped inside of a div with a special height class that controls its height at various breakpoints, so all of the cards in a given sub-listing are sized uniformly (though this is more relevant to Certificate cards than Degree cards)
  • Degrees do not have Gainful Employment Information so there is no link for it.
  • The number of listed colleges will vary depending on the award itself.
  • The college listings area is wrapped inside of a div with a special height class that controls its height at various breakpoints, so all of the cards in a given sub-listing are sized uniformly (though this is more relevant to Certificate cards than Degree cards)

Accessibility Note! In the code for the "View Degree Plan" button we have added an extra piece of code to be read by screen readers only: View Degree Plan<span class="sr-only"> for Accounting AAS</span>

HTML Code (for Degree Cards)

<div class="card award-box shadow-1">
    <div class="text-cprimary-dk card-header award-degree bg-cprimary-lt">
      <div class="row">
        <div class="col-xs-8 card-header-left">[DEGREE TYPE]</div>
      </div>
    </div>
    <div class="card-block">
      <div class="height-sm-50">
        <h3 class="h4 card-title">[AWARD TITLE]</h3>
      </div>
      <ul class="list-icons">
      <li class="briefcase">
        <a href="#">Gainful Employment Information <span class="sr-only">for [AWARD TITLE]</span></a>
      </li>
        <li class="clock-o">
           <strong>[4] <a href="#semesters">semesters</a></strong> to complete<br/></li>
        <li class="money">
           <strong>[$3,540]</strong> <a href="#tuition">tuition</a></li>
      </ul>
      <a class="button bg-cprimary button-mn button-block" href="[DEGREE PLAN IN CATALOG]">View Degree Plan<span class="sr-only"> for [AWARD TITLE]</span>
        <span class="ico fas fa-arrow-circle-right" aria-hidden="true"></span></a> </div>
      <div class="card-footer">
        <h4 class="card-footer-title">Campuses:</h4>
        <ul class="list-inline">
          <li class="BHC">Brookhaven</li>
          <li class="CVC">Cedar Valley</li>
          <li class="EFC">Eastfield</li>
          <li class="ECC">El Centro</li>
          <li class="MVC">Mountain View</li>
          <li class="NLC">North Lake</li>
          <li class="RLC">Richland</li>
        </ul>
      </div>
    </div>
  </div>

Certificate Award Cards

Certificate, Level 1

Accounting Clerk Certificate

View Degree Plan for Accounting Clerk Certificate

Campuses:

  • Brookhaven
  • Cedar Valley
  • Eastfield
  • El Centro
  • Mountain View
  • North Lake
  • Richland
  • Code below must be nested inside of a bootstrap column (<div class="col-sm-6">)
  • "Card Header" divs for certificates should be .bg-csecondary-lt and .secondary-dk-font
  • The type of certificate should be written out in the "Card Header" div. For example, "Certificate, Level 1," or "Certificate, Advanced Technical"
  • The "Award Title" should reflect what the title of the award is in the catalog
  • The "Award Title" is wrapped inside of a div with a special height class that controls its height at various breakpoints, so all of the cards in a given sub-listing are sized uniformly
  • The number of listed colleges will vary depending on the award itself.
  • The college listings area is wrapped inside of a div with a special height class that controls its height at various breakpoints, so all of the cards in a given sub-listing are sized uniformly

Accessibility Note! In the code for the "Gainful Employment Information" link we have added an extra piece of code to be read by screen readers only: <span class="sr-only">for Accounting Clerk Certificate</span>

Accessibility Note! In the code for the "View Degree Plan" button we have added an extra piece of code to be read by screen readers only: View Degree Plan<span class="sr-only"> for Accounting AAS</span>

HTML Code

<div class="card award-box shadow-1">
    <div class="csecondary-dk-font card-header award-certificate bg-csecondary-lt">
      <div class="row">
        <div class="col-xs-8 card-header-left">[CERTIFICATE TYPE]</div>
      </div>
    </div>
    <div class="card-block">
      <div class="height-sm-50">
        <h3 class="h4 card-title">[AWARD TITLE]</h3>
      </div>
      <ul class="list-icons">
        <li class="briefcase"><a href="#">Gainful Employment Information <span class="sr-only">for [AWARD TITLE]</span></a></li>
        <li class="clock-o"><strong>[4] <a href="#semesters">semesters</a></strong> to complete<br/></li>
        <li class="money"><strong>[$3,540]</strong> <a href="#tuition">tuition</a></li>
      </ul>
      <a class="button bg-cprimary button-mn button-block" href="[DEGREE PLAN IN CATALOG]">View Degree Plan<span class="sr-only"> for [AWARD TITLE]</span> <span class="ico fas fa-arrow-circle-right" aria-hidden="true"></span></a> </div>
      <div class="card-footer">
        <h4 class="card-footer-title">Campuses:</h4>
        <ul class="list-inline">
          <li class="BHC">Brookhaven</li>
          <li class="CVC">Cedar Valley</li>
          <li class="EFC">Eastfield</li>
          <li class="ECC">El Centro</li>
          <li class="MVC">Mountain View</li>
          <li class="NLC">North Lake</li>
          <li class="RLC">Richland</li>
        </ul>
      </div>
    </div>
  </div>

Components