Component Library

SME Guidance

Where it goes: Near the top of the topic page, after the title.

What to write:

• 1–3 sentences that briefly describe what this topic is about.
• Optional: why this topic matters for students’ lives or future learning.

Label in treatment doc: Topic Summary

DRS Code Snippet

<div class="topic-summary">
  <p>
    <i class="fa-solid fa-star" aria-hidden="true"></i>
    This section provides an overview of the topic content and key takeaways.
  </p>
</div>

SME Guidance

Where it goes: At the beginning or end of a lesson page.

What to write:

• 1 italicized sentence that summarizes what students will be able to do by the end of the lesson.
• Use student-friendly language and keep it short.

Label in treatment doc: Lesson Summary

DRS Code Snippet

<div class="lesson-summary">
  <p>
    <i class="fa-solid fa-info-circle" aria-hidden="true"></i>
    Put the learning objectives here.
  </p>
</div>

SME Guidance

Where it goes: Near the top of a topic or lesson page, after the Topic Summary.

What to write:

• Use the sentence frame: You will learn ___ so that/because ___.
• Focus on the main skill or understanding for this page or lesson.

Label in treatment doc: Learning Intentions Callout

DRS Code Snippet

<div class="callout-learning-intentions">
  <h3>Learning Intentions</h3>
  <p>You will learn [blank] so that/because [blank].</p>
</div>

SME Guidance

Where it goes: Before a key activity or assignment.

What to write:

• Clear, step-by-step directions students must follow.
• Use short bullet points, one action per bullet.
• Use this orange version when instructions are central to the task.

Label in treatment doc: Instructions – Orange

DRS Code Snippet

<div class="callout callout-instructions-orange">
  <h3>
    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
    Instructions
  </h3>
  <ul>
    <li>[Type Instructions Here]</li>
  </ul>
</div>

SME Guidance

Where it goes: Near an activity that needs some guidance but is not high-stakes.

What to write:

• Reminders, tips, or light guidance.
• Still use bullet points, but keep tone informational and supportive.

Label in treatment doc: Instructions – White

DRS Code Snippet

<div class="callout callout-instructions-white">
  <h3>
    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
    Instructions
  </h3>
  <ul>
    <li>[Type Instructions Here]</li>
  </ul>
</div>

SME Guidance

Where it goes: Near common pitfalls or misconceptions.

What to write:

• Short “watch out” notes or mistake warnings.
• Help students avoid confusion or common errors.
• Keep to 1–3 bullets.

Label in treatment doc: Instructions – Blue

DRS Code Snippet

<div class="callout callout-instructions-blue">
  <h3>
    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
    Instructions
  </h3>
  <ul>
    <li>[Type Instructions Here]</li>
  </ul>
</div>

SME Guidance

Where it goes: After Learning Intentions or near the start of a lesson section.

What to write:

• One or more big-picture questions that focus student thinking.
• A 2–5 sentence paragraph that frames why the question matters.

Label in treatment doc: Guiding Question

DRS Code Snippet

<h4 class="guiding-question">
  <i class="fa-solid fa-comment" aria-hidden="true"></i>
  Guiding Question
</h4>
<p><strong>[Insert question(s) here. Use a bulleted list if there are multiple.]</strong></p>
<p>[2–5 sentence lead-in paragraph]</p>

SME Guidance

Where it goes: Near the start or end of a lesson page.

What to write:

• One “I can…” statement for each level (Emerging, Developing, Proficient, Distinguished).
• Focus on observable evidence of learning (what students can do or show).

Label in treatment doc: Success Criteria

DRS Code Snippet

<div class="success-criteria">
  <h4 class="section-heading">Success Criteria</h4>
  <ul>
    <li><strong>Emerging:</strong> I can …</li>
    <li><strong>Developing:</strong> I can …</li>
    <li><strong>Proficient:</strong> I can …</li>
    <li><strong>Distinguished:</strong> I can …</li>
  </ul>
</div>

SME Guidance

Where it goes: Throughout the page wherever explanatory text is needed.

What to write:

• A clear heading (e.g., “Key Ideas,” “Background,” “Example 1”).
• Short, readable paragraphs using student-friendly language.

Label in treatment doc: Section (Main Body Text)

DRS Code Snippet

<div class="nso-section">
  <h4 class="section-heading">Section Title</h4>
  <p>Write content here.</p>
  <p>Write more content here.</p>
</div>

SME Guidance

Where it goes: Wherever you embed a key instructional video.

What to write:

• Short, descriptive title (include duration in parentheses).
• 1–3 sentences telling students what to listen or watch for.
• Source/creator name for the caption.

Label in treatment doc: Video Container

DRS Code Snippet

