ISTWCMS-5598: adding all the things needed for a basic card

src/patterns/04-components/card/_card.scss

+// @file
+// Styles for Cards.
+
+$card-accent-border-color: gesso-color(ui, generic, accent) !default;
+$card-link-color: gesso-color(text, on-light) !default;
+$card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
+$card-meta-color: gesso-color(ui, generic, text-dark) !default;
+$card-padding: rem(gesso-spacing(sm)) !default;
+
+.card {
+  width: 100%;
+
+  .views-row & {
+    height: 100%;
+  }
+
+  .uw-label {
+    display: block;
+    margin-top: 1rem;
+  }
+
+  &__catalog-tags {
+    // TODO: change of ohana functions/mixins.
+    //padding-bottom: rem(gesso-spacing(sm));
+  }
+}
+
+// if card--show-hover class is present then show "
+.card--show-hover{
+  border-bottom: 3px solid $card-accent-border-color;
+  // TODO: change of ohana functions/mixins.
+  //box-shadow: gesso-box-shadow(1);
+  padding: $card-padding;
+  // TODO: change of ohana functions/mixins.
+  //transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+
+  &:hover,
+  &:focus-within {
+    // TODO: change of ohana functions/mixins.
+    //box-shadow: gesso-box-shadow(3);
+  }
+}
+
+.card__image {
+  // TODO: change of ohana functions/mixins.
+  //margin-bottom: rem(gesso-spacing(sm));
+
+  img {
+    display: block;
+  }
+
+  a {
+    // TO-DO: replace with ohana color.
+    background: #000;
+    display: block;
+
+    img {
+      -webkit-filter: opacity(100%);
+      filter: opacity(100%);
+      // TODO: change of ohana functions/mixins.
+      //transition: filter gesso-duration(shortest) gesso-easing(ease-in);
+    }
+
+    &:hover,
+    &:focus {
+      img {
+        -webkit-filter: opacity(62%);
+        filter: opacity(62%);
+        // TODO: change of ohana functions/mixins.
+        //transition:filter gesso-duration(shortest) gesso-easing(ease-in);
+      }
+    }
+  }
+}
+
+.card__featured-image {
+  align-items: center;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: grid;
+  height: 45rem;
+  justify-items: center;
+  min-height: 44rem;
+  position: relative;
+}
+.card__header{
+
+  // TODO: change of ohana functions/mixins.
+  //@include uw-no-breakout();
+  // TODO: change of ohana functions/mixins.
+  //margin-bottom: rem(gesso-spacing(xs));
+  width: 100%;
+
+  .card__node--event & {
+    display:grid;
+    grid-template-columns: 1fr auto;
+
+    .card__author {
+      grid-column: 1/2;
+    }
+
+    .card__date {
+      grid-column: 1/2;
+    }
+
+    .card__title {
+      grid-column: 1/2;
+    }
+
+    .view-interact {
+      background-color: $uw-white;
+      grid-column: 2/3;
+      grid-row: 2/3;
+      margin: 0;
+      padding: 1rem 1rem 0 0;
+
+      .uw-node__without-image & {
+        grid-column: 2/3;
+        grid-row: inherit;
+        margin-bottom: 1rem;
+        padding: 0;
+      }
+    }
+  }
+}
+
+.card__date {
+  // TODO: change of ohana functions/mixins.
+  //font-size: rem(gesso-font-size(0));
+  // TODO: change of ohana functions/mixins.
+  //margin-bottom: rem(gesso-spacing(sm));
+  position: relative;
+}
+
+.card__title {
+  margin: 0 0 rem(gesso-spacing(xs)) 0;
+  padding: 0;
+  width: 100%;
+
+  a {
+    // TODO: change of ohana functions/mixins.
+    //@include link-reverse(
+    //    $card-link-color,
+    //    $card-link-color-hover
+    //);
+  }
+}
+
+.card__author {
+
+  // TODO: change of ohana functions/mixins.
+  //@include uw-no-breakout();
+  // TODO: change of ohana functions/mixins.
+  //font-family: gesso-font-family(systemmedium);
+  // TODO: change of ohana functions/mixins.
+  //font-size: gesso-font-size(-1);
+  margin-top: 0;
+  // TODO: change of ohana functions/mixins.
+  //padding: 0 0 gesso-spacing(xs) 0;
+
+  a {
+    // TODO: change of ohana functions/mixins.
+    //@include link(
+    //    $card-link-color,
+    //    $card-link-color-hover
+    //);
+  }
+}
+
+// body
+.card__body {
+  width: 100%;
+}
+
+.card__content {
+  // TODO: change of ohana functions/mixins.
+  //margin-bottom: rem(gesso-spacing(md));
+  width: 100%;
+
+  &:empty {
+    margin-bottom:0;
+  }
+}
+
+
+.card__position {
+  color: $uw-black;
+  font-size: 1.26562rem;
+}
+
+// footer
+.card__footer {
+  width: 100%;
+}
+
+.card__tags {
+  margin:0;
+  padding:0;
+  width: 100%;
+}
+
+.card__readmore {
+  text-align: right;
+}
+
+.card__social {
+  max-width: 20rem;
+  width: 100%;
+}
+
+.card__project{
+  &-members--content {
+    // TODO: change of ohana functions/mixins.
+    //@include uw-flex-grid();
+    .card__project-member {
+      // TODO: change of ohana functions/mixins.
+      //@include flex(1 1 auto);
+      // TODO: change of ohana functions/mixins.
+      //@include flex-grow(1);
+      width: 45%;
+    }
+    @include medium {
+      .card__project-member {
+        // TODO: change of ohana functions/mixins.
+        //@include flex(1 1 auto);
+        // TODO: change of ohana functions/mixins.
+        //@include flex-grow(1);
+        width: 20%;
+      }
+    }
+  }
+}
+
+// Have not worked on card feature.
+.card--feature {
+
+  .card__body {
+    padding-top: $card-padding;
+  }
+
+  .card__media {
+    margin-bottom: 0;
+  }
+
+  // TODO: change of ohana functions/mixins.
+  //@include breakpoint(gesso-breakpoint(md)) {
+  //  flex-direction: row;
+  //
+  //  .card__body {
+  //    max-width: 600px;
+  //    padding: $card-padding 2vw 0;
+  //  }
+  //
+  //  .card__media {
+  //    order: initial;
+  //  }
+  //}
+}

