MCC Elements and Widgets

Cascade Elements and Widgets



In the MARCOM department, we know that some webpage managers prefer to be self-sufficient when it comes to authoring their webpages. To accommodate users, we made available the page elements/widgets to help facilitate content editing. Below you will find a series of MCC branding elements to add to your pages. Simply copy the code in the accordion and add it by pasting to your page source code. The final step is to add your content.

ADA Button - Standard

This is the MCC universal button and is considered our standard branding button. 


<div class="ada-btn"><button class="ada-button" type="button"><a href="mclennan.edu"> Button title or text here</a> </button></div>

ADA Button - Drop Shadow

A variation of the MCC button is designed to have a drop shadow and be centered on a page.



<div class="ada-button-shdw"><button class="ada-button-shdw" type="button"> <a href="mclennan.edu"> Shadow Button title or text here</a></button></div>


Internal Page Accordion

*Due to the complexity of adding this widget to your page, we ask that you please submit a project request to have this added.


Accordion Heading

Body Content

Body Content

Body Content

Body Content

There are 5 attributes and values to edit in the code for each accordion row, they are the following:

  • id="flush-heading One"
  • aria-controls="flush-collapse One"
  • data-bs-target="#flush-collapse One"
  • aria-labelledby="flush-heading One"
  • id="flush-collapse One"

Table with one Header - Standard 

Basic single header table. Caption included.

Table Description
Heading Heading Heading
Content Content Content
Content Content Content
Content Content Content
Content Content Content

<div class="table-responsive-sm"> <table class="table table-bordered"> <caption class="sr-only"> <strong>Table Description</strong> </caption> <thead class="thead text-bg-secondary"> <tr> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> </tbody> </table> </div>


Row & Column Header Data Table - Double Header

Responsive table also includes span column and scoped columns/rows. Caption included.

Brief Description of table
Column Heading Column Heading
Row Heading Content Content
Row Heading Content Content
Row Heading Content with breaks
Content with breaks
Content		 Content with breaks
Content
Content
Row Heading Content with breaks
Content with breaks
Content with breaks		 Content with breaks
Content with breaks
Content with breaks

Additional information. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices neque hendrerit gravida suscipit. Suspendisse in ex condimentum, vehicula dui rutrum, pulvinar ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Etiam semper tortor in ipsum vestibulum, pulvinar ullamcorper turpis fringilla.

<div class="table-responsive-sm"> <table class="table table-bordered"> <caption class="sr-only"> <strong>Table Description</strong> </caption> <thead class="thead text-bg-secondary"> <tr> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> </tbody> </table> </div> <div class="table-responsive-md"> <table class="table table-bordered"> <caption class="sr-only"> <strong>Brief Description of table</strong> </caption> <thead> <tr> <td></td> <th scope="col">Column Heading</th> <th scope="col">Column Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">Row Heading</th> <td>Content</td> <td>Content</td> </tr> <tr> <th scope="row">Row Heading</th> <td>Content</td> <td>Content</td> </tr> <tr> <th scope="row">Row Heading</th> <td>Content with breaks <br />Content with breaks <br /> Content </td> <td>Content with breaks <br /> Content <br /> Content </td> </tr> <tr> <th scope="row">Row Heading</th> <td>Content with breaks <br /> Content with breaks <br /> Content with breaks </td> <td>Content with breaks <br /> Content with breaks <br /> Content with breaks </td> </tr> <tr> <td class="span" colspan="3" scope="colgroup"> <p>Additional information. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices neque hendrerit gravida suscipit. Suspendisse in ex condimentum, vehicula dui rutrum, pulvinar ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Etiam semper tortor in ipsum vestibulum, pulvinar ullamcorper turpis fringilla.</p> </td> </tr> </tbody> </table> </div>

Hoverable Row Table With Double Headers

This is a Hoverable Row table. Table is designed to be responsive, hover state on rows, accessible and with a colspan attribute. Caption included.

Table Description
# Header Header Header
1 Data Content Data Content Data Content
2 Data Content Data Content Data Content
3 Data Content Data Content Data Content
Span Column

<table class="table table-hover"> <caption class="sr-only">Table Description</caption> <thead class="table-light"> <tr> <th scope="col">#</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Data Content</td> <td>Data Content</td> <td>Data Content</td> </tr> <tr> <th scope="row">2</th> <td>Data Content</td> <td>Data Content</td> <td>Data Content</td> </tr> <tr> <th scope="row">3</th> <td>Data Content</td> <td>Data Content</td> <td>Data Content</td> </tr> <tr> <td colspan="4" scope="colgroup">Span Column</td> </tr> </tbody> </table>

Image Cards

MCC

Heading

  • Bullet List Content
  • Content
  • Content
MCC

Heading


