Icons

These icons are used throughout the site.

Usage:

Import the icons macro.

Call the .get() function passing it the icon name.

(Optional) The second argument is any classes you would like to apply to the svg element.

Example:

{% import '@goizueta_theme/icons/icons.twig' as icons %}
{{ icons.get('facebook', 'icon icon--facebook') }}

This will render the svg inline with whatever class or classes are passed as the second argument.

<svg aria-hidden="true" role="img" class="icon icon--facebook">...</svg>

add

arrow-brown

arrow-circle

arrow-down-blue

arrow-down-white

arrow-left

arrow-left-blue background Layer 1

arrow-left-blue

arrow-next-blue-square

arrow-next-blue

arrow-next-navy

arrow-next-white

arrow-next

arrow-prev-blue

arrow-prev-navy

arrow-prev-white

arrow-prev

arrow-right

arrow-right-blue background Layer 1

arrow-right-blue

bars

bell

book-with-finger

briefcase

building-with-flag

building

calendar-clock

calendar

caret-down

caret-up

clock-square

clock

close-white

deposit

dots

download

edit

facebook

faculty

format

globe-2

globe-with-person

globe

gmat

group-of-people

hourglass-big

hourglass

info

instagram

key

linkedin-blue-bg

linkedin

location-pin

military

minus

no

person-hurdling

person-with-board

person-with-briefcase

pie-chart

piggy-bank-heart

pinterest

play

plus-one

plus

printer

profile-blue

search-blue

search

site-logo-white

site-logo

submit-white

submit

target-with-arrow

twitter

twitter-blue-bg

twitter

woman

yes

youtube

Markup Details
                            {% import "icons.twig" as icons %}
<div class="kss-icons">
{% for item in items %}
  <div class="kss-icons__item">
    {{ icons.get(item.icon, 'kss-icons__icon') }}
    <p class="kss-icons__name">{{ item.icon }}</p>
  </div>
{% endfor %}
</div>

                          

Tables

These are the base styles for default tables.

Number First Last Program
1 John Smith MBA Programm
2 Mark Davis Weekend Program
3 Mary Johnson Evening Program
Markup Details
                            <table>
  <thead>
    <tr>
      <th scope="col">Number</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Program</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Smith</td>
      <td>MBA Programm</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Davis</td>
      <td>Weekend Program</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Mary</td>
      <td>Johnson</td>
      <td>Evening Program</td>
    </tr>
  </tbody>
</table>
                          

Colors

All Sass color variables prefixed with $color-. This makes it easy to figure out what a variable is for later.

Primary

$color-blue
#185785
$color-navy
#012169
$color-red
#ED2024
$color-yellow
#E3A44C
$color-yellow-high
#F9C147
$color-violet
#C0C0DE
$color-lavender
#CDD3E4
$color-salmon
#FCD3C1
$color-gold
#F2D6AF
$color-gold-light
#FEF6E7
$color-gold-medium
#FCE7BE
$color-gold-dark
#FAD58E
$color-white
#FFFFFF
$color-egg-shell
#F4F4F3
$color-gray
#C0C2C3
$color-gray-dark
#6A6868
$color-gray-darker
#434444
$color-black
#000000

Secondary

$color-flame
#F35953
$color-ocean
#123D50
$color-lemon
#FDEE73
$color-sky-blue
#85BCE4
$color-denim
#1651A1
$color-dark-brown
#444444

Programs

Global Default

$color-program-global-primary
#012169
$color-program-global-secondary
#F9C147

MS in Business Analytics

$color-program-business-analytics-primary
#000000
$color-program-business-analytics-secondary
#F35953

Undergraduate BBA

$color-program-undergraduate-bba-primary
#012169
$color-program-undergraduate-bba-secondary
#F9C147

Executive Education

$color-program-executive-education-primary
#185785
$color-program-executive-education-secondary
#F9C147

One Year MBA

$color-program-one-year-mba-primary
#123D50
$color-program-one-year-mba-secondary
#FDEE73

Two Year MBA

$color-program-two-year-mba-primary
#85BCE4
$color-program-two-year-mba-secondary
#123D50

Evening MBA

$color-program-evening-mba-primary
#185785
$color-program-evening-mba-secondary
#FDEE73

Weekend MBA for Executives

$color-program-weekend-mba-primary
#BCDCE6
$color-program-weekend-mba-secondary
#1651A1

Modular MBA for Executives