src/patterns/04-components/card/card-elements/_content.twig

+<div class="card__content">{{ content }}</div>

src/patterns/04-components/card/card-elements/_footer-elements.twig

+{% if footer.service_information %}
+  {% include '@components/card/card-elements/_service-information.twig' with {
+    'info': footer.service_information
+  } %}
+{% endif %}
+
+{% if footer.service_details %}
+  {% include '@components/card/card-elements/_service-details.twig' with {
+    'service_details': footer.service_details
+  } %}
+{% endif %}
+
+{% if footer.service_hours %}
+  {% include '@components/card/card-elements/_service-hours.twig' with {
+    'service_hours': footer.service_hours
+  } %}
+{% endif %}
+
+{% if footer.contact_info %}
+  {% include '@components/card/card-elements/_contact-info.twig' with {
+    'contact_info': footer.contact_info
+  } %}
+{% endif %}
+
+{% if footer.contact_for %}
+  {% include '@components/card/card-elements/_contact-for.twig' with {
+    'contact_for': footer.contact_for
+  } %}
+{% endif %}
+
+{% if footer.groups %}
+  {% include '@components/card/card-elements/_groups.twig' with {
+    'groups': footer.groups.groups
+  } %}
+{% endif %}
+
+{% if footer.opportunity_dates %}
+  {% include '@components/card/card-elements/_opportunity-dates.twig' with {
+    'dates': footer.opportunity_dates
+  } %}
+{% endif %}
+
+{% if footer.opportunity_details %}
+  {% include '@components/card/card-elements/_opportunity-details.twig' with {
+    'opportunity_details': footer.opportunity_details
+  }%}
+{% endif %}
+
+{% if footer.links %}
+  {% include '@components/card/card-elements/_links.twig' with {
+    'links': footer.links
+  }%}
+{% endif %}
+
+{% if footer.location_info %}
+  {% include '@components/card/card-elements/_location-info.twig' with {
+    'location_info': footer.location_info
+  }%}
+{% endif %}
+
+{% if footer.additional_info %}
+  {% include '@components/card/card-elements/_additional-info.twig' with {
+    'additional_info': footer.additional_info
+  } %}
+{% endif %}
+
+{% if footer.posted %}
+  {% include '@components/label/label.twig' with {
+    'label': 'Date posted'
+  } %}
+  {% include '@components/card/card-elements/_date.twig' with {
+    'date_format': 'long',
+    'date': footer.posted
+  } %}
+{% endif %}
+
+{% if footer.deadline %}
+  {% include '@components/label/label.twig' with {
+    'label': 'Application deadline'
+  } %}
+  {% include '@components/card/card-elements/_date.twig' with {
+    'date_format': 'long_with_time',
+    'date': footer.deadline
+  } %}
+{% endif %}
+
+{% if footer.opportunity_type %}
+  {% include '@components/card/card-elements/_opportunity-type.twig' with {
+    'opportunity_type': footer.opportunity_type
+  } %}
+{% endif %}
+
+{% if footer.project_details %}
+  {% include '@components/card/card-elements/_project-details.twig' with {
+    'project_details': footer.project_details
+  } %}
+{% endif %}
+
+{% if footer.timeline %}
+  {% include '@components/card/card-elements/_timeline.twig' with {
+    'timeline': footer.timeline
+  } %}
+{% endif %}
+
+{% if footer.project_members %}
+  {% include '@components/card/card-elements/_project-members.twig' with {
+    'project_members': footer.project_members
+  } %}
+{% endif %}
+
+{% if footer.tags %}
+  {% include '@components/card/card-elements/_tags.twig' with {
+    'tags': footer.tags,
+  } %}
+{% endif %}