<div class="flex-container" id="mcc-card"> <div class="row "> <div class="col-sm-6 "> <div aria-label="Shuttle Information" class="card h-100 " id="card"> <a href="/police/index"> <img alt="shuttle-1.jpg" height="350" src="/images/MCC-VLogo-Card.jpg" width="500" /> <br /> </a> <div class="card-body" id="bkgd-color"> <h2 class="card-title" id="txt-mod">Header</h2> <ul> <li>Bullet List Content</li> <li>Content</li> <li>Content</li> </ul> </div> </div> </div> <div class="col-sm-6 "> <div aria-label="Lost and found" class="card h-100 " id="card"> <img alt="flowers-SSC.jpg" height="350" src="/images/MCC-VLogo-Card.jpg" width="500" /> <div class="card-body"> <h2 class="card-title" id="txt-mod">Heading</h2> <ul> <li> <a href="https://www.mclennan.edu/index.html" title="lost property form">Hyperlink</a> </li> <li> <a href="https://www.mclennan.edu/index.html">Link</a> </li> <li> <a href="https://www.mclennan.edu/index.html">Link</a> </li> </ul> </div> </div> </div> </div> </div>

Cards With No Images

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius orci vitae blandit efficitur. Nullam ac enim quis leo sodales malesuada eu eu metus. Quisque in posuere augue, quis hendrerit magna. Nunc a ipsum cursus, aliquam nunc quis, feugiat massa.

Heading

Praesent eros enim, commodo eget nisi at, pretium pharetra urna. Quisque dapibus neque tortor, ac vehicula ante mattis a. Nulla nec aliquet massa. Aenean condimentum faucibus ipsum. Praesent urna felis, posuere ultrices varius vitae, dapibus non metus.


<div class="row "> <div class="col-sm-6"> <div aria-label="Add title here" class="card h-100 " id="card"> <div class="card-body"> <h2 class="card-title" id="txt-mod">Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius orci vitae blandit efficitur. Nullam ac enim quis leo sodales malesuada eu eu metus. Quisque in posuere augue, quis hendrerit magna. Nunc a ipsum cursus, aliquam nunc quis, feugiat massa.</p> </div> </div> </div> <div class="col-sm-6 "> <div aria-label="Add title here" class="card h-100 " id="card"> <div class="card-body"> <h2 class="card-title" id="txt-mod">Heading</h2> <p>Praesent eros enim, commodo eget nisi at, pretium pharetra urna. Quisque dapibus neque tortor, ac vehicula ante mattis a. Nulla nec aliquet massa. Aenean condimentum faucibus ipsum. Praesent urna felis, posuere ultrices varius vitae, dapibus non metus.</p> </div> </div> </div> </div>



Basic Border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempor nisl vel turpis rutrum tristique. Ut ex metus, fermentum tristique tempor quis, gravida nec ipsum. Morbi at dapibus nunc. Mauris semper ullamcorper pellentesque. Nunc vel metus tristique, varius nulla at, luctus felis. Maecenas id tellus nec lectus imperdiet suscipit condimentum in massa. Suspendisse pulvinar nibh vitae mollis elementum. Nunc leo purus, vulputate ut arcu nec, convallis sodales ante. Curabitur elementum ut erat vitae elementum. Etiam tincidunt efficitur euismod. Nunc euismod quis ante non efficitur. Pellentesque odio risus, mollis vel tortor in, sodales condimentum nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla interdum dui quis blandit euismod.

<br /> <div class="mccborder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempor nisl vel turpis rutrum tristique. Ut ex metus, fermentum tristique tempor quis, gravida nec ipsum. Morbi at dapibus nunc. Mauris semper ullamcorper pellentesque. Nunc vel metus tristique, varius nulla at, luctus felis. Maecenas id tellus nec lectus imperdiet suscipit condimentum in massa. Suspendisse pulvinar nibh vitae mollis elementum. Nunc leo purus, vulputate ut arcu nec, convallis sodales ante. Curabitur elementum ut erat vitae elementum. Etiam tincidunt efficitur euismod. Nunc euismod quis ante non efficitur. Pellentesque odio risus, mollis vel tortor in, sodales condimentum nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla interdum dui quis blandit euismod.</div>

Container w/Background Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in neque eros. Curabitur vestibulum odio neque, posuere faucibus quam rutrum in. Donec rutrum, massa sit amet porta tincidunt, turpis sem volutpat odio, quis tristique urna tellus eget lacus. Curabitur nisl justo, pharetra in lacus id, malesuada congue nibh. Vivamus euismod lobortis feugiat. Nam eleifend sapien nec tempus elementum. Etiam lorem neque, vehicula at ligula sed, finibus aliquam est. In et scelerisque est, ac euismod dui. .



<div class="headbox">
    <p>Add your copy here</p>
</div>