HTML Templates - Static Elements

Last Modified on 03/25/2026 3:01 pm CDT

NOTE: To access the HTML Templates, please follow the steps in Getting Started with HTML Templates. For screenshots of all available Elements, please see the HTML Templates Catalog.

This page includes samples of some commonly used page elements under LSC-Colors_Elements_Static.

You can copy multiple elements from this page and paste them into other HTML editors. By combining elements, you can create new layouts for your courses.

NOTE: When copying over text from a Word document to an HTML editor, it is recommended practice to use the Right Click → Paste as Plain Text (Ctrl+Shift+V) command to paste copied text as unformatted text to the HTML editor.

Video Instructions

  1. Please follow the instructions below on how to replace the video placeholder within the Video element:

    1. After copy/pasting the Video element to your destination HTML template, scroll down until you see the Place your video here placeholder. 
    2. Carefully click the area left of the video placeholder that is within the dark blue-colored video container, hit the [Delete] key on your keyboard to remove the placeholder. 
    3. If done correctly, the video placeholder should now be deleted, and you are left with a blank area with the video placeholder gone. You should also see the input cursor blinking at the lower left of where the placeholder was. This process can be demonstrated from the GIF below:

      GIF demonstrating the removal of the video placeholder by selecting the placeholder area inside the video container and pressing Delete to clear it.

    4. Click the [Insert Stuff] icon in the toolbar above.

      Editor toolbar with the Insert Stuff icon highlighted for adding media or external content.
    5. From the [Insert Stuff] window, select [YuJa Media Chooser].

      Insert Stuff menu with the YuJa Media Chooser option highlighted for selection.
    6. You have three options to upload your video:
      1. [Choose Media] - Search for your YuJa video.
      2. [Upload Media] - Upload a video, audio file, or document from your computer, or link to a video from the web such as YouTube.
      3. [Record Content] - Start a recording using the YuJa Software Capture app.

    YuJa Media Chooser screen with Choose Media, Upload Media, and Record Content options highlighted.

    Images

    Image Align Left

    Floating image to the left with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image.

    Image aligned left with text wrapping; example shows an image floated to the left with caption beneath.

    Image Align Right

    Floating image to the right with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image.

    Image aligned right with text wrapping; example shows an image floated to the right with caption beneath.

    Image Align Full

    The image automatically adjusts to the width of the screen (even smaller screens). You can replace the image and the text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image. The recommended replacement image size is at least 1200 pixels wide.

    Image set to full‑width alignment, expanding to the container width with a caption area below.

    Banners

    You can select and copy any of the available banners and then paste them into the HTML Editor, replacing any existing image placeholders. If you create your own banners, the recommended image size is at least 1200 pixels wide and 400 pixels high.

    1. Right-Click on the image then click on [Edit Image].

      Right‑click menu on a banner image showing the ‘Edit image’ option highlighted.
    2. You will be able to right-click on the image in the screen and save or copy the image through the [Save image as...] or [Copy image] options. Pasted the copied image into your destination HTML editor as desired.

      Right‑click menu on the image showing options to Save image as or Copy image within the Edit Image window.

    Side Images

    Follow the same instructions for adding banners to replace side images.

    Side image with vertical banner graphic replacing the default placeholder.Side image with a vertical photo used to replace the default placeholder.

    Elements

    Ordered Lists

    There are five types of Ordered Lists included:

    1. Large Number
      Large‑number ordered list showing items numbered 01, 02, and 03.
    2. Large Single Number
    3. Box Number List
    4. Box Alphabet List
    5. Step List

    Lead Text

    Lead text can be used to begin a topic through a attention-catching facts or critical points.
    Lead text styled as an introductory paragraph emphasizing key information.

    Blockquote

    The blockquote element represents a section that is quoted from another source.
    Blockquote with styled quoted text and a citation footer.

    Jumbotron

    Jumbotrons are useful for disrupting the flow of content to direct the learner attention to an important fact, statistic, or concept.
    Jumbotron with highlighted text block used to call out important content.

    Callouts

    A callout allows you to insert a unique piece of content within the regular content. Three Callout formats are provided: Standard, Icon, and Announcement.

    1. Standard Callout
      Standard callout box highlighting important information.
    2. Icon Callout
      Icon callout box with an information icon and highlighted text.
    3. Announcement Callout
      Announcement callout with a megaphone icon and highlighted announcement text.

    Tables

    Tables are a convenient way to organize content and demonstrate the relationship between multiple pieces of content.

    NOTE: D2L has a number of options for editing Tables. Some style options may not work with the Table Template.

    Table with two column headers and multiple rows, followed by a table caption.

    Panels

    Panels are useful for displaying two or three pieces of closely linked but separate content, for example, two cases exploring the same law or two examples of applying the same principles.

    1. Two Column Panels
      Two‑column panel layout showing Panel 1 and Panel 2 side by side.
    2. Three Column Panels

    Typography

    Typography provides samples showing the different fonts and colors used for headings and paragraph text.

    Typography sample showing heading and paragraph font styles and colors.


Related Articles

Was this article helpful?
Thank you for your feedback!