src/patterns/04-components/card/card-elements/_header.twig

+<div class="card__header">
+
+  {% if bundle == 'uw_ct_profile' %}
+    {% if image %}
+      <div class="uw-image__profiles">
+        {% include '@components/card/card-elements/_image.twig' with {
+          'image': image,
+          'bundle': bundle
+        } %}
+      </div>
+    {% endif %}
+  {% endif %}
+
+  {% if header.date %}
+
+    {% if type == 'event' %}
+      {% set date_format = 'long_with_time' %}
+    {% else %}
+      {% set date_format = 'long' %}
+    {% endif %}
+
+    {% include '@components/card/card-elements/_date.twig' with {
+      'date_format': date_format,
+      'date': header.date,
+      'type': type,
+    } %}
+  {% endif %}
+
+  {% if header.title and show_title == 'yes' %}
+    {% include '@components/card/card-elements/_title.twig' with {
+      'header_level': 2,
+      'title': header.title,
+      'type': type
+    } %}
+  {% endif %}
+
+  {% if header.position %}
+    {% include '@components/card/card-elements/_position.twig' with {
+      'position': header.position
+    } %}
+  {% endif %}
+
+  {% if header.author %}
+    {% include '@components/card/card-elements/_author.twig' with {
+      'author': header.author
+    } %}
+  {% endif %}
+
+  {% if header.posted %}
+    {% include '@components/label/label.twig' with {
+      'label': 'Date posted'
+    } %}
+    {% include '@components/card/card-elements/_date.twig' with {
+      'date_format': 'long',
+      'date': header.posted
+    } %}
+  {% endif %}
+
+  {% if header.opportunity_type %}
+    {% include '@components/card/card-elements/_opportunity-type.twig' with {
+      'opportunity_type': header.opportunity_type
+    } %}
+  {% endif %}
+
+  {% if header.employment_type %}
+    {% include '@components/card/card-elements/_employment-type.twig' with {
+      'employment_type': header.employment_type
+    } %}
+  {% endif %}
+
+  {% if header.rate_of_pay or header.rate_of_pay_type %}
+    {% include '@components/card/card-elements/_rate-of-pay.twig' with {
+      'rate_of_pay': header.rate_of_pay,
+      'rate_of_pay_type': header.rate_of_pay_type
+    } %}
+  {% endif %}
+
+  {% if header.job_id %}
+    {% include '@components/card/card-elements/_job-id.twig' with {
+      'job_id': header.job_id
+    } %}
+  {% endif %}
+
+  {% if ical %}
+    {% include '@components/view/view-interact/view-interact.twig' with {
+      'ical': ical
+    }%}
+  {% endif %}
+
+</div>

