Additional Examples

This page collects extra patterns that you can copy, paste, and adapt in Canvas. All examples use semantic HTML and inline styles so they work within the Rich Content Editor. They are intended as starting points for common course content layouts.

Useful references

Learning outcomes card

A simple card for listing learning outcomes at the top of a page or module. The heading and list are grouped in a lightly shaded box.

By the end of this activity you should be able to:

Describe the key stages in the workflow.
Explain the main advantages and limitations.
Apply the method to a simple example.

<div style="
  margin-bottom: 1rem;
  background: #f5f5f5;
  padding: 1rem 1.25rem;
  border: 1px solid #dddddd;
  border-radius: 0.5rem;
">
  <h3 style="margin-top: 0; margin-bottom: 0.5rem">
    By the end of this activity you should be able to:
  </h3>
  <ul style="margin: 0; padding-left: 1.25rem">
    <li>Describe the key stages in the workflow.</li>
    <li>Explain the main advantages and limitations.</li>
    <li>Apply the method to a simple example.</li>
  </ul>
</div>

Assessment summary panel

A compact panel summarising key information about an assessment. Uses a simple two-column layout on larger screens and a stacked layout on narrow screens.

Assessment summary

Due date

Friday 15 November, 16:00

Weighting

30% of module mark

Format

Short written report (1500-2000 words)

Submission

Upload as a single PDF via Canvas

<div style="
  margin-bottom: 1rem;
  border: 1px solid #dddddd;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
">
  <h3 style="margin-top: 0; margin-bottom: 0.75rem">Assessment summary</h3>
  <div style="
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1.5rem;
  ">
    <div>
      <p style="margin: 0; font-size: 0.9rem; color: #555555">Due date</p>
      <p style="margin: 0.1rem 0 0"><strong>Friday 15 November, 16:00</strong></p>
    </div>
    <div>
      <p style="margin: 0; font-size: 0.9rem; color: #555555">Weighting</p>
      <p style="margin: 0.1rem 0 0"><strong>30% of module mark</strong></p>
    </div>
    <div>
      <p style="margin: 0; font-size: 0.9rem; color: #555555">Format</p>
      <p style="margin: 0.1rem 0 0">Short written report (1500-2000 words)</p>
    </div>
    <div>
      <p style="margin: 0; font-size: 0.9rem; color: #555555">Submission</p>
      <p style="margin: 0.1rem 0 0">Upload as a single PDF via Canvas</p>
    </div>
  </div>
</div>

Call-to-action strip (link styled as a button)

A full-width strip with a short message and a prominent link styled as a button. This can be used to point learners to the next activity or an important resource.

Ready to continue? Work through the next activity to apply these ideas in practice.

Go to the next activity

<div style="
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: #0000cd;
  color: #ffffff;
  border-radius: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
">
  <p style="margin: 0; font-size: 1rem">
    Ready to continue? Work through the next activity to apply these ideas in practice.
  </p>
  <a href="#" style="
    display: inline-block;
    padding: 0.6rem 1.1rem;
    background: #ffffff;
    color: #0000cd;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
  ">
    Go to the next activity
  </a>
</div>

Side-by-side text and notes

A two-column layout where the main explanation appears on the left and supporting notes or tips appear on the right. On narrow screens, the columns stack vertically.

Main explanation

Use this area for the primary content, such as a worked example, step-by-step explanation, or short case study.

Keep paragraphs short and use headings or lists to break up dense information.

<div style="
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
">
  <div style="
    padding: 1rem 1.25rem;
    border: 1px solid #dddddd;
    border-radius: 0.5rem;
    background: #ffffff;
  ">
    <h3 style="margin-top: 0; margin-bottom: 0.75rem">Main explanation</h3>
    <p style="margin-top: 0">
      Use this area for the primary content, such as a worked example,
      step-by-step explanation, or short case study.
    </p>
    <p>Keep paragraphs short and use headings or lists to break up dense information.</p>
  </div>
  <aside style="
    padding: 1rem 1.25rem;
    border: 1px solid #dddddd;
    border-radius: 0.5rem;
    background: #f5f5f5;
  ">
    <h3 style="margin-top: 0; margin-bottom: 0.75rem">Notes and tips</h3>
    <ul style="margin: 0; padding-left: 1.25rem">
      <li>Highlight common mistakes or misconceptions.</li>
      <li>Provide quick reminders of key definitions.</li>
      <li>Link to related resources or further reading.</li>
    </ul>
  </aside>
</div>

Resource cards grid

A responsive grid of cards for key resources or readings. The layout uses CSS Grid with auto-fit and minmax() to adapt to different screen sizes.

Core reading

Introduction to the main concepts covered in this week.

View article

Worked example

Step-by-step example showing how to apply the method.

Open example

Optional extension

Extra material if you would like to explore further.

Explore more

<div style="
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
">
  <div style="
    border: 1px solid #dddddd;
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    background: #ffffff;
  ">
    <h3 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 1.05rem">Core reading</h3>
    <p style="margin-top: 0; margin-bottom: 0.5rem">
      Introduction to the main concepts covered in this week.
    </p>
    <a href="#" style="font-weight: 600">View article</a>
  </div>
  <div style="
    border: 1px solid #dddddd;
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    background: #ffffff;
  ">
    <h3 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 1.05rem">Worked example</h3>
    <p style="margin-top: 0; margin-bottom: 0.5rem">
      Step-by-step example showing how to apply the method.
    </p>
    <a href="#" style="font-weight: 600">Open example</a>
  </div>
  <div style="
    border: 1px solid #dddddd;
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    background: #ffffff;
  ">
    <h3 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 1.05rem">Optional extension</h3>
    <p style="margin-top: 0; margin-bottom: 0.5rem">
      Extra material if you would like to explore further.
    </p>
    <a href="#" style="font-weight: 600">Explore more</a>
  </div>
</div>

Resource cards grid with images

This version adds thumbnail images to each resource card using external placeholder image URLs. Replace the image sources and alt text with your own content when you are ready.