Resource card

ISQ Rise implementation preview

Light background shown; verify against a tinted or dark surface where the component is used that way in course.

Use when / avoid when

Anatomy

• Eyebrow (“Resource”)
• Title
• Short description
• Action (.isq-resource-actions)

States

Responsive behaviour

Image and content restack to one column at narrow widths.

Accessibility

• Descriptive aria-label on the action stating destination and that it opens in a new tab.
• External-link icon is aria-hidden with a text label carrying the meaning.

Current implementation

Theme and platform: ISQ · Articulate Rise

Implementation type: custom-html

The classes below belong to the ISQ implementation namespace. A future theme may implement the same component contract with different tokens and class names.

Dependencies: Production CSS only.

Code

<div class="isq-resource-card">
  <div class="isq-resource-card__layout">
    <div class="isq-resource-card__content">
      <span class="isq-eyebrow">Resource</span>
      <h2 class="isq-heading isq-heading--medium">Developmental and Harmful Sexual Behaviour Continuum at a Glance</h2>
      <p class="isq-body">The continuum can help you consider whether behaviour appears age-appropriate, concerning, problematic or harmful.</p>
      <div class="isq-resource-actions">
        <a href="#" class="isq-button isq-button--primary" target="_blank" rel="noopener noreferrer" aria-label="Open the Developmental and Harmful Sexual Behaviour Continuum resource in a new tab">Open resource<span aria-hidden="true">↗</span></a>
      </div>
    </div>
  </div>
</div>

Classes used: .isq-resource-card, .isq-resource-card__layout, .isq-resource-card__media, .isq-resource-card__content, .isq-resource-actions, .isq-eyebrow

ISQ production stylesheet reference →

Related items

Related patterns: Resource

Related components: Button

Governance metadata