Missouri State University Pattern Library

Academics card

There are no notes for this item.

  • Handle: @academics-card
  • Preview:
  • Filesystem Path: src\components\02-blocks\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"><span class="tag">Master&#x27;s</span></a>
                        </dd>
                        <dd>
                            <a href="#" aria-label="Program Title Major"><span class="tag">Major</span></a>
                        </dd>
                        <dd>
                            <a href="#" aria-label="Program Title Minor"><span class="tag">Minor</span></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}}"><span class="tag">{{type}}</span></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": "#"
        }
      ]
    }
  ]
}