Usage

The academics card is specifically designed to be used within the context of the academics page. As such, the pattern should not be used for general layout and design.

Consider using a card or feature block.

Option

Options within a program are noted with this subtitle. The line should always read “Option within {Department Name}”.

Degree tags

Each academic program can have any of the following degree tags displayed with URLs leading the respective program type:

  • Major
  • Minor
  • Undergraduate Certificate
  • Pre-professional
  • Accelerated Master’s
  • Graduate Certificate
  • Master’s
  • Specialist
  • Doctorate

Associated department

A department and it’s URL can be included within the bottom section of the card. Where applicable, a second department and URL can also be included.

Style

Styles are currently included as part of the global stylesheet, but are also declared within the academics site as well, effectively overriding the global declarations.

  • Handle: @academics-card
  • Preview:
  • Filesystem Path: src/components/02-blocks/content/academics-card/academics-card.hbs
<article class="ContentBlock programs">
    <ul class="card-list">
        <li class="card">
            <div class="header">
                <div class="program">Program Title</div>
                <div class="option">Option within a Department</div>
            </div>
            <div class="meta">
                <div class="types">
                    <dl>
                        <dt>Degree type</dt>
                        <dd>
                            <a href="#" aria-label="Program Title Master&#x27;s">Master&#x27;s</a>
                        </dd>
                        <dd>
                            <a href="#" aria-label="Program Title Major">Major</a>
                        </dd>
                        <dd>
                            <a href="#" aria-label="Program Title Minor">Minor</a>
                        </dd>
                    </dl>
                </div>
                <div class="location">
                    <div class="department">
                        <a href="#">Department Name</a>
                    </div>
                    <div class="department">
                        <a href="#">Secondary Department Name</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</article>
<article class="ContentBlock programs">
  <ul class="card-list">
    {{#each program}}
    <li class="card">
      <div class="header">
        <div class="program">{{title}}</div>
        <div class="option">{{option}}</div>
      </div>
      <div class="meta">
        <div class="types">
          <dl>
            <dt>Degree type</dt>
            {{#each degreeType}}
              <dd>
                <a href="{{url}}" aria-label="{{../title}} {{type}}">{{type}}</a>
              </dd>
            {{/each}}
          </dl>
        </div>
        <div class="location">
          {{#each department}}
          <div class="department">
            <a href="{{url}}">{{name}}</a>
          </div>
          {{/each}}
        </div>
      </div>
    </li>
    {{/each}}
  </ul>
</article>
{
  "program": [
    {
      "title": "Program Title",
      "option": "Option within a Department",
      "degreeType": [
        {
          "type": "Master's",
          "url": "#"
        },
        {
          "type": "Major",
          "url": "#"
        },
        {
          "type": "Minor",
          "url": "#"
        }
      ],
      "department": [
        {
          "name": "Department Name",
          "url": "#"
        },
        {
          "name": "Secondary Department Name",
          "url": "#"
        }
      ]
    }
  ]
}