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

Department Cards

Department Cards are used to standardize the appearance of departmental contact information including location, phone numbers, email addresses, office hours, social media links, etc.

Department Cards are available in two modes:

  • Standard Mode - to be used when it is the only department card on a page
  • Quiet Mode - to be used when multiple contact cards (like in accordions) are used on a page

Example of Department Card (Standard Mode)

Mountain View Counseling Center

Visit Us

  • Student Services Center, S-2076
  • Mountain View
    4849 W. Illiniois Ave.
    Dallas, TX 75211

Call or Email Us

Office Hours

  • Mon-Fri: 8:30 a.m. - 4:30 p.m.
  • Sat-Sun: Closed
<div class="pgs-dept-card">
   <h2 class="pgs-dept-card__title">[DEPARTMENT TITLE]</h2>
   <div class="row">
      <div class="col-md-4 col-sm-12 pgs-dept-card__col">
         <h3 class="pgs-dept-card__subhead">Visit Us</h3>
         <ul class="fa-ul">
            <li>
               <span class="fa-li"><span aria-hidden="true" class="ico fas fa-university"></span></span>[BUILDING NAME], [BLDG LETTER]-[ROOM NUMBER]</li>
            <li>
               <span class="fa-li"><span aria-hidden="true" class="ico fas fa-map-marker-alt"></span></span><!-- Reusable Content Goes Here --></li>
         </ul>
      </div>
      <div class="col-md-4 col-sm-6 pgs-dept-card__col">
         <h3 class="pgs-dept-card__subhead">Call or Email Us</h3>
         <ul class="fa-ul">
            <li>
               <span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>[123-456-7890]</li>
            <li>
               <span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="[EMAIL]@dcccd.edu">Email [DEPT TITLE]</a></li>
         </ul>
      </div>
      <div class="col-md-4 col-sm-6 pgs-dept-card__col">
         <h3 class="pgs-dept-card__subhead">Office Hours [OR HOURS OF OPERATION]</h3>
         <ul class="fa-ul">
            <li>
               <span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Mon-Fri:</strong> 8:30 a.m. - 4:30 p.m.</li>
            <li>
               <span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Sat-Sun:</strong> Closed</li>
         </ul>
      </div>
   </div>
</div>

Here are some notes to be aware of when using Department Cards:

"Visit Us" Column

  • The room location item should be: [Building Name], [Building Letter]-[Room No.] (for example: Thunderduck Hall, T-101)
    • If the campus building doesn't have a name or if the buildings are more commonly referred to by their letter code, then we would use: Building [Building Letter], [Building Letter]-[Room No.] (for example: Building T, T-101)
  • The campus location item should be input using Reusable Content (for easy updates once campus/location/center names are decided). If the location is a previous-college's community campus (for example, Richland College Garland Campus), the address for that community campus should be used and not the address for the main campus.
  • Within the Reusable Content snippet, there should be a link to that campus location on Google Maps.
  • If, for whatever reason, no room location is provided, that list item will be removed. Do not just leave it empty.
  • If a mailing address is provided: Add a new subheading underneath "Visit Us" titled "Mailing Address" and place the mailing address here (even if it is the exact same as the location above). Also, change the icon for the list item to be ico fas fa-mail-bulk

"Call or Email Us" Column

  • If the dept. lists more than one phone: Make sure to specify what each phone number is for in parantheses after the number.
  • If the dept. lists more than one email: Make sure to specify what each email is for within the link text itself.
  • If the dept. contact info also includes social media links: You can change that dept. card subhead to read "Connect With Us" and add extra list items for social media accounts. Make sure to use those the appropriate icons for each social media link.
  • If the dept. lists only a phone number and nothing else: Change the subhead to read "Call Us"
  • If the dept. lists only an email and nothing else: Change the subhead to read "Email Us"
  • If the dept. contact phone is a person's direct number: Put that person's name in parantheses after the phone number.
  • If the dept. contact email is a person's direct email: Put that person's name in the link text itself so it reads "Email John Doe".

Accessibility Note: Email Link Text

If you are listing multiple department cards on one page:

  • Instead of having the email address be the actual link text (as it was previously), we are now making the link text read: "Email [Department Name]." However, having seven links on a page that read the exact same is horrible for accessibility.

Please make sure that the following code is always included when using this new format:

