Content Page

The Starter Kit comes with two Content Page Templates that are great for creating learning experiences. These pages are perfect for Course Makers who may want something a little more than the Blank Page template.

The basic Content Page can be used for course content such as assignment instructions or course handouts. It comes with a banner image, a page heading, and several subheadings. There is also a textbox to call out important information or next steps for students.

Explore

Preview

Content Page template includes subheading, a text box, and a conclusion subheading.

Content Page

Code


<!DOCTYPE html>
<html lang="en">

    <head>        <!--© 2022 Arizona Board of Regents on behalf of The University of Arizona.-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Content Page</title>

        <!--CUSTOM STYLESHEETS-->
        <link rel="stylesheet"
            href="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Stylesheets/main-styles.css">
    </head>

    <body>
        <div class="uacm-banner">
            <img src="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Images/Banners/UArizona/UArizona_03.jpg"
                alt="A mural called The Cactus Comet Rides Again by
                artist Danny Martin">
        </div>

        <div class="uacm-container">
            <h1 class="uacm-text-center">Content Page
            </h1>
            <p>#ToDo: Edit Content Page title.</p>
            <h2>#ToDo: Edit Subheading</h2>
            <p>#ToDo: Add main idea or reading content. Learn more about the <a
                    href="https://coursemaker.arizona.edu/build/page-templates/content-page"
                    target="_blank">Content Page</a> template in the Course
                Maker
                website.</p>
            <div class="uacm-text-box uacm-bg-cool-gray">
                <p>#ToDo: Use this Text Box to highlight important
                    concepts, ideas, or next steps. Learn more about the <a
                        href="https://coursemaker.arizona.edu/build/building-blocks/text-box"
                        target="_blank">Text Box</a> building block in the
                    Course Maker
                    website. Remove if not
                    needed.</p>
            </div>
            <h2>#ToDo: Edit Conclusion Subheading</h2>
            <p>#ToDo: Add a conclusion and wrap up the content
                page.</p>
        </div>
        <!--CUSTOM SCRIPTS-->
        <script
            src="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Scripts/custom-script.js">
        </script>
    </body>

</html>

Content Page with Image

The Content Page with Image is a versatile and straightforward page for using an image to show an example or help explain a concept to students. It comes with a banner image, a page heading, and several subheadings. There is a large placeholder image that you can replace with your own to illustrate a concept or idea to students.

Explore

Preview

Content Page with Image option

Content Page with Image

Code


<!DOCTYPE html>
<html lang="en">

    <head>
        <!--© 2022 Arizona Board of Regents on behalf of The University of Arizona.-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Content Page with Image</title>

        <!--CUSTOM STYLESHEETS-->
        <link rel="stylesheet"
            href="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Stylesheets/main-styles.css">
    </head>

    <body>
        <div class="uacm-banner">
            <img src="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Images/Banners/UArizona/UArizona_03.jpg"
                alt="A mural called The Cactus Comet Rides Again by
                artist Danny Martin">
        </div>
        <div class="uacm-container">
            <h1 class="uacm-text-center">Content Page with Image
            </h1>
            <p>#ToDo: Edit Content Page title.</p>
            <h2>#ToDo: Edit Subheading</h2>
            <p>#ToDo: Add main idea or reading content. Learn more about the <a
                    href="https://coursemaker.arizona.edu/build/page-templates/content-page"
                    target="_blank">Content Page</a> template in the Course
                Maker
                website.</p>
            <p>#ToDo: Add visual imagery to the page. For content-related
                images, add a descriptive alternative (alt)
                text.
                For more information, go to <a target="_blank"
                    href="https://coursemaker.arizona.edu/build/building-blocks/image">Image</a>
                building block in the Course Maker website.</p>
            <div class="uacm-image centered image-width-70">
                <figure>
                    #ToDo: Add an image by clicking
                    <em>outside</em> the left edge of the image until you see
                    the blinking cursor. Remove placeholder image and todo note.

                    <img alt="placeholder"
                        src="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Images/Placeholders/Placeholder_03.jpg" />
                    <figcaption>
                        #ToDo: Figure 1: Edit this caption and/or add photo
                        credit/source.
                    </figcaption>
                </figure>
            </div>
            <h2>#ToDo: Edit Conclusion Subheading</h2>
            <p>#ToDo: Add a conclusion and wrap up the content
                page.</p>
        </div>
        <!--CUSTOM SCRIPTS-->
        <script
            src="https://coursemaker.arizona.edu/sites/default/files/shared/CourseMaker/Assets/Scripts/custom-script.js">
        </script>

    </body>

</html>