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

Tiles

Tiles are patterns used to give visual weight and prominence to either a navigational menu or to a list of important links. Tile patterns can be customized in the following ways:

  • background image can be chosen by adding custom CSS
  • overlay and border colors can be modified using custom CSS
  • width is determined by bootstrap column (default values offered below)
  • height can be determined responsive height classes (default values offered below)

Default Tiles

Business, Hospitality and Global Trade
Creative Arts, Entertainment and Design
Education
Engineering, Technology, Mathematics and Sciences

Basic Code and Classes:

<div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile underline-inv shadow-1 height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Business, Hospitality and Global Trade</span>
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile underline-inv shadow-1 height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Creative Arts, Entertainment and Design</span>
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile underline-inv shadow-1 height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Education</span>
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile underline-inv height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Engineering, Technology, Mathematics and Sciences</span>
        </a>
    </div>
</div>
  • .pgs-tile - applied to the containing <a>
  • .pgs-tile__title - applied to the <span> that includes the text of the tile

Tiles With Custom Colors and Background Images

Business, Hospitality and Global Trade
Creative Arts, Entertainment and Design
Education
Engineering, Technology, Mathematics and Sciences

Code and Classes:

Notice there is an extra class pgs-tile--* added to each of the <a> elements. This class is what is used in the custom CSS below.

<div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile pgs-tile--business underline-inv shadow-1 height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Business, Hospitality and Global Trade</span>
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile underline-inv pgs-tile--arts shadow-1 height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Creative Arts, Entertainment and Design</span>
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile underline-inv pgs-tile--education shadow-1 height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Education</span>
        </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
        <a href="[URL]" class="pgs-tile underline-inv pgs-tile--stem height-sm-150 height-xxs-125">
            <span class="pgs-tile__title">Engineering, Technology, Mathematics and Sciences</span>
        </a>
    </div>
</div>

Custom CSS:

  .pgs-tile--business {
    background: linear-gradient(0deg, rgba([R], [G], [B], 0.85), rgba([R], [G], [B], 0.85)), url([IMAGE URL]);
    border-bottom-color:[COLOR];
}

.pgs-tile--arts {
    background: linear-gradient(0deg, rgba(147, 16, 29, 0.85), rgba(147, 16, 29, 0.85)), url([IMAGE URL]);
    border-bottom-color:[COLOR];
}

.pgs-tile--education {
    background: linear-gradient(0deg, rgba(133, 45, 129, 0.85), rgba(133, 45, 129, 0.85)), url([IMAGE URL]);
    border-bottom-color:[COLOR];
}

.pgs-tile--stem {
    background: linear-gradient(0deg, rgba(184, 84, 0, 0.85), rgba(184, 84, 0, 0.85)), url([IMAGE URL]);
    border-bottom-color:[COLOR];
}
Key

Picking the color for the background requires knowledge of rgba color function.

  • [R] - the red value 0-255
  • [G] - the green value 0-255
  • [B] - the blue value 0-255
  • [A] - the alpha value (transparency) - 0.85 recommended
  • [IMAGE URL] - the location of the image you would like to use as a background image

Patterns