<a href="email@dcccd.edu">Email <span class="sr-only">Brookhaven </span>Health Center</a>

This will ensure that when screen readers read all link text on a page, that the dictation will specify which colleges the email address pertains to.

"Hours" Column

  • We have used the phrases "Office Hours" and "Hours of Operation" interchangeably for the title here. If it is a student-facing service we tend toward "Hours of Operation." If it's a department or office that does not primarily engage with students in person, we tend toward "Office Hours."
  • We use the following abbreviations for days of the week: Mon, Tues, Wed, Thurs, Fri, Sat, Sun
  • We adhere to AP style for the writing of the times. By saying: 8 a.m., 10:30 a.m., Noon, 2:15 p.m.
  • When displaying a time range we type as follows: [Day]-[Day]: [Time] - [Time] (if both times are in a.m or p.m., then it only needs to be included on the 2nd time)
  • If the office or department is closed on Saturday and Sunday, please indicate that with "Sat-Sun: Closed"
  • If there are additional notes or notices about Hours, add another list item and bold the word "Note:" with the note following it. Make sure not to include any icons for this list item
  • If department list different sets of hours (like Fall hours and Spring hours): Change the subheading to read "Fall Office Hours" and display the fall hours there. Then add another subhead below that with "Spring Office Hours" and display the spring hours there.

Accessibility Note: Headings

Be mindful about the heading hierarchy when you place an department card on the page. If you are placing a department card underneath a <h2> element, then the hierarchy should be as follows:

<h2>Heading 2 Already On the Page</h2>
<h3>Department Name</h3>
<h4>Visit Us</h4>
<h4>Call or Email Us</h4>
<h4>Hours of Operation</h4>

If you are placing a department card by itself and not underneath a <h2> element, then the hierarchy should be as follows:

<h2>Department Name</h2>
<h3>Visit Us</h3>
<h3>Call or Email Us</h3>
<h3>Hours of Operation</h3>

Learn more about Headings on WebAIM.org

Quiet Mode

When using a Department Card listed along side other Department Cards (even within a group of accordions) use the QUIET MODE (with no title heading):

Visit Us

  • Student Services Center, S-2076
  • Mountain View
    4849 W. Illiniois Ave.
    Dallas, TX 75211

Call or Email Us

Office Hours

  • Mon-Fri: 8:30 a.m. - 4:30 p.m.
  • Sat-Sun: Closed
  <div class="pgs-dept-card pgs-dept-card--quiet">
    <div class="row">
      <div class="col-md-4 col-sm-12 pgs-dept-card__col">
        <h3 class="pgs-dept-card__subhead">Visit Us</h3>
        <ul class="fa-ul">
          <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-university"></span></span>[BUILDING NAME], [BLDG LETTER]-[ROOM NUMBER]</li>
          <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-map-marker-alt"></span></span><!-- Reusable Content Goes Here --></li>
        </ul>
      </div>
      <div class="col-md-4 col-sm-6 pgs-dept-card__col">
        <h3 class="pgs-dept-card__subhead">Call or Email Us</h3>
        <ul class="fa-ul">
          <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>[123-456-7890]</li>
          <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:[EMAIL]@dcccd.edu">Email [DEPT NAME]</a></li>
        </ul>
      </div>
      <div class="col-md-4 col-sm-6 pgs-dept-card__col">
        <h3 class="pgs-dept-card__subhead">Office Hours[OR Hours of Operation]</h3>
        <ul class="fa-ul">
          <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Mon-Fri:</strong> 8:30 a.m. - 4:30 p.m.</li>
          <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Sat-Sun:</strong> Closed</li>
        </ul>
      </div>
    </div>
  </div>

Example Showing Almost All Variations

Below are extreme examples of Department Cards that hold all sorts of different information:

Variations in Standard Mode

Richland Multicultural Center

Visit Us

  • Thunderduck Hall, T-150
  • Richland
    12800 Abrams Rd.
    Dallas, TX 75243

Mailing Address

  • Multicultural Center
    Richland Campus
    12800 Abrams Rd.
    Dallas, TX 75243

Call or Email Us

Connect with Us

Hours for Academic Advising

  • Mon-Thurs: 8 a.m. - 7 p.m.
  • Fri: 8 a.m. - 5 p.m.
  • Sat-Sun: Closed
  • Note: Closed every Wednesday from 1-4 p.m. for staff meeting, except during peak registration

