Goizueta Style Guide

General

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

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

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

location-pin

military

minus

no

person-hurdling

person-with-board

person-with-briefcase

pie-chart

piggy-bank-heart

play

plus-one

plus

printer

profile-blue

search-blue

search

site-logo-white

site-logo

submit-white

submit

target-with-arrow

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

Fonts

$font-primary

ResolveSansNarrow

$font-secondary

Goudy Bold

$font-tertiary

Resolve Sans Condensed

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 'ResolveSansNarrow'">ResolveSansNarrow</div>
<h2 class="kss-type-name">$font-secondary</h2>
<div class="kss-type-wrapper" style="font: 36px/2 'Goudy'">Goudy Bold</div>
<h2 class="kss-type-name">$font-tertiary</h2>
<div style="font: 300 36px/2 'Resolve Sans Condensed'">Resolve Sans Condensed</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 'ltc-goudy-oldstyle-pro'">Sentinel Book</div>