Content component

Resource card

Explains a resource and provides a clear action to open it.

core Version introduced: 1.0.0 Platforms: Rise Owner: Design and development steward

Live preview

Rendered with production Rise CSS

Resource

Developmental and Harmful Sexual Behaviour Continuum at a Glance

The continuum can help you consider whether behaviour appears age-appropriate, concerning, problematic or harmful.

Open resource

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

Use when / avoid when

Use when

A supplementary document or external guidance that needs context before the click.

Avoid when

Essential learning is available only through the external link — bring it into the course.

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.

Implementation

Type: custom-html

Dependencies: Production CSS only.

Code

HTML


  
    
      Resource
      Developmental and Harmful Sexual Behaviour Continuum at a Glance
      The continuum can help you consider whether behaviour appears age-appropriate, concerning, problematic or harmful.
      
        Open resource↗

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

Production stylesheet reference →

Related items

Related patterns: Resource

Related components: Button

Governance metadata

Owner	Design and development steward
Status	Core
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	None recorded.