Hours for International Advising

  • Mon-Thurs: 8:30 a.m. - 4:30 p.m.
  • Fri-Sun: Closed
  • Note: Closed every Wednesday from 1-4 p.m. for staff meeting, except during peak registration

Variations in Quiet Mode

Visit Us

  • Thunderduck Hall, T-150
  • Richland
    12800 Abrams Rd.
    Dallas, TX 75243

Mailing Address

  • Multicultural Center
    Richland Campus
    12800 Abrams Rd.
    Dallas, TX 75243

Call or Email Us

Connect with Us

Hours for Academic Advising

  • Mon-Thurs: 8 a.m. - 7 p.m.
  • Fri: 8 a.m. - 5 p.m.
  • Sat-Sun: Closed
  • Note: Closed every Wednesday from 1-4 p.m. for staff meeting, except during peak registration

Hours for International Advising

  • Mon-Thurs: 8:30 a.m. - 4:30 p.m.
  • Fri-Sun: Closed
  • Note: Closed every Wednesday from 1-4 p.m. for staff meeting, except during peak registration
<div class="pgs-dept-card pgs-dept-card--quiet">
 <div class="row">
   <div class="col-md-4 col-sm-12 pgs-dept-card__col">
     <h4 class="pgs-dept-card__subhead">Visit Us</h3>
     <ul class="fa-ul">
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-university"></span></span>Thunderduck Hall, T-150</li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-map-marker-alt"></span></span><strong>Richland</strong><br>
         12800 Abrams Rd.<br />
         Dallas, TX 75243
       </li>
     </ul>
     <h3 class="pgs-dept-card__subhead">Mailing Address</h3>
     <ul class="fa-ul">
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-mail-bulk"></span></span>Multicultural Center<br />Richland Campus<br>
         12800 Abrams Rd.<br />
         Dallas, TX 75243
       </li>
     </ul>
   </div>
   <div class="col-md-4 col-sm-6 pgs-dept-card__col">
     <h3 class="pgs-dept-card__subhead">Call or Email Us</h3>
     <ul class="fa-ul">
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>972-238-6900 (general information)</li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>972-238-6291 (direct line)</li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-fax"></span></span>972-238-6165 (fax)</li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="richlandmulticultural@dcccd.edu">Email <span class="sr-only">Richland </span>Multicultural Center (for resident students)</a></li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="RLCWorld@dcccd.edu">Email <span class="sr-only">Richland </span>Multicultural Center (for international students)</a></li>
     </ul>
     <h3 class="pgs-dept-card__subhead">Connect with Us</h3>
     <ul class="fa-ul">
       <li><span class="fa-li"><span aria-hidden="true" class="ico fab fa-facebook"></span></span><a href="https://www.facebook.com/rlcmulticultural"><span class="sr-only">Richland Multicultural Center</span>On Facebook</a></li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fab fa-twitter"></span></span><a href="https://www.twitter.com/rlc_mc"><span class="sr-only">Richland Multicultural Center</span>On Twitter</a></li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fab fa-instagram"></span></span><a href="https://www.instagram.com/rlcmulticultural"><span class="sr-only">Richland Multicultural Center</span>On Instagram</a></li>
     </ul>
   </div>
   <div class="col-md-4 col-sm-6 pgs-dept-card__col">
     <h3 class="pgs-dept-card__subhead">Hours for Academic Advising</h3>
     <ul class="fa-ul">
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Mon-Thurs:</strong> 8 a.m. - 7 p.m.</li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Fri:</strong> 8 a.m. - 5 p.m.</li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Sat-Sun:</strong> Closed</li>
       <li><strong>Note:</strong> Closed every Wednesday from 1-4 p.m. for staff meeting, except during peak registration</li>
     </ul>
     <h3 class="pgs-dept-card__subhead">Hours for International Advising</h3>
     <ul class="fa-ul">
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Mon-Thurs:</strong> 8:30 a.m. - 4:30 p.m.</li>
       <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-clock"></span></span><strong>Fri-Sun:</strong> Closed</li>
       <li><strong>Note:</strong> Closed every Wednesday from 1-4 p.m. for staff meeting, except during peak registration</li>
     </ul>
   </div>
 </div>
</div>
​

Components