2025

Living Component Page

This page represent all of the available components on instructure.com and their variations.

Please note this is not all encompassing!

Primary CTA button

Secondary CTA button

Microheading

Text component heading

The Basic Text component is used for standard body copy across the site. It ensures consistency in typography, spacing, and accessibility. Use this component for paragraphs, instructions, and other general content where a simple text treatment is needed.

Centered CTA button

Text component

Usage guidelines

This is a basic text component. It provides a consistent reading experience across all pages and adapts responsively to different screen sizes.

Ideal for body text, descriptions, and non-heading content.
Supports semantic HTML tags (e.g., <p>, <strong>, <em>) for accessibility and SEO.
Default text should follow brand voice and tone standards.

Text component features

Cards (up to 5 suggested)

Use cards to break down supporting details or list features related to the main text block.

Modular by Design

Components are built for flexibility—easily rearranged to meet evolving content needs.

Responsive Out of the Box

Each card automatically adjusts to screen size and layout, maintaining usability across devices.

Editor-Friendly

With clear fields for headline and body text for easy updates.

Brand-Aligned Styling

All typography, spacing, and borders follow the global design tokens—no custom overrides needed.

Optimized for Accessibility

Cards support semantic HTML and pass WCAG 2.2 AA standards by default for color contrast and readability.

Text component

Optional Highlight Block

Use the Mission Statement style to call out bold messaging or unique positioning. This variant is ideal for emphasizing brand values, strategic priorities, or high-impact content.

You can include a mission statement

This layout is ideal for reinforcing purpose-driven messaging.

Component:

CTA Banner

Use this component when you need a high-visibility call-to-action at the mid or bottom of a landing page. Ideal for campaigns, product promotions, lead generation, or key messaging.

CTA styling

Secondary CTA styling

Component: Benefit Cards

Use this component to highlight individual integrations, services, or platform capabilities. Benefit Cards are best used in groups (3–5 cards) to surface a collection of related features, partners, or use cases. Each card includes a logo or icon, headline, body text, and optional CTA.

Microheading

Heading: Benefit Cards Grid

CTA is optional

Image/logo (optional):

Appears at the top or bottom. Recommended for brand recognizability or visual enhancement.

Image/Logo (optional):

Appears at the top (for logos like Google or Zoom) or bottom (as shown in the “Manage across the enterprise” card). Recommended for brand recognizability or visual enhancement.

Title (optional):

Clear, concise benefit or feature name. Should be short and scannable (1 line preferred).

Body Text (required): 2–3 sentences max. Use to briefly explain the feature, partnership, or benefit. Aim for plain language and action-oriented phrasing.

CTA (optional):

Use “Learn More” or a custom link label to drive traffic to a supporting page. If omitted, the card can be static.

CTA is optional

Microheading

Heading for Benefit Cards Slider

CTA is optional

Similar to Grid

Benefit Cards are best used in groups (3–5 cards) to surface a collection of related features, partners, or use cases.

CTA usage

Use CTAs when additional context or product detail is available on another page.

CTA is optional

Optional visual placement

The icon or logo can be positioned at the top or bottom.

CTA Banner

Standard CTA w/ form

Use this component when you need a high-visibility call-to-action at the top or bottom of a landing page. Ideal for campaigns, product promotions, lead generation, or key messaging.