src/patterns/04-components/card/card-elements/_link.twig

+<div class="card__link card__link--{{ link_type }}">
+  {% include '@components/label/label.twig' with {
+    'label': label
+  } %}
+  {% include '@components/links/links.twig' with {
+    'links': links
+  } %}
+</div>

src/patterns/04-components/card/card-elements/_links.twig

+<div class="card__contact-links">
+  {% embed '@components/details/details.twig'  with {
+    'is_open': TRUE,
+  }%}
+    {% block details_summary %}
+      Links
+    {% endblock %}
+
+    {% block details_content %}
+
+      {% if links.profile %}
+        {% include '@components/card/card-elements/_link.twig' with {
+          'label': 'Link to profile',
+          'link_type': 'profile',
+          'links': links.profile
+        } %}
+      {% endif %}
+
+      {% if links.webpage %}
+        {% include '@components/card/card-elements/_link.twig' with {
+          'label': 'Link to personal webpage',
+          'link_type': 'personal-webpage',
+          'links': links.webpage
+        } %}
+      {% endif %}
+
+      {% if links.link_to_contact %}
+        {% include '@components/card/card-elements/_link.twig' with {
+          'label': 'Contact information',
+          'link_type': 'link-to-contact',
+          'links': links.link_to_contact
+        } %}
+      {% endif %}
+
+      {% if links.application %}
+        {% include '@components/card/card-elements/_link.twig' with {
+          'label': 'Link to application',
+          'link_type': 'application',
+          'links': links.application
+        } %}
+      {% endif %}
+
+      {% if links.additional_info %}
+        {% include '@components/card/card-elements/_link.twig' with {
+          'label': 'Link to additional information',
+          'link_type': 'additional-info',
+          'links': links.additional_info
+        } %}
+      {% endif %}
+
+      {% if links.contact %}
+        {% include '@components/card/card-elements/_link.twig' with {
+          'label': 'Contact for additional informationn',
+          'link_type': 'contact-for',
+          'links': links.contact
+        } %}
+      {% endif %}
+
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_tags.twig

+<div class="card__tags">
+  {% include "@components/tag-list/tag-list.twig" with {
+    items: tags
+  } %}
+</div>

src/patterns/04-components/card/card.twig

+{% if show_header is null %}
+  {% set show_header = 'yes' %}
+{% endif %}
+
+{% if type == 'teaser' %}
+  {% set show_title = 'yes' %}
+{% elseif media and media.type == 'image' %}
+  {% set show_title = 'no' %}
+  {% set show_header = 'no' %}
+{% else %}
+  {% set show_title = 'no' %}
+{% endif %}
+
+{% if show_image is null %}
+  {% set show_image = 'yes' %}
+{% endif %}
+
+<article class="card{% if type %} card__{{ type }} {% endif %}{% if modifier_classes %} card__{{ modifier_classes }}{% endif %}{% if show_hover %} card--show-hover{% endif %}" {% if type == 'banner' %} id="{{ type }}{{ loop.index }}-{{ banners.uuid }}"{% endif %}>
+  {% if media %}
+    {% include '@components/card/card-elements/_media.twig' with {
+      'media': media,
+      'header': header,
+    } %}
+  {% endif %}
+
+  {% if image and show_image == 'yes' and bundle != 'uw_ct_profile' %}
+    {% include '@components/card/card-elements/_image.twig' with {
+      'image': image
+    } %}
+  {% endif %}
+
+  {% if header and show_header == 'yes' %}
+    {% include '@components/card/card-elements/_header.twig' with {
+      'header': header,
+      'show_title': show_title,
+      'type': type,
+      'image': image,
+      'bundle': bundle
+    } %}
+  {% endif %}
+
+  {% if content or banner %}
+    <div class="card__body">
+      {% if banner %}
+        {% include '@components/card/card-elements/_banner.twig' with {
+          'banner': banner,
+        } %}
+      {% endif %}
+
+      {% if content %}
+        {% include '@components/card/card-elements/_content.twig' with {
+          'content': content,
+        } %}
+      {% endif %}
+    </div>
+  {% endif %}
+
+  {% if footer %}
+    <div class="card__footer">
+
+      {% include '@components/card/card-elements/_footer-elements.twig' with {
+        'footer': footer
+      } %}
+
+      {% if read_more and url %}
+        <div class="card__readmore">
+          {{ macros.readmore(url, title) }}
+        </div>
+      {% endif %}
+
+      {%  if social_media %}
+        <div class="card__social {{ social_media_placement }}">
+          {% include "@components/menu/menu--social/menu--social.twig" %}
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+
+  {% if tags %}
+    {% include '@components/card/card-elements/_tags.twig' with {
+      'tags': tags
+    } %}
+  {% endif %}
+
+</article>

