<ul style="background-color: #d2ec13;">
<li><span style="font-size: 18pt; color: #ba372a;"><a href="#tabs-1">Tab One</a></span></li>
<li><span style="font-size: 18pt; color: #ba372a;"><a href="#tabs-2">Tab Two</a></span></li>
<li><span style="font-size: 18pt; color: #ba372a;"><a href="#tabs-3">Tab Three</a></span></li>
<li><span style="font-size: 18pt; color: #ba372a;"><a href="#tabs-4">Tab Four</a></span></li>

</ul>
<div id="tabs-1">Tab 1 content</div>
<div id="tabs-2">Tab 2 content</div>
<div id="tabs-3">Tab 3 content</div>
<div id="tabs-4">Tab 4 content</div>
</div>

You will use this code in the HTML Editor in your Canvas Page to create your Tabs. The tab labels and content are both customizable.

After you have accessed the code above, create a new page in Canvas(for information on how to do this, visit the Canvas Guides). Next, enter the HTML Editor.

Paste the code you received from either the Canvas Style Guide or from the text file above.

In the HTML code, the top section creates your Tab Labels. You can modify these to reflect the content you are creating.

The bottom section is where your Tab Content lives. Make sure your individual content stays between the <div></div> tags.

Note: You can modify this content with the Canvas Rich Content Editor. However, we suggest modifying your content from within the HTML editor to ensure you stay within your <div> tags.

To add additional tabs, begin by copying and pasting the last Tab Label in the list.

Next, you will want to modify the link (<a href="#tabs-1">) to reflect the next tab in numerical order as well as the Tab Label (Week 1). Your labels do not have to be organized numerically, but this example utilizes a weekly organizational structure.

Now you will need to tell the tab where to go by adding additional Tab Content. Copy and Paste the last item.

Like above, you will need to modify your tab ID and content information. Change the <div id="tabs-1"> to be the next item in numerical order to reflect the Tab Label you added above. Add your Content Information under each content tab ID.

Your final code may look something like the following (with Lorem Ipsum added as place holder text):

Within your <div></div> tags of your Tab Content, you can add additional HTML. So, if you wish to add images, decorative text, etc, the Tabs will support this.