<div class="video-container">
  <h4>
    <i class="fa-solid fa-circle-play" aria-hidden="true"></i>
    Watch: I am Maru (3:25 mins)
  </h4>
  <p>Type here to add a video description and look-fors for learners.</p>
  <div class="video-embed">
    {{embed code}}
  </div>
  <p class="figure-caption">
    <em>Source: Type the name of the creator of the video here.</em>
  </p>
</div>

SME Guidance

Where it goes: Next to text that the image illustrates or clarifies.

What to write:

• Image title.
• Source information and any required credit.
• Alt text or description (for accessibility, provided to DRS).

Label in treatment doc: Image Container

DRS Code Snippet

<div class="image-container">
  <h4 class="figure-title">{{Image Title}}</h4>
  <img class="img-fluid rounded shadow-sm" src="https://placehold.co/600x400" alt="Descriptive alt text.">
  <p class="figure-caption">
    <em>Source: {{Source}}</em>
  </p>
</div>

SME Guidance

Where it goes: Any time you need to compare ideas or organize information.

What to write:

• A short table title.
• Column headings in the treatment doc.
• Each row’s cell contents listed clearly.

Label in treatment doc: Styled Table

DRS Code Snippet

<h3 class="styled-table-heading">[Table Title]</h3>
<table class="styled-table">
  <thead>
    <tr>
      <th>Column One</th>
      <th>Column Two</th>
      <th>Column Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
    </tr>
  </tbody>
</table>

SME Guidance

Where it goes: At the bottom of a lesson or content page.

What to write:

• 1–2 sentences previewing what students will see next.

Label in treatment doc: Up Next – Grey

DRS Code Snippet

<div class="up-next-box">
  <h4>
    Up Next
    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
  </h4>
  <p>[Insert 1–2 sentences to lead up to the next page.]</p>
</div>

SME Guidance

Where it goes: Same as the grey version, at the bottom of a page.

What to write:

• Use the white variation when it better matches the surrounding page layout.

Label in treatment doc: Up Next – White

DRS Code Snippet

<div class="up-next-box-2">
  <h4>
    Up Next
    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
  </h4>
  <p>[Insert 1–2 sentences to lead up to the next page.]</p>
</div>

SME Guidance

Where it goes: On assignment pages or pages that lead directly into a submission.

What to write:

• Exactly what students must turn in.
• Accepted formats (PDF, image, doc, etc.).
• Naming conventions and where to upload.

Label in treatment doc: Submission Guidelines

DRS Code Snippet

<div class="submission-guidelines">
  <h4>
    <i class="fa-solid fa-check-circle" aria-hidden="true"></i>
    Submission Guidelines
  </h4>
  <ul>
    <li>[Describe what students must submit]</li>
    <li>[Include file types, naming conventions, or steps]</li>
    <li>[Add any required links or upload instructions]</li>
  </ul>
</div>

SME Guidance

Where it goes: Next to any task that requires a specific tool or platform.

What to write:

• Tool name and how to access it.
• Simple steps to follow.
• What to try if something does not work.

Label in treatment doc: Technical Instructions

DRS Code Snippet

<div class="technical-instructions">
  <h4>
    <i class="fa-solid fa-gear" aria-hidden="true"></i>
    Technical Instructions
  </h4>
  <ul>
    <li>[Explain the tool or feature students must use]</li>
    <li>[Add steps or screenshots as needed]</li>
    <li>[Include troubleshooting tips, options, or alternatives]</li>
  </ul>
</div>

SME Guidance

Where it goes: At the end of a lesson, after a reading, or before a reflection task.

What to write:

• 1–5 open-ended questions or prompts.
• Questions that invite students to make connections, reflect, or apply learning.

Label in treatment doc: Questions or Prompts

DRS Code Snippet

<div class="questions-prompts">
  <h4>
    <i class="fa-solid fa-pen-to-square" aria-hidden="true"></i>
    Questions or Prompts
  </h4>
  <ol>
    <li>[Prompt or question 1]</li>
    <li>[Prompt or question 2]</li>
    <li>[Prompt or question 3]</li>
  </ol>
</div>

SME Guidance

Where it goes: Near an assignment or practice task.

What to write:

• Short description of what the example shows.
• Optional screenshot or description of the artifact.
• What students should notice or learn from the example.

Label in treatment doc: Student Example

DRS Code Snippet

<div class="student-example">
  <h4>
    <i class="fa-solid fa-user-graduate" aria-hidden="true"></i>
    Student Example
  </h4>
  <p>[Describe the example and what students should notice.]</p>
  <div class="example-media">
    <img src="https://placehold.co/700x350" alt="Example student work.">
    <div class="example-caption">
      Short caption describing this example.
    </div>
  </div>
</div>