src/patterns/04-components/card/card.yml

+---
+url: '#'
+show_title: 'yes'
+footer:
+  links:
+    webpage:
+      0:
+        uri: '#'
+        title: 'Test'
+content: '<p class="layout uw-contained-width">This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+header:
+  title: 'Card Title'
+tags:
+  - url: '#'
+    title: 'Tag 1'
+    type: 'simple'
+  - url: '#'
+    title: 'Tag 2'
+    type: 'simple'
+  - url: '#'
+    title: 'Tag 3'
+    type: 'simple'

src/patterns/04-components/details/_details.scss

+// @file
+// Styles for collapsible details.
+
+$details-background-color: gesso-color(ui, generic, background-light) !default;
+$details-background-color-hover: gesso-color(ui, generic, background) !default;
+$details-content-background-color: gesso-color(background, site) !default;
+$details-padding: gesso-spacing(sm) !default;
+$details-text-color: gesso-color(text, on-light) !default;
+$summary-font-family: gesso-font-family(book);
+$details-font-family: gesso-font-family(primary);
+// 'details' can appear as a modernizr class on the html tag, so this
+// class is limited to only the details element
+/* stylelint-disable-next-line selector-no-qualifying-type */
+.uw-details,
+.seven-details {
+  background-color: #fcfcfa;
+  border: 1px solid #bfbfbf;
+  border-bottom: 1px solid $card-accent-border-color;
+  border-radius: inherit;
+  // TODO: change to ohana functions/mixins.
+  //box-shadow: gesso-box-shadow(0);
+  // TODO: change to ohana functions/mixins.
+  //margin: rem(gesso-spacing(md)) 0;
+  // TODO: change to ohana functions/mixins.
+  //transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+  width:100%;
+
+  &[open] > .seven-details__summary {
+    // TODO: change to ohana functions/mixins.
+    //color: gesso-brand(org-default,uw-black,'primary');
+  }
+
+  &:hover {
+    // TODO: change to ohana functions/mixins.
+    //box-shadow: gesso-box-shadow(1);
+  }
+
+  &:focus-within {
+    // TODO: change to ohana functions/mixins.
+    //box-shadow: gesso-box-shadow(1);
+  }
+
+  &:first-child{
+    margin-top: 0;
+  }
+
+  // Fallback for browsers that don’t support details.
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  .js &:not([open]) > .details__content {
+    display: none;
+  }
+}
+
+.seven-details__summary,
+.details__summary {
+  // TODO: change to ohana functions/mixins.
+  //@include uw-no-breakout();
+  // TODO: change to ohana functions/mixins.
+  //@include svg-background(mobile-arrow-down);
+  background-color: $details-background-color;
+  background-position: right 1rem center; // LTR
+  background-repeat: no-repeat;
+  background-size: rem(13px);
+  // TODO: change to ohana functions/mixins.
+  //color: gesso-brand(org-default,uw-black,'primary');
+  cursor: pointer;
+  display: block;
+  font-family: $summary-font-family;
+  // TODO: change to ohana functions/mixins.
+  //font-size: rem(gesso-font-size(-1));
+  line-height: 1.25;
+  outline: 0;
+  padding: $details-padding;
+  text-shadow: 0 1px 0 #fff;
+  // TODO: change to ohana functions/mixins.
+  //transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+
+  @if $support-for-rtl {
+    [dir='rtl'] & {
+      background-position: left $details-padding center;
+      // TODO: change to ohana functions/mixins.
+      //padding-left: gesso-spacing(xl);
+      padding-right: $details-padding;
+    }
+  }
+
+  [open] > & {
+    // TODO: change to ohana functions/mixins.
+    //@include svg-background(mobile-arrow-up);
+  }
+
+  &:hover,
+  &:focus{
+    // TODO: change to ohana functions/mixins.
+    //color: gesso-brand(org-default,uw-black,'primary');
+  }
+  &:first-child{
+    margin-top: 0;
+  }
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.details__fallback-link {
+  display: block;
+  outline: 0;
+  text-decoration: none;
+}
+
+.details__content {
+  // TODO: change to ohana functions/mixins.
+  //@include uw-no-breakout();
+  background: $details-content-background-color;
+  border: 1px solid $details-background-color;
+  border-top: 0;
+  padding: $details-padding;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+  .uw-label{
+    margin-bottom:0;
+    margin-top:rem(gesso-spacing(sm));
+  }
+}
+
+.details__description,
+.seven-details__description{
+  color: $details-text-color;
+  // TODO: change to ohana functions/mixins.
+  //font-size: rem(gesso-font-size(-1));
+  // TODO: change to ohana functions/mixins.
+  //margin-bottom: rem(gesso-spacing(sm));
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+.node--type{
+  &-uw-ct-contact{
+    .details {
+      max-width:600px;
+    }
+  }
+}
+
+.seven-details__wrapper {
+  padding: 1rem;
+  .uw-input,
+  .form-text{
+    width:100%;
+  }
+}

src/patterns/04-components/details/details.twig

+<details class="uw-details" {% if is_open %} open{% endif %}>
+  <summary class="details__summary">
+    {% block details_summary %}
+      Summary
+    {% endblock %}
+  </summary>
+  <div class="details__content">
+    {% block details_content %}
+      Content
+    {% endblock %}
+  </div>
+</details>

src/patterns/04-components/details/details.yml

+details_classes: 'seven-details'
+details_summary: 'Details summary'
+details_description: 'Details description'
+details_content: |-
+  <p>Details content</p>

src/patterns/04-components/label/label.twig

+<span class="uw-label">{{ label }}:</span>

src/patterns/04-components/links/links.twig

+{% for link in links %}
+  <a href="{{ link.uri }}">
+    {% if link.title %}
+      {{ link.title }}
+    {% else %}
+      {{ link.uri }}
+    {% endif %}
+  </a>
+{% endfor %}

src/patterns/04-components/tag-list/_tag-list.scss

+.tag-list {
+  // TODO: change of ohana functions/mixins.
+  //@include list-clean();
+}
+
+.tag-list__item {
+  display: inline-block;
+  // TODO: change of ohana functions/mixins.
+  //margin-bottom: rem(gesso-spacing(xxs));
+  // TODO: change of ohana functions/mixins.
+  //margin-right: rem(gesso-spacing(xs));
+}

src/patterns/04-components/tag-list/tag-list.twig

+<ul class="tag-list {{ modifier_classes }}">
+  {% for item in items %}
+    <li class="tag-list__item {%  if item.faculty %}{{ item.faculty }}{%  endif %}">
+      {{ macros.tag(item.url, item.title, tag_type) }}
+    </li>
+  {% endfor %}
+</ul>

src/patterns/04-components/tag-list/tag-list.yml

+items:
+  - url: '#'
+    title: 'Campus'
+    faculty: 'org-default'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'UW Default'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Science'
+    faculty: 'org-sci'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Engineering'
+    faculty: 'org-eng'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Environment'
+    faculty: 'org-env'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Math'
+    faculty: 'org-mat'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Art'
+    faculty: 'org-art'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Health'
+    faculty: 'org-ahs'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'School'
+    faculty: 'org-school'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'St. Jeromes'
+    faculty: 'org-stj'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'St. Pauls'
+    faculty: 'org-stp'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Renison'
+    faculty: 'org-ren'
+    type: 'full'
+    size: 'normal'
+  - url: '#'
+    title: 'Conrad Grebel'
+    faculty: 'org-cgc'
+    type: 'full'
+    size: 'normal'