$color-program-modular-mba-primary
#E3A44C
$color-program-modular-mba-secondary
#444444

PHD

$color-program-phd-primary
#444444
$color-program-phd-secondary
#85BCE4
Markup Details
                            <h2>Primary</h2>
<div class="kss-swatch" style="background-color: #185785">
  <div class="kss-swatch__hex">$color-blue<br>#185785</div>
</div>
<div class="kss-swatch" style="background-color: #012169">
  <div class="kss-swatch__hex">$color-navy<br>#012169</div>
</div>
<div class="kss-swatch" style="background-color: #ED2024">
  <div class="kss-swatch__hex">$color-red<br>#ED2024</div>
</div>
<div class="kss-swatch" style="background-color: #E3A44C">
  <div class="kss-swatch__hex">$color-yellow<br>#E3A44C</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-yellow-high<br>#F9C147</div>
</div>
<div class="kss-swatch" style="background-color: #C0C0DE">
  <div class="kss-swatch__hex">$color-violet<br>#C0C0DE</div>
</div>
<div class="kss-swatch" style="background-color: #CDD3E4">
  <div class="kss-swatch__hex">$color-lavender<br>#CDD3E4</div>
</div>
<div class="kss-swatch" style="background-color: #FCD3C1">
  <div class="kss-swatch__hex">$color-salmon<br>#FCD3C1</div>
</div>
<div class="kss-swatch" style="background-color: #F2D6AF">
  <div class="kss-swatch__hex">$color-gold<br>#F2D6AF</div>
</div>
<div class="kss-swatch" style="background-color: #FEF6E7">
  <div class="kss-swatch__hex">$color-gold-light<br>#FEF6E7</div>
</div>
<div class="kss-swatch" style="background-color: #FCE7BE">
  <div class="kss-swatch__hex">$color-gold-medium<br>#FCE7BE</div>
</div>
<div class="kss-swatch" style="background-color: #FAD58E">
  <div class="kss-swatch__hex">$color-gold-dark<br>#FAD58E</div>
</div>
<div class="kss-swatch" style="background-color: #FFFFFF">
  <div class="kss-swatch__hex">$color-white<br>#FFFFFF</div>
</div>
<div class="kss-swatch" style="background-color: #F4F4F3">
  <div class="kss-swatch__hex">$color-egg-shell<br>#F4F4F3</div>
</div>
<div class="kss-swatch" style="background-color: #C0C2C3">
  <div class="kss-swatch__hex">$color-gray<br>#C0C2C3</div>
</div>
<div class="kss-swatch" style="background-color: #6A6868">
  <div class="kss-swatch__hex">$color-gray-dark<br>#6A6868</div>
</div>
<div class="kss-swatch" style="background-color: #434444">
  <div class="kss-swatch__hex">$color-gray-darker<br>#434444</div>
</div>
<div class="kss-swatch" style="background-color: #000000">
  <div class="kss-swatch__hex">$color-black<br>#000000</div>
</div>
<h2>Secondary</h2>
<div class="kss-swatch" style="background-color: #F35953">
  <div class="kss-swatch__hex">$color-flame<br>#F35953</div>
</div>
<div class="kss-swatch" style="background-color: #123D50">
  <div class="kss-swatch__hex">$color-ocean<br>#123D50</div>
</div>
<div class="kss-swatch" style="background-color: #FDEE73">
  <div class="kss-swatch__hex">$color-lemon<br>#FDEE73</div>
</div>
<div class="kss-swatch" style="background-color: #85BCE4">
  <div class="kss-swatch__hex">$color-sky-blue<br>#85BCE4</div>
</div>
<div class="kss-swatch" style="background-color: #1651A1">
  <div class="kss-swatch__hex">$color-denim<br>#1651A1</div>
</div>
<div class="kss-swatch" style="background-color: #444444">
  <div class="kss-swatch__hex">$color-dark-brown<br>#444444</div>
</div>
<h2>Programs</h2>
<h2>Global Default</h2>
<div class="kss-swatch" style="background-color: #012169">
  <div class="kss-swatch__hex">$color-program-global-primary<br>#012169</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-program-global-secondary<br>#F9C147</div>
</div>
<h2>MS in Business Analytics</h2>
<div class="kss-swatch" style="background-color: #000000">
  <div class="kss-swatch__hex">$color-program-business-analytics-primary<br>#000000</div>
