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

alarm-white

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-black

arrow-right-blue

bars

bell

book-with-finger

briefcase

building-with-flag

building

calendar-clock

calendar

caret-down

caret-up

clock-square

clock

clock-white

close-white

deposit

deposit-white

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
#0033A0

$color-navy
#002F6C

$color-eagle-blue
#0C2340

$color-red
#D14124

$color-yellow(-high)
#F2A900

$color-yellow-highlight
#F7CB66

$color-gold
#F2D6AF

$color-gold-light
#FEF6E7

$color-gold-medium
#FCE7BE

$color-gold-dark
#FAD58E

$color-blue-10
#E7E7F5

$color-navy-10
#E4E7EF

$color-white
#FFFFFF

$color-egg-shell
#F6F6F6

$color-gray
#C0C2C3

$color-gray-dark
#6A6868

$color-tundora
#464646

$color-black
#000000

Secondary

$color-sky-blue
#A4DBE8

$color-denim
#005EB8

$color-command-blue
#007DBA

$color-cyan
#778921

$color-green
#00482B

$color-marble
#E9CDD0

$color-wisteria
#C8B8F1

$color-spring
#ECDD31

Tints (Redundant colors but variables are used in places - we can consolidate)

$color-mobile-menu-blue
#0033A0

$color-goiz-blue-menu
#002F6C

Grays (Mostly redundant colors except Alto and Alabaster - we can consolidate)

$color-hover-gray
#F6F6F6

$color-gallery
#F6F6F6

$color-silver
#c0c2c3

$color-paris-white
#c0c2c3

$color-alto
#ddd

$color-alabaster
#f7f7f7

Markup Details

                            <h2>Primary</h2>
<div class="kss-swatch" style="background-color: #0033A0">
  <div class="kss-swatch__hex">$color-blue<br>#0033A0</div>
</div>
<div class="kss-swatch" style="background-color: #002F6C">
  <div class="kss-swatch__hex">$color-navy<br>#002F6C</div>
</div>
<div class="kss-swatch" style="background-color: #0C2340">
  <div class="kss-swatch__hex">$color-eagle-blue<br>#0C2340</div>
</div>
<div class="kss-swatch" style="background-color: #D14124">
  <div class="kss-swatch__hex">$color-red<br>#D14124</div>
</div>
<div class="kss-swatch" style="background-color: #F2A900">
  <div class="kss-swatch__hex">$color-yellow(-high)<br>#F2A900</div>
</div>
<div class="kss-swatch" style="background-color: #F7CB66">
  <div class="kss-swatch__hex">$color-yellow-highlight<br>#F7CB66</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: #E7E7F5">
  <div class="kss-swatch__hex">$color-blue-10<br>#E7E7F5</div>
</div>
<div class="kss-swatch" style="background-color: #E4E7EF">
  <div class="kss-swatch__hex">$color-navy-10<br>#E4E7EF</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: #F6F6F6">
  <div class="kss-swatch__hex">$color-egg-shell<br>#F6F6F6</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: #464646">
  <div class="kss-swatch__hex">$color-tundora<br>#464646</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: #A4DBE8">
  <div class="kss-swatch__hex">$color-sky-blue<br>#A4DBE8</div>
</div>
<div class="kss-swatch" style="background-color: #005EB8">
  <div class="kss-swatch__hex">$color-denim<br>#005EB8</div>
</div>
<div class="kss-swatch" style="background-color: #007DBA">
  <div class="kss-swatch__hex">$color-command-blue<br>#007DBA</div>
</div>
<div class="kss-swatch" style="background-color: #778921">
  <div class="kss-swatch__hex">$color-cyan<br>#778921</div>
</div>
<div class="kss-swatch" style="background-color: #00482B">
  <div class="kss-swatch__hex">$color-green<br>#00482B</div>
</div>
<div class="kss-swatch" style="background-color: #e9cdd0">
  <div class="kss-swatch__hex">$color-marble<br>#E9CDD0</div>
</div>
<div class="kss-swatch" style="background-color: #c8b8f1">
  <div class="kss-swatch__hex">$color-wisteria<br>#C8B8F1</div>
</div>
<div class="kss-swatch" style="background-color: #ecdd31">
  <div class="kss-swatch__hex">$color-spring<br>#ECDD31</div>
</div>
<h2>Tints (Redundant colors but variables are used in places - we can consolidate)</h2>
<div class="kss-swatch" style="background-color: #0033a0">
  <div class="kss-swatch__hex">$color-mobile-menu-blue<br>#0033A0</div>
</div>
<div class="kss-swatch" style="background-color: #002f6c">
  <div class="kss-swatch__hex">$color-goiz-blue-menu<br>#002F6C</div>
</div>
<h2>Grays (Mostly redundant colors except Alto and Alabaster - we can consolidate)</h2>
<div class="kss-swatch" style="background-color: #f6f6f6">
  <div class="kss-swatch__hex">$color-hover-gray<br>#F6F6F6</div>
</div>
<div class="kss-swatch" style="background-color: #f6f6f6">
  <div class="kss-swatch__hex">$color-gallery<br>#F6F6F6</div>
</div>
<div class="kss-swatch" style="background-color: #c0c2c3">
  <div class="kss-swatch__hex">$color-silver<br>#c0c2c3</div>
</div>
<div class="kss-swatch" style="background-color: #c0c2c3">
  <div class="kss-swatch__hex">$color-paris-white<br>#c0c2c3</div>
</div>
<div class="kss-swatch" style="background-color: #ddd">
  <div class="kss-swatch__hex">$color-alto<br>#ddd</div>
</div>
<div class="kss-swatch" style="background-color: #f7f7f7">
  <div class="kss-swatch__hex">$color-alabaster<br>#f7f7f7</div>
</div>

Type

Fonts

$font-primary

Resolve Sans Narrow

$font-secondary

Goudy Oldstyle Pro

$font-tertiary

Resolve Sans Condensed

$font-sans

Rig Sans

Markup Details

                            <h2 class="kss-type-name">$font-primary</h2>
<div class="kss-type-wrapper" style="font: 36px/2 'ResolveSansNarrow'">Resolve Sans Narrow</div>
<h2 class="kss-type-name">$font-secondary</h2>
<div class="kss-type-wrapper" style="font: 36px/2 'Goudy'">Goudy Oldstyle Pro</div>
<h2 class="kss-type-name">$font-tertiary</h2>
<div class="kss-type-wrapper" style="font: 300 36px/2 'ResolveSansCondensed'">Resolve Sans Condensed</div>
<h2 class="kss-type-name">$font-sans</h2>
<div class="kss-type-wrapper" style="font: 36px/2 'rig-sans'">Rig Sans</div>