Page Template - HTML Elements

Updated on Jun 16, 2025

You can use HTML code to put certain useful functionalities in Brightspace.

There are already standard templates for pages, such as a blank page with banner, a contact page, a page with tables, etc. See How do I use Page templates in my content? for more information.

There are also other options for content. These make long texts or pages with a lot of information more readable and clear. These are:

Accordions;
Flipcards;
Tabs.

If you don't want to use the templates, but do want to use the elements, then these options are covered below, including the copyable HTML code to use for them.

Note! You can copy the HTML code using the ‘Click to Copy’ sign at the bottom of the code. First paste the code into Word using “Keep text only” and then copy it into the Source Code (step 3 below). If you don't do this, the functionality will not work.

Instructions

In Brightspace, go to the course and then the Unit or Lesson in which you want to place the functionality. Then click Create New > Page.

In the new screen, click the </> logo (source code);
Here, delete everything that is already there;
For each functionality, copy and paste the corresponding code;
After this, click Save;
Now you can modify the content of the functionality, e.g. title and content of a Flipcard;
When you're done, click Save and Close.

Edit Activity - Alma Kamphuis Sandbox - Google Chrome

You can also experiment and combine code yourself. Please note that each piece of code has start and end code that appears in each text to be copied. However, you only use this once per page:

Start code

End code

Accordions

What are accordions?

By using an accordion, you can create a collapsible block in your course content. So for example, you can create chapters, showing only the chapter titles. When someone clicks on such a title, the actual chapter is displayed.

In the case of long texts, such an accordion can make everything easier to read and clear.

Examples

Accordion

Accordion Group of 2

Accordeon Group of 2 - Alma Kamphuis Sandbox - Google Chrome

Accordion

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<h2 class="card-title">Accordion Title</h2> </div> <div class="collapse">

<p>Insert Accordion content here.</p>

</div>

</div> </div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Accordion: Group of 2

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst</p>

<p class="instruction">Select each item to learn more.</p>

<p class="btn btn-secondary expandall">Open All Panels</p>

<!-- Comment out this button to add the custom open/close text

<button type="button" data-panel-open="Open All Panels" data-panel-close="Close All Panels" class="btn ac-btn btn-secondary expandall" aria-expanded="false">Open All Panels</button> -->

<h2 class="card-title">Accordion 1 of 2</h2>

</div>

<p>Insert Accordion 1 of 2 content here.</p>

</div>

<h2 class="card-title">Accordion 2 of 2</h2>

</div>

<p>Insert Accordion 2 of 2 content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Accordion: Group of 3

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<p class="btn btn-secondary expandall">Open All Panels</p>

<!-- Comment out this button to add the custom open/close text

<button type="button" data-panel-open="Open All Panels" data-panel-close="Close All Panels" class="btn ac-btn btn-secondary expandall" aria-expanded="false">Open All Panels</button> -->

<h2 class="card-title">Accordion 1 of 3</h2>

</div>

<p>Insert Accordion 1 of 3 content here.</p>

</div>

<h2 class="card-title">Accordion 2 of 3</h2>

</div>

<p>Insert Accordion 2 of 3 content here.</p>

</div>

<h2 class="card-title">Accordion 3 of 3</h2>

</div>

<p>Insert Accordion 3 of 3 content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Accordion: Group of 4

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<p class="btn btn-secondary expandall">Open All Panels</p>

<!-- Comment out this button to add the custom open/close text

<button type="button" data-panel-open="Open All Panels" data-panel-close="Close All Panels" class="btn ac-btn btn-secondary expandall" aria-expanded="false">Open All Panels</button> -->

<h2 class="card-title">Accordion 1 of 4</h2>

</div>

<p>Insert Accordion 1 of 4 content here.</p>

</div>

<h2 class="card-title">Accordion 2 of 4</h2>

</div>

<p>Insert Accordion 2 of 4 content here.</p>

</div>

<h2 class="card-title">Accordion 3 of 4</h2>

</div>

<p>Insert Accordion 3 of 4 content here.</p>

</div>

<h2 class="card-title">Accordion 4 of 4</h2>

</div>

<p>Insert Accordion 4 of 4 content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flipcards

What are Flipcards?

Simply put, a flip card is an effective learning tool with information on one or both sides. Usually, one side contains a question, term or concept, while the other side contains the answer or explanation. By clicking on the card, it flips over and you see the correct answer or more information.

Examples

Flipcards Group of 2

Flipcards Centered Header Group of 3

Flip Cards w/ Centered Header: Group of 3 - Alma Kamphuis Sandbox - Google Chrome

Flipcards: Group of 2

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flipcards Centered Header: Group of 2

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flipcards: Group of 3

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flipcards Centered Header: Group of 3

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flipcards with image: Group of 2

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flipcards with image: Group of 3

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Click and Reveal: Standard

Click and Reveal is a different form of a Flipcard.

Example

Click and Reveal: Standard - Alma Kamphuis Sandbox - Google Chrome

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p>Johnny's mother has three children. The first child is named April. The second child is named May. What is the third child's name?</p>

<p class="btn btn-primary btn-reveal">Show Answer</p>

<p>Johnny, of course!</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Tabs

What are tabs?

Tabs are little panels or windows that you use to organise and display different sections of a page. They allow you to present different types of information in an orderly manner.

Examples

Tabs: Group of 2

Tabs: Group of 4

Tabs: Group of 2

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each tab to learn more.</p>

<div class="list-group flex-md-row text-center"><a class="list-group-item list-group-item-action active">Horizontal Tab 1 of 2 </a> <a class="list-group-item list-group-item-action">Horizontal Tab 2 of 2</a></div>

</div>

<p>Horizontal Tab 1 of 2 content</p>

</div>

<p>Horizontal Tab 2 of 2 content</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Tabs: Group of 3

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each tab to learn more.</p>

<div class="list-group flex-md-row text-center"><a class="list-group-item list-group-item-action active">Horizontal Tab 1 of 3</a> <a class="list-group-item list-group-item-action">Horizontal Tab 2 of 3</a> <a class="list-group-item list-group-item-action">Horizontal Tab 3 of 3</a></div>

</div>

<p>Horizontal Tab 1 of 3 content</p>

</div>

<p>Horizontal Tab 2 of 3 content</p>

</div>

<p>Horizontal Tab 3 of 3 content</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Tabs: Group of 4

Code to be copied:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each tab to learn more.</p>

<div class="list-group flex-md-row text-center"><a class="list-group-item list-group-item-action active">Horizontal Tab 1</a> <a class="list-group-item list-group-item-action">Horizontal Tab 2</a> <a class="list-group-item list-group-item-action">Horizontal Tab 3</a> <a class="list-group-item list-group-item-action">Horizontal Tab 4</a></div>

</div>

<p>Horizontal Tab 1 of 4 content</p>

</div>

<p>Horizontal Tab 2 of 4 content</p>

</div>

<p>Horizontal Tab 3 of 4 content</p>

</div>

<p>Horizontal Tab 4 of 4 content</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Code for:

Beginning

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

Click to copy

End code

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Previous Article How do I add a file from OneDrive to my course?

Next Article How do I use Assignments?

Brightspace-support

Page Template - HTML Elements

What are accordions?

What are Flipcards?

What are tabs?

Code for:

Beginning

End code

What's New?

Adding course Content & Activities