</div>
<div class="kss-swatch" style="background-color: #F35953">
  <div class="kss-swatch__hex">$color-program-business-analytics-secondary<br>#F35953</div>
</div>
<h2>Undergraduate BBA</h2>
<div class="kss-swatch" style="background-color: #012169">
  <div class="kss-swatch__hex">$color-program-undergraduate-bba-primary<br>#012169</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-program-undergraduate-bba-secondary<br>#F9C147</div>
</div>
<h2>Executive Education</h2>
<div class="kss-swatch" style="background-color: #185785">
  <div class="kss-swatch__hex">$color-program-executive-education-primary<br>#185785</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-program-executive-education-secondary<br>#F9C147</div>
</div>
<h2>One Year MBA</h2>
<div class="kss-swatch" style="background-color: #123D50">
  <div class="kss-swatch__hex">$color-program-one-year-mba-primary<br>#123D50</div>
</div>
<div class="kss-swatch" style="background-color: #FDEE73">
  <div class="kss-swatch__hex">$color-program-one-year-mba-secondary<br>#FDEE73</div>
</div>
<h2>Two Year MBA</h2>
<div class="kss-swatch" style="background-color: #85BCE4">
  <div class="kss-swatch__hex">$color-program-two-year-mba-primary<br>#85BCE4</div>
</div>
<div class="kss-swatch" style="background-color: #123D50">
  <div class="kss-swatch__hex">$color-program-two-year-mba-secondary<br>#123D50</div>
</div>
<h2>Evening MBA</h2>
<div class="kss-swatch" style="background-color: #185785">
  <div class="kss-swatch__hex">$color-program-evening-mba-primary<br>#185785</div>
</div>
<div class="kss-swatch" style="background-color: #FDEE73">
  <div class="kss-swatch__hex">$color-program-evening-mba-secondary<br>#FDEE73</div>
</div>
<h2>Weekend MBA for Executives</h2>
<div class="kss-swatch" style="background-color: #BCDCE6">
  <div class="kss-swatch__hex">$color-program-weekend-mba-primary<br>#BCDCE6</div>
</div>
<div class="kss-swatch" style="background-color: #1651A1">
  <div class="kss-swatch__hex">$color-program-weekend-mba-secondary<br>#1651A1</div>
</div>
<h2>Modular MBA for Executives</h2>
<div class="kss-swatch" style="background-color: #E3A44C">
  <div class="kss-swatch__hex">$color-program-modular-mba-primary<br>#E3A44C</div>
</div>
<div class="kss-swatch" style="background-color: #444444">
  <div class="kss-swatch__hex">$color-program-modular-mba-secondary<br>#444444</div>
</div>
<h2>PHD</h2>
<div class="kss-swatch" style="background-color: #444444">
  <div class="kss-swatch__hex">$color-program-phd-primary<br>#444444</div>
</div>
<div class="kss-swatch" style="background-color: #85BCE4">
  <div class="kss-swatch__hex">$color-program-phd-secondary<br>#85BCE4</div>
</div>
                          

Type

Custom fonts are loaded via JavaScript provided by fonts.com.

$font-primary

Roboto Condensed Regular

$font-secondary

Crimson Text

$font-tertiary

Oswald Light
Oswald Medium

$font-fourth

HEROIC CONDENSED BOOK
HEROIC CONDENSED HEAVY

$font-fifth

Sentinel Book
Markup Details
                            <h2 class="kss-type-name">$font-primary</h2>
<div class="kss-type-wrapper" style="font: 36px/2 'Roboto Condensed'">Roboto Condensed Regular</div>
<h2 class="kss-type-name">$font-secondary</h2>
<div class="kss-type-wrapper" style="font: 36px/2 'Crimson Text'">Crimson Text</div>
<h2 class="kss-type-name">$font-tertiary</h2>
<div style="font: 300 36px/2 'Oswald'">Oswald Light</div>
<div class="kss-type-wrapper" style="font: 500 36px/2 'Oswald'">Oswald Medium</div>
<h2 class="kss-type-name">$font-fourth</h2>
<div style="font: normal 36px/2 'HeroicBook'">HEROIC CONDENSED BOOK</div>
<div class="kss-type-wrapper" style="font: bold 36px/2 'HeroicHeavy'">HEROIC CONDENSED HEAVY</div>
<h2 class="kss-type-name">$font-fifth</h2>
<div class="kss-type-wrapper" style="font: 36px/2 'SentinelBook'">Sentinel Book</div>