Excelsior Bootstrap is an extended version of the Bootstrap framework, known for its open-source nature and its facilitation of responsive and mobile-first web page development. Bootstrap offers a variety of pre-designed components such as columns, callouts, and accordions, along with a responsive grid system. This approach involves leveraging Bootstrap classes to achieve typography, layout, and aesthetic elements wherever possible. For unique design elements beyond Bootstrap’s capabilities, additional custom classes are introduced to complement Bootstrap’s features. This strategy ensures that code remains clean while maximizing Bootstrap’s benefits. While this approach may result in a higher number of classes in the HTML, it allows for fine-tuning of design elements, a fundamental feature of Bootstrap.
Layout
Layout in web design refers to how elements are arranged on a web page. It involves organizing content, such as text, images, and multimedia, in a structured and visually appealing way. Layouts can vary widely depending on the design goals, but they often include elements like headers, navigation menus, content areas, and footers. Effective layout design helps users navigate the website easily, find information quickly, and understand the hierarchy of content.
Page Container
All HTML pages that use Excelsior Bootstrap must start with an unique page container. For Excelsior Bootstrap to take effect, all elements and components must be nested inside a div element with an id of excelsior-bootstrap and another div element with a class of page-container.
The Canvas LMS already adds the role="main" landmark, so it is not required.
However, when using the Excelsior Bootstrap outside of the Canvas LMS or another place that does not specify the main landmark, adding role="main" to any one of the outer div elements will let screen reader know the significance of the content in the page when compared to the other elements on the webpage.
role="main" is an ARIA Landmark. It is recommended to have only one main landmark per HTML page.
Buttons
Two button styles are available for use. One for internal navigation, and the other one is for resource links.
<a class="btn btn-internal" href="#">Link for internal navigation</a>
<a class="btn btn-resource" href="#">Link to resource</a>
To use a button, create an a element with the following classes: btn and btn-internal (for internal navigation) or btn-btn-resource (for resources).
Pending…
Cards
Cards are containers for content that can include a variety of elements like text, images, links, and buttons, all organized in a neat, rectangular block. Think of a card as a physical card that contains information and images neatly organized in a small space. Cards enhance user experience by providing consistency and clarity, ensuring content is easy to digest.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
To create a group of cards with equal height, follow these steps:
Start by creating a div element with the following classes: row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3. This div element is the container to hold a “deck of cards”, and its classes instruct the container to display the cards in a mobile responsive grid.
In the grid container, each card is wrapped in a div element with a class of col. The div.col element signifies that each card should be its own column.
A card starts with a div element with a class name of card. To make the card to have equal heights with other cards in a row, add the h-100 class.
Inside the div.card element:
Create a div element with a class of card-header. This div.card-header is optional and should only contains a heading tag.
Create a img element with a class of card-img-top. This img.card-img-top is optional.
Create a div element with a class of card-body. This div.card-body element contains the card title and body texts.
Create a div element with a class of card-footer. This div.card-footer element is optional, and anything content inside of it will always be pushed to the bottom.
To use heading tags effectively, it’s important to follow a logical hierarchy, starting with h1 for the main heading (which is not applicable if working within Canvas LMS) and using subsequent tags (h2, h3, etc.) for subheadings in descending order. To change the font size of the heading, use the appropriate classes that correspond to heading tags. For example, h2 is needed but prefer the font size of a h4 tag. To achieve that aesthetic, add the class of h4 to the h2 tag: <h2 class="h4">...</h2>.
Pending…
Callouts
A callout is a component used to display important messages or information to users. It is typically styled as a colored box that stands out from the rest of the content on the page. Excelsior Bootstrap provides several predefined styles for callouts, such as success, info, warning, and danger, each represented by a different color.
Illa videamus, quae a te de amicitia dicta sunt. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Negat enim summo bono afferre incrementum diem. Videamus animi partes, quarum est conspectus illustrior; Quid ergo hoc loco intellegit honestum?
Heading
Illa videamus, quae a te de amicitia dicta sunt. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Negat enim summo bono afferre incrementum diem. Videamus animi partes, quarum est conspectus illustrior; Quid ergo hoc loco intellegit honestum?
Heading
Illa videamus, quae a te de amicitia dicta sunt. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Negat enim summo bono afferre incrementum diem. Videamus animi partes, quarum est conspectus illustrior; Quid ergo hoc loco intellegit honestum?
To create a callout, create a div element with the classes of callout and callout-[prompt]</code >, where [prompt] can be guide (purple), quote (blue), and skills (green). For accessibility, make sure to include role="complementary" attribute.
Pending…
Tip Boxes
A tip box is a component used to display tips, reminders, and notes to users. Like a callout, it is styled as a colored box that stands out from the rest of the content on the page. Excelsior Bootstrap provides three tip box styles: tip, reminder, and note.
<div class="tip" role="alert">
<p><i class="bi bi-info-circle"></i><strong> Tip:</strong> Use the Tip box to provide helpful hints or resources for navigating tools or completing activities in the course.</p>
</div>
<div class="tip tip-reminder" role="alert">
<p><i class="bi bi-exclamation-triangle"></i><strong> Reminder:</strong> Use the Reminder box to call out reminders to students – this could be to mention timelines, assignment requirements, or other alerts that directly impact successful completion of a course element.</p>
</div>
<div class="tip tip-note" role="alert">
<p><i class="bi bi-pencil-square"></i><strong> Note:</strong> Use the Note box to call out specific learning materials or lesson details that are key things to consider or be aware of related to the course.</p>
</div>
Tip: Use the Tip box to provide helpful hints or resources for navigating tools or completing activities in the course.
Reminder: Use the Reminder box to call out reminders to students – this could be to mention timelines, assignment requirements, or other alerts that directly impact successful completion of a course element.
Note: Use the Note box to call out specific learning materials or lesson details that are key things to consider or be aware of related to the course.
To create a tip box, create a div element with the class of tip. To change the tip box to a reminder or note box, append the respective class: tip-reminder or tip-note.
Pending…
Horizontal Rule (hr)
The hr element, or horizontal rule, is used in HTML documents as a thematic break to visually and semantically separate different sections of content. It usually appears as a horizontal line, aiding in the logical organization and readability of web pages. For screen reader users, the hr is announced as a “separator,” which helps indicate a shift in content or theme, enhancing accessibility. It is crucial that the hr element is used appropriately to reflect actual content divisions rather than merely for decorative purposes, to avoid confusion, especially for those relying on assistive technologies. Its use should align with its semantic purpose: to denote a meaningful break in the content.
Excelsior Bootstrap offers an alternative to the hr element. The horizontal line is thicker and has an icon badge that is aligned in the middle. If the hr element is used for decorative purposes, remember to add the role="presentation" attribute.
<hr class="decorative large bi bi-house-door-fill" />
<hr class="decorative large bi bi-bookmark-star-fill" />
<hr class="decorative large bi bi-bookmark-check-fill" />
<hr class="decorative large bi bi-chat-square-dots-fill" />
<hr class="decorative large bi bi-journal-text" />
<hr class="decorative large bi bi-x-diamond-fill" />
<hr class="decorative large bi bi-search" />
<hr class="decorative large bi bi-pencil-fill" />
<hr class="decorative large bi bi-people-fill" />
<hr class="decorative large bi bi-clipboard-check-fill" />
A horizontal rule is created in HTML using the hr element, which is self-closing. This means the correct way to write it is <hr />, although just <hr> is also widely accepted. However, using <hr>…</hr> is incorrect because the <hr> element does not contain any content and therefore does not need a closing tag.
To use Excelsior Bootstrap’s horizontal rule appearance, add the decorative class to the hr element. For the icon, add the appropriate icon classes, which is available under the Icons section. To adjust the icon size: add the small or large class.
Pending…
Images
Images enhance HTML pages by adding visual appeal, supporting content, and improving user engagement. They make text-heavy pages more approachable and illustrate complex ideas. Additionally, when used with appropriate alt text, images improve accessibility for visually impaired users.
Responsive Image
To make image mobile responsive, add the img-fluid class to the img tag. Image will automatically scale to size of the container width. Responsive image will never scale bigger than its original size dimension.
Aligning Images
Aligning image to the left or right is acheive with the use of float classes.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam quod quia hic architecto ipsam ea eius corporis cupiditate. Esse facere accusamus error delectus ratione nam harum quidem quis assumenda eius. Est laborum voluptatibus sunt, repellendus modi saepe nulla, culpa rerum, asperiores corrupti velit accusamus mollitia unde tempora omnis alias voluptatem deserunt? Dolorum assumenda aliquam, dignissimos pariatur quis quisquam recusandae deserunt! Vel ipsam ex cum officia numquam nemo nobis tempora, eius itaque quia. Numquam, excepturi quaerat, deserunt vitae eligendi quibusdam dolores sint repellat laborum a necessitatibus accusantium! Facilis ducimus voluptatum excepturi! Sunt corporis nobis veniam fugit harum vero velit dolorum perferendis dolor nisi, distinctio nemo laboriosam eum ipsam qui dolores debitis cumque numquam soluta ut autem quas repellat pariatur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam quod quia hic architecto ipsam ea eius corporis cupiditate. Esse facere accusamus error delectus ratione nam harum quidem quis assumenda eius. Est laborum voluptatibus sunt, repellendus modi saepe nulla, culpa rerum, asperiores corrupti velit accusamus mollitia unde tempora omnis alias voluptatem deserunt? Dolorum assumenda aliquam, dignissimos pariatur quis quisquam recusandae deserunt! Vel ipsam ex cum officia numquam nemo nobis tempora, eius itaque quia. Numquam, excepturi quaerat, deserunt vitae eligendi quibusdam dolores sint repellat laborum a necessitatibus accusantium! Facilis ducimus voluptatum excepturi! Sunt corporis nobis veniam fugit harum vero velit dolorum perferendis dolor nisi, distinctio nemo laboriosam eum ipsam qui dolores debitis cumque numquam soluta ut autem quas repellat pariatur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam quod quia hic architecto ipsam ea eius corporis cupiditate. Esse facere accusamus error delectus ratione nam harum quidem quis assumenda eius. Est laborum voluptatibus sunt, repellendus modi saepe nulla, culpa rerum, asperiores corrupti velit accusamus mollitia unde tempora omnis alias voluptatem deserunt? Dolorum assumenda aliquam, dignissimos pariatur quis quisquam recusandae deserunt!
Vel ipsam ex cum officia numquam nemo nobis tempora, eius itaque quia. Numquam, excepturi quaerat, deserunt vitae eligendi quibusdam dolores sint repellat laborum a necessitatibus accusantium! Facilis ducimus voluptatum excepturi! Sunt corporis nobis veniam fugit harum vero velit dolorum perferendis dolor nisi, distinctio nemo laboriosam eum ipsam qui dolores debitis cumque numquam soluta ut autem quas repellat pariatur?
Center-aligned image is a block-level element. It is not feasible to have an image center-aligned on a page while also having text wrap around it. Text wrapping around an image typically requires the image to be floated either to the left or right.
To left-aligned image, add the float-start and me-3 classes to the img tag. The me-3 (or margin end) class adds spacing to the right side of the image, so that text is not displayed against it.
To right-aligned image, add the float-end and ms-3 classes to the img tag. The ms-3 (or margin start) class adds spacing to the left side of the image, so that text is not displayed against it.
To center-aligned an image, add the d-block and mx-auto classes to the img tag. The mx-auto (or margin left and right) class adds equal spacing to the left and right side of the image. Center-aligned image is a block level element. If the image is followed by texts, add the mb-3 class to the img tag to create a spacing between the image and text.
Pending…
Image Caption
Displaying related images and text by using the figure element.
To add a caption to an image, create a figure tag with the class of figure. Inside the figure tag, create an img tag with the class of figure-img. Right after it, create a figcaption tag with the class of figure-caption.
Figure element is a block-level element, but it can be left- or right-aligned as well. Rather than adding the floating helper classes to the img tag, they are added to the figure tag instead.
Pending…
Tables
Table is particularly useful for presenting data that is best understood in a comparative manner, such as financial reports, timetables, and statistical data. It should be used for displaying tabular data rather than for layout purposes. Using tables for controlling webpage layout is outdated and discouraged, as it leads to more complex and less accessible code, especially for screen readers and other assistive technologies.
Creating the HTML structure for a table involves several key elements and steps.
Begin by declaring a table element with a class of table. This serves as the container for all your tabular data. The table element wraps all the other elements that make up the table, including rows, headers, and cells.
Inside the table, start with the thead element if there are column headers. This section is specifically for headers to define the columns of the table. Within the thead element, add a tr (table row) element that will contain each header. Then, insert th (table header) elements within the tr. Each th represents a column header and can include attributes to specify scope and other properties to improve accessibility and styling.
After defining the headers, use the tbody element to encapsulate the main body of the table. This section contains all the data rows. Inside tbody, add tr elements for each row of data in the table. Each row represents a single set of related data items.
Within each tr element in the tbody, include td (table data) elements. Each td corresponds to a cell in the table and should contain individual data items that align with the headers defined in th elements. The number of td elements in each row should match the number of th elements in the headers to maintain a consistent structure.
Optionally, add a tfoot section if the table requires a footer for summarizing data or providing additional information at the bottom. Like thead, the tfoot contains tr and th or td elements depending on the design.
To make a table accessible, particularly for screen readers, ensure proper use of the scope attribute in the th elements to specify whether they are headers for rows, columns, or groups of rows or columns. To enhance accessibility further, also consider using the aria roles and properties. To learn more about accessible tables, visit Creating Accessible Tables by webaim.org. To see an example of a tabular table that uses caption element and scopes attributes, visit <caption>: The Table Caption element.
A table is not for laying out HTML page structures; it is for tabular data. However, if circumstances ask for it, be sure to add role="presentation" to the table, which helps a screen reader to not interpret it as a table.
Pending…
Striped Rows
Add table-striped class to apply striping to any table rows.
<table class="table table-striped">
...
</table>
Year
Title
Rating
1997
The Philosopher’s Stone
4.45 / 5
1998
The Chamber of Secrets
4.39 / 5
1999
The Prisoner of Azkaban
4.54 / 5
2000
The Goblet of Fire
4.54 / 5
2003
The Order of the Phoneix
4.47 / 5
2005
The Half-Blood Prince
4.55 / 5
2007
The Deathly Hallows
4.62 / 5
Pending…
Compact
To make a table more compact (or with less cell paddings), add the table-sm class to the table element.
Borders
To add borders to a table and its cells, add the tabled-bordered class to the table tag.
To remove all borders from a table and its cells, add the table-borderless class to the table tag.
To add a thicker border to any table groups (thead, tbody, and tfoot), add the table-group-divider class respectively.
Sizes
To change the width of a table, add one of the following classes to the table tag: w-25, w-50, and w-75. The w stands for width, and the number is the percentage of the width relative to the parent (or the outer element where the table is nested).
Table is a block-level element by default. After a table’s width has been adjusted to a smaller size, it can be aligned left or right by using the float classes.
Columns
Columns are used to create responsive grid layouts. It is useful in scenarios where content needs to be organized in a scalable and adaptable way, such as in image galleries, product listings, or any content that benefits from a clean, organized presentation that adjusts nicely across different device screens.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consectetur, eveniet inventore autem cupiditate aliquam. Tempora debitis minima porro, odit error odio accusamus voluptatem laudantium eos, quia officia quo doloremque.
A molestias autem hic error. Cupiditate, neque nisi nobis debitis perferendis laborum quos exercitationem in deserunt ducimus harum explicabo aperiam est illum distinctio! Earum soluta ullam voluptas debitis laborum dolorem!
Architecto perspiciatis dignissimos, placeat maxime, aspernatur saepe dolores natus, maiores earum odio eaque repudiandae?
To use columns, create a div tag with the following classes row, row-cols-1, row-cols-sm-2, row-cols-md-3, and g-3. These classes play specific roles in structuring these layouts.
The row class is fundamental, establishing a horizontal group of columns.
The row-cols-1 class dictates that by default, there should be one column per row.
The row-cols-sm-2 class adjusts the layout to two columns per row on small devices (like tablets).
The row-cols-md-3 class changes it to three columns per row on medium devices (like desktops).
The g-3 class adds spacing (gutters) of 3 units (max total of 5 units) between columns and rows, ensuring the content within the grid is visually separated and easier to read.
Together, these classes providing a fluid experience as screen sizes vary. The maximum number of columns that a row can have is 12. A column element is simply a div tag with the class of col. To make all columns in a row to have the same equal height, add the h-100 to the all of the div.col elements.
Pending…
Code
Display inline code or code block text with syntax highlighting by using the code element and the language-[name] class, where [name] is the name of the coding langauge in all lowercases. The current supported languages are Markup, HTML, XML, MathML, CSS, JavaScript, Java, Python, and R.
<code class="language-javascript">const whoAmI = (isWizard) ? 'A Wizard!' : 'I am a what?';</code>
const whoAmI = (isWizard) ? 'A Wizard!' : 'I am a what?';
Pending…
To display a block of code, use the pre (preformatted) element with the class of language-[name]. Inside the pre element, create a code element. All code should be inside of this code element.
Line numbers can be turned on by appending the line-numbers class to the pre element.
<pre class="language-javascript line-numbers">
<code>
const harry = new Character();
harry.hasScar = true;
harry.role = ( isWizard( harry ) ) ? 'A Wizard!' : 'I am a what?';
function isWizard( character ) {
return ( character.hasScar ) ? true : false;
}
</code>
</pre>
const harry = new Character();
harry.hasScar = true;
harry.role = ( isWizard( harry ) ) ? 'A Wizard!' : 'I am a what?';
function isWizard( character ) {
return ( character.hasScar ) ? true : false;
}
Pending…
To show the HTML code, make sure to escape the < and > symbols. That is, change < to < and > to >.
Task Group
The task group element is a list group. As its name suggested, it lists a group of tasks.
Review: Lesson | Title
By Wednesday at 11:59 PM EST
Review: Lesson | Title
By Wednesday at 11:59 PM EST
Discuss: Title
By Saturday at 11:59 PM EST
Complete: Assignment | Title
By Sunday at 11:59 PM EST
Complete: Knowledge Check | Title
By Sunday at 11:59 PM EST
Engage: Live Session | Title
By Sunday at 11:59 PM EST
To create a task group, create an ul element with the classes of list-group and list-group-flush. Each task item is a list (li) element with the class of list-group-item. Inside the li element, it starts with an icon and follow by the respective task content and due date.
Pending…
Components
Components rely on JavaScript to provide dynamic functionality and interactive features. These components use JavaScript for behaviors like toggling, collapsing, and transitioning, which can’t be achieved with HTML and CSS alone. They are designed to be both functional and aesthetically pleasing right out of the box.
Accordion
An accordion is a user interface (UI) component used to manage content in a collapsible and expandable manner. It typically consists of a list of items, where each item can be expanded to reveal more content or collapsed to hide it. Accordions are useful for displaying a large amount of information in a limited space, allowing users to focus on the content they are interested in while keeping the rest hidden.
The easiest way to create an accordion is to use the Bootstrap Accordion Generator. The accordion generator can create a new accordion from scratch or import an existing accordion HTML for further editing.
To use an accordion, create a div element with the class accordion to contain all your accordion items. Each accordion item consists of a header (an anchor or a tag with the class accordion-button) and a body (a div with the class accordion-collapse).
Bootstrap uses a button element instead of a element inside the accordion header. However, Canvas’s editor forbids the use of form elements, including button. Therefore, the anchor (a) element is used instead to achieve the similar effect and functionality.
Each accordion item’s children elements must have the proper attributes and values defined in order for the accordion as a whole to function. For example, each a.accordion-button element must have the following attributes and values:
role="button" – telling the screen reader that this element functions like button.
data-bs-toggle="collapse" – telling Bootstrap that this element is in charge of collapsing the targeted element.
data-bs-target="#[collapse_content_id]" – the targeted element that is collapsible. Replace [collapse_content_id] with the targeted element’s ID.
aria-expanded="[true/false]" – telling screen reader the current state of the targeted element: true if it is opened, and false if it is closed.
aria-controls="[collapse_content_id]" – telling the screen reader which element that is being targeted. Replace [collapse_content_id] with the targeted element’s ID, without the # symbol.
For the accordion body (div.accordion-collapse) element, it must have an unique ID value. To keep an accordion item open on initial page load, add the class show to the div.accordion-collapse element of the item AND add the class collapsed to the corresponding a.accordion-button element.
Pending…
Tabs
Tabs are a user interface (UI) component used to organize content in a compact and structured way, allowing users to navigate between different views or sections of content within the same page. They are essentially a group of clickable tabs that toggle the display of associated content panels. Each tab acts as a navigational header for the content it displays, and only one tab can be active at a time, showing its corresponding content panel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod cum dixissent, ille contra. Etenim semper illud extra est, quod arte comprehenditur. At iam decimum annum in spelunca iacet. Duo Reges: constructio interrete. In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Eadem nunc mea adversum te oratio est.
Septem autem illi non suo, sed populorum suffragio omnium nominati sunt.
Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis.
Nunc dicam de voluptate, nihil scilicet novi, ea tamen, quae te ipsum probaturum esse confidam.
Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem.
To-Do
Review
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Magni enim aestimabat pecuniam non modo non contra leges.
By Thursday at 11:59 PM EST
Discussion
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
By Saturday at 11:59 PM EST
Submit
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
By Sunday at 11:59 PM EST
Resources
The following are required and supplemental resources for this module:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod cum dixissent, ille contra. Etenim semper illud extra est, quod arte comprehenditur. At iam decimum annum in spelunca iacet. Duo Reges: constructio interrete. In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Eadem nunc mea adversum te oratio est.
Septem autem illi non suo, sed populorum suffragio omnium nominati sunt.
Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis.
Nunc dicam de voluptate, nihil scilicet novi, ea tamen, quae te ipsum probaturum esse confidam.
Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem.
To-Do
Review
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Magni enim aestimabat pecuniam non modo non contra leges.
By Wednesday at 11:59 PM EST
Discussion
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
By Saturday at 11:59 PM EST
Submit
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
By Sunday at 11:59 PM EST
Resources
The following are required and supplemental resources for this module:
[Required Reading]
Textbook
Articles
Module Notes
To create a set of tabs, follow these steps:
Start by creating a div element with a class of excelsior-tabs or replace the class to excelsior-lg-tabs for the large tab appearance. This will serve as the container for the tabs.
Inside the div.excelsior-tabs or div.excelsior-lg-tabs, create a ul element with classes nav and nav-tabs. This will create the tab navigation.
Within the ul element, create li elements with a class of nav-item and a role attribute set to presentation. Inside each li, create an a element with a class of nav-link. This will be each tab’s link.
Add an id attribute to each a element to uniquely identify it.
Add a data-bs-toggle attribute set to tab and a data-bs-target attribute set to the corresponding tab’s id to enable tab switching.
Include an aria-controls attribute set to the corresponding tab’s id and an aria-selected attribute set to true for the active tab and false for the inactive tabs.
Append the class active to an a element to set the tab to active.
Inside each a element, you can add the tab’s name and an optional icon.
After the ul element, create a div element with a class of tab-content. This will contain the tab panes.
Inside the div.tab-content, create a div element for each tab pane with classes of tab-pane and fade.
Append show and active classes if the current tab pane is to remain open and active.
Add an id attribute to each tab pane to uniquely identify it.
Add a role attribute set to tabpanel and an aria-labelledby attribute set to the corresponding tab’s id to associate the tab with its content.
Each tab pane content must start with a heading! To use heading tags effectively, it’s important to follow a logical hierarchy, starting with h1 for the main heading (which is not applicable if working with Canvas LMS) and using subsequent tags (h2, h3, etc.) for subheadings in descending order. To change the font size of the heading, use the appropriate classes that correspond to heading tags. For example, h2 is needed but prefer the font size of a h4 tag. To acheive that aesthetic, add the class of
h4 to the h2 tag: <h2 class="h4">...</h2>.
Every tab content needs to start with a heading. HTML heading tags are not only important for visual organization but also play a critical role in making content accessible to screen readers. Screen readers rely on heading tags to navigate through the content and provide users with a clear understanding of the structure of the page. When heading tags are used properly, screen readers can convey the hierarchy of the content, allowing users to easily jump to different sections of the page.
Pending…
Page Navigation
Page navigation is located at the top of a page and contains anchored links to various sections of a page content.
Several steps are needed to build this sticky navigation.
Create a div element with the ID page-content-nav to serve as the main container for the navigation links. Apply the class sticky-top to ensure the navigation sticks to the top of the parent container as the user scrolls down the page.
Inside the container, add an a tag with the ID page-content-mobile-nav-btn. This will act as a toggle button to toggle the visiblity of the navigation links when the screen is small.
Set the role attribute to “button” to make it accessible.
Use href="#page-content-links" to link the button to the collapsible content, which is containing the navigation links.
Include data-bs-toggle="collapse" to activate the collapsing behavior on click.
Add aria-expanded="false" and aria-controls="page-content-links" for accessibility, indicating that the linked collapsible container is initially closed.
Inside the anchor, add an i tag with classes bi and bi-list to represent the button with an icon. Add a text label like “On this page” for clarity.
Below the button, create another div with the ID page-content-links and the class collapse to make it collapsible.
Inside this div, insert a nav element to contain the navigation links.
Create a ul with the class nav to start the list.
Add li elements with the class nav-item for each navigation item inside the ul.nav element.
Inside each li, place an a with the class nav-link. Set the href attribute to target the IDs of the content sections (e.g., #exampleHeading1).
Mark the first link as active with the active class.
Below the div#page-content-nav container, create content sections using using appropriate heading tags with corresponding IDs (e.g., id=”exampleHeading1″ for the first section).
Add p tags or any other necessary HTML to fill in the content for each section.
Pending…
Carousel
Carousel, or slider, is a component for cycling through elements—generally images or slides of text—like a slideshow.
Creating a carousel involves several steps.
Step 1: Create the Carousel Container
Start with a div element to serve as the main container for the carousel. Assign it a unique ID and add the class names carousel and slide to enable carousel functionality and animations.
Step 2: Set Up Carousel Indicators
Inside the carousel container, add a div with the class carousel-indicators. This will contain navigation indicators for each slide.
For each slide in the carousel, add an a element inside the indicators container. These elements should have:
href pointing to the unique ID of the carousel container.
The role attribute set to “button“.
Data attributes data-bs-target to link to the carousel’s unique ID and data-bs-slide-to to indicate the slide index (starting from 0).
The aria-label for accessibility, describing each slide.
The first indicator should have the class active and aria-current="true" to denote it as the currently active slide.
Step 3: Create the Carousel Inner
Add another div inside the carousel container with the class carousel-inner. This serves as the wrapper for the slides.
Within the div.carousel-inner, create multiple div elements with the class carousel-item. The first div.carousel-item should also have the class active to show it first when the carousel loads.
Inside each div.carousel-item, include an img tag with classes d-block and w-100 to make the image responsive and scale properly. Set the src attribute to the path of your image and provide an appropriate alt text.
Step 4: Add Carousel Captions (Optional)
Within each div.carousel-item, you can optionally add a div with the class carousel-caption to display text overlaying the image.
Inside the div.carousel-caption, use appropriate heading tag for the title and p tag for additional text or description.
Step 5: Include Navigation Controls
To allow users to navigate through the slides, add two a elements within the carousel container:
One with the class carousel-control-prev for navigating to the previous slide, and another with carousel-control-next for navigating to the next slide.
Each control should have a href attribute pointing to the carousel’s unique ID, a role attribute set as “button“, and a data attribute data-bs-target linking back to the carousel’s unique ID, and data-bs-slide set to either “prev” or “next“.
Include span elements within each control for visual elements (like arrows) and accessibility features. Use classes such as carousel-control-prev-icon and carousel-control-next-icon, and another span element with visually-hidden class to provide a text description like “Previous” or “Next”.
Verify that all links (hrefs) and IDs match so that the controls, indicators, and carousel container are correctly associated.
Pending…
Tooltips
Tooltip is small, interactive, text-based popover that appears when the user hovers over, focuses on, or touches an element.
<a class="btn btn-secondary" href="#" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip on top</a>
<a class="btn btn-secondary" href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</a>
<a class="btn btn-secondary" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</a>
<a class="btn btn-secondary" href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</a>
Identify the HTML elements to which the tooltips should be added. Tooltips should be added to keyboard-focusable elements, such as buttons, links, or images. Once the element has been identified:
Add the data-toggle="tooltip" attribute. This attribute activates the tooltip functionality.
Use the data-bs-title attribute to specify the text that will appear in the tooltip.
Use data-placement attribute to define the position of the tooltip relative to the element (e.g., top, bottom, left, right).
Optional: set the data-html attribute to true to include HTML inside the tooltip text.
Keep tooltips accessible to keyboard and assistive technology users by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or buttons).
Pending…
Popovers
Similar to tooltips, popovers are larger, activated/de-activated on clicks, and can include HTML content like headings, links, and other text.
<a class="btn btn-secondary" href="#" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">Popover on top</a>
<a class="btn btn-secondary" href="#" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">Popover on right</a>
<a class="btn btn-secondary" href="#" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">Popover on bottom</a>
<a class="btn btn-secondary" href="#" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">Popover on left</a>
<a class="btn btn-primary" href="#" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</a>
Identify the HTML elements to which the popovers should be added. Popovers should be added to keyboard-focusable elements, such as buttons, links, or images. Once the element has been identified:
Add the data-toggle="popover" attribute. This attribute is necessary to initialize the popover when the element is interacted with.
Optional: use the data-bs-title attribute to set the header text of the popover.
Use data-content to set the text or HTML content that will be displayed inside the popover body.
Use data-placement attribute to define the position of the popover relative to the element (e.g., top, bottom, left, right).
Optional: set the data-html attribute to true to include HTML inside the tooltip text.
Keep popovers accessible to keyboard and assistive technology users by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or buttons).
Avoid adding an excessive amount of content in popovers with the html option. Once popovers are displayed, their content is tied to the trigger element with the aria-describedby attribute, causing all of the popover’s content to be announced to assistive technology users as one long, uninterrupted stream.
Pending…
Back to Top
Back to top is a component for scrolling a page back to the top of the page.
To add the back to top button, simply add the back-to-top class to the div.page-container element.
Pending…
Helpers
Helpers are a set of utility classes designed to provide quick and easy ways to customize the appearance and behavior of elements.
Floating
float-start – align element to the left side fo the page.
float-end – align element to the right side fo the page.
Clearfix
Clear floats by adding clearfix to the parent element.
<div class="clearfix">
<div class="float-start">Float left on all viewport sizes</div>
<div class="float-end">Float right on all viewport sizes</div>
</div>
Pending…
Icons
Icons that are approved for use in Excelsior University courses.
<i class="bi bi-book"> </i>
To use an icon, create an i element with the following classes bi and bi-[icon-name], where [icon-name] is the name of the icon.
<div id="excelsior-bootstrap">
<div class="page-container">
<img class="decorative-banner" role="presentation" src="[path-to-image-source]" />
<hr class="decorative large bi bi-house-door-fill" role="presentation" />
<div class="homepage-content clearfix">
<h2>Welcome to [Course Title]!</h2>
<div class="float-md-end ms-0 ms-md-3 mb-3 mb-md-0 ratio ratio-16x9 ratio-md-0">
<iframe src="[url]" width="480" height="270" allowfullscreen="allowfullscreen" allow="fullscreen; encrypted-media"></iframe>
</div>
<p>[This course explores big data's impact on industries through the Internet of Things (IoT). Students study industry strategies for leveraging data in decision-making, and they learn to design data visualizations through processes like data modeling, processing (aggregation, filtering), mapping data to graphical attributes, and strategic visual encoding based on visual perception properties and the task(s) at hand.]</p>
<p>To access your course materials, select the <em>Modules</em> option from the navigation menu.</p>
<p><strong><a class="btn btn-internal" title="Instructor Welcome & Introductions" href="[url]"><i class="bi bi-person-fill"></i> Your Instructor and Peers</strong></a></p>
</div>
<div class="start-here-banner">
<div class="col offset-md-5">
<h3>Ready to get started?</h3>
<p>Before diving into the course and starting your exploration of the contents, visit the Getting Started icon to review course essentials (use of Canvas, Policies, and Support Resources), plan for success in the course, and introduce yourself.</p>
<p><strong><a class="btn btn-start-here btn-lg" title="Getting Started" href="[url]">Start Here</a></strong></p>
</div>
</div>
</div>
</div>
<div id="excelsior-bootstrap">
<div class="page-container back-to-top">
<img class="decorative-banner" role="presentation" src="[path-to-image-source]" alt="" />
<hr class="decorative large bi bi-x-diamond-fill" role="presentation" />
<div id="page-content-nav">
<a id="page-content-mobile-nav-btn" role="button" href="#page-content-links" data-bs-toggle="collapse" aria-expanded="false" aria-controls="page-content-links"><i class="bi bi-list"></i> On this page</a>
<div id="page-content-links" class="collapse">
<nav>
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#exampleHeading1"><i class="bi bi-play-btn"></i> Introduction</a></li>
<li class="nav-item"><a class="nav-link" href="#exampleHeading2"><i class="bi bi-list-task"></i> Module Outcomes</a></li>
<li class="nav-item"><a class="nav-link" href="#exampleHeading3"><i class="bi bi-journal-bookmark"></i> Module Resources</a></li>
<li class="nav-item"><a class="nav-link" href="#exampleHeading4"><i class="bi bi-check-circle"></i> Module Tasks</a></li>
</ul>
</nav>
</div>
</div>
<h2 id="exampleHeading1">Introduction</h2>
<div class="float-md-end ms-0 ms-md-3 mb-3 mb-md-0 ratio ratio-16x9 ratio-md-0">
<iframe src="[url]" width="480" height="270" allowfullscreen="allowfullscreen" allow="encrypted-media"></iframe>
</div>
<h3 class="h5">Welcome to Module #!</h3>
<p>In this module... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 id="exampleHeading2">Module Outcomes</h2>
<p>By the end of this module you will be able to:</p>
<ul>
<li>Septem autem illi non suo, sed populorum suffragio omnium nominati sunt.</li>
<li>Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis.</li>
<li>Nunc dicam de voluptate, nihil scilicet novi, ea tamen, quae te ipsum probaturum esse confidam.</li>
<li>Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem.</li>
</ul>
<h2 id="exampleHeading3">Module Resources</h2>
<p>Review the following required and supplemental resources:</p>
<div class="accordion">
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button" role="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Required</a></h3>
<div id="collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
<div class="callout callout-guide">
<ul>
<li><strong>Read:</strong> <em>Book title</em>, Chapter #</li>
<li><strong>Watch: </strong>Video Title (##:##)</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button" role="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Supplemental</a></h3>
<div id="collapseTwo" class="accordion-collapse collapse show">
<div class="accordion-body">
<div class="callout callout-guide">
<ul>
<li><strong>Read:</strong> Resource Title | <Insert one or two sentences here to talk about the importance of this resource or what it covers.></li>
<li><strong>Watch: </strong>Video Title (##:##) | <Insert one or two sentences here to talk about the importance of this resource or what it covers.></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h2 id="exampleHeading4">Module Tasks</h2>
<p>In this module, you will complete the following tasks:</p>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="bi bi-search"></i> <strong>Review:</strong> Lesson | Title<br />By Wednesday at 11:59 PM EST</li>
<li class="list-group-item"><i class="bi bi-search"></i> <strong>Review:</strong> Lesson | Title<br />By Wednesday at 11:59 PM EST</li>
<li class="list-group-item"><i class="bi bi-chat-square-dots"></i> <strong>Discuss:</strong> Title<br />By Saturday at 11:59 PM EST</li>
<li class="list-group-item"><i class="bi bi-pencil"></i> <strong>Complete: </strong>Assignment | Title<br />By Sunday at 11:59 PM EST</li>
<li class="list-group-item"><i class="bi bi-clipboard-check"></i> <strong>Complete: </strong>Knowledge Check | Title<br />By Sunday at 11:59 PM EST</li>
<li class="list-group-item"><i class="bi bi-people"></i> <strong>Engage: </strong>Live Session | Title<br />By Sunday at 11:59 PM EST</li>
</ul>
<hr class="decorative" role="presentation" />
</div>
</div>
<div id="excelsior-bootstrap">
<div class="page-container">
<hr role="presentation" class="decorative large bi bi-search" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <strong>commodo consequat</strong>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <a href="https://link.com" target="_blank" rel="noopener">cupidatat non proident</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ul>
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <strong>commodo consequat</strong>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Sub-Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr role="presentation" class="decorative" />
</div>
</div>
<div id="excelsior-bootstrap">
<div class="page-container">
<hr class="decorative large bi bi-search" role="presentation" />
<h2>[Header]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Key Concepts</h3>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card h-100">
<img class="card-img-top" role="presentation" src="[path-to-image-source]" alt="" />
<div class="card-body">
<h4 class="h5 card-title">Concept 1</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean. Commodo elit at imperdiet dui accumsan sit amet. Nunc vel risus commodo viverra maecenas accumsan. Malesuada pellentesque elit eget gravida. Nec ultrices dui sapien eget mi.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img class="card-img-top" role="presentation" src="[path-to-image-source]" alt="" />
<div class="card-body">
<h4 class="h5 card-title">Concept 2</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean. Commodo elit at imperdiet dui accumsan sit amet. Nunc vel risus commodo viverra maecenas accumsan. Malesuada pellentesque elit eget gravida. Nec ultrices dui sapien eget mi.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img class="card-img-top" role="presentation" src="[path-to-image-source]" alt="" />
<div class="card-body">
<h4 class="h5 card-title">Concept 3</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean. Commodo elit at imperdiet dui accumsan sit amet. Nunc vel risus commodo viverra maecenas accumsan. Malesuada pellentesque elit eget gravida. Nec ultrices dui sapien eget mi.</p>
</div>
</div>
</div>
</div>
</div>
<hr class="decorative" role="presentation" />
</div>
</div>
<div id="excelsior-bootstrap">
<div class="page-container">
<hr class="decorative large bi bi-chat-square-dots-fill" role="presentation" />
<div class="excelsior-tabs">
<ul class="nav nav-tabs">
<li class="nav-item" role="presentation">
<a id="read-tab" class="nav-link active" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#read-pane" aria-controls="read-pane" aria-selected="true"><i class="bi bi-book"></i> Review</a>
</li>
<li class="nav-item" role="presentation">
<a id="post-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#post-pane" aria-controls="post-pane" aria-selected="false"><i class="bi bi-pencil-square"></i> Post</a>
</li>
<li class="nav-item" role="presentation">
<a id="respond-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#respond-pane" aria-controls="respond-pane" aria-selected="false"><i class="bi bi-reply-all"></i> Respond</a>
</li>
<li class="nav-item" role="presentation">
<a id="reminders-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#reminders-pane" aria-controls="reminders-pane" aria-selected="false"><i class="bi bi-person-exclamation"></i> Evaluation</a>
</li>
</ul>
<div class="tab-content">
<div id="read-pane" class="tab-pane fade show active" role="tabpanel" aria-labelledby="read-tab">
<h2 class="h4">Review Before You Post</h2>
<p>As technology continues to advance at a rapid pace, ethical considerations become increasingly prevalent in today's tech landscape. Gaining important insights on this topic requires identifying and discussing such ethical issues as privacy, tech bias, and the effects of AI, but also examining the implications they have on different stakeholders and the future of technology itself. Read on the subject before diving into the discussion questions so you can make the most of this opportunity to join the ongoing conversation on Ethics and Tech.</p>
<p><em>Keywords</em>: Information Technology Ethics, Professional Ethics, Professional Responsibilities.</p>
<a class="btn btn-resource" title="read more" href="https://www.excelsior.edu/" target="_blank" rel="noopener">Read More</a>
</div>
<div id="post-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="post-tab">
<h2 class="h4">Post</h2>
<p>For your initial post in this discussion, address the discussion prompt and follow the discussion guidelines accompanying it. Your initial post is due by <strong>Wednesday, at 11:59 PM EST.</strong></p>
<div class="callout callout-guide">
<h3 class="h5"><strong>Discussion Prompt</strong></h3>
<p>In your opinion, what is the most pressing ethical issue facing the tech industry today? How does this ethical concern impact various stakeholders, including users, companies, governments, and society as a whole? Provide examples to support your points. You may also want to consider:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ol>
<p>Then, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p>Review the <strong>Evaluation</strong> tab for details on this discussion's expectations and grading.</p>
<div class="tip w-75 mx-auto" role="alert">
<p><i class="bi bi-info-circle"></i> <strong>Tip: </strong>Consider using the <strong>Online Tutoring</strong> and <strong>Anti-Plagiarism</strong> resources on the left panel to write, check your work, and correct any spelling or grammatical errors. You can also visit the <strong><a title="Discussion Posting Guide" href="[url]">Discussion Posting Guide</a></strong> for more information and support.</p>
</div>
</div>
<div id="respond-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="respond-tab">
<h2 class="h4">Respond</h2>
<p>Read and analyze at least two of your classmates' original posts and acknowledge those who responded to you. Provide two thoughtful and courteous responses by <strong>Sunday, at 11:59 PM EST.</strong></p>
<div class="tip tip-reminder w-75 mx-auto" role="alert">
<p><i class="bi bi-exclamation-triangle"></i> <strong>Reminder: </strong>Be thoughtful and courteous in your interactions with others in discussions. Consider the <strong><a href="https://www.excelsior.edu/policy/student-behavioral-conduct-policy/" target="_blank" rel="noopener">Excelsior University Student Conduct policy</a></strong> as it relates to these interactions.</p>
</div>
</div>
<div id="reminders-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="reminders-tab">
<h2 class="h4">Evaluation</h2>
<p class="fs-5"><strong><i class="bi bi-calendar-check"></i> Expectations</strong></p>
<p>Your initial post is due <strong>Wednesday, at 11:59 PM EST</strong>; all discussion activities including your replies to classmates' posts must be completed by <strong>Saturday, at 11:59 PM EST.</strong> Failure to meet the timeliness and quantity expectations will result in a point deduction.</p>
<p class="fs-5"><strong><i class="bi bi-check-circle"></i> Grading</strong></p>
<p>This is a graded discussion. To ensure that your discussion posts and replies meet the expectations and participation criteria, please, consult the
<strong><a title="Discussion Posting Guide" href="[url]">Discussion Posting Guide</a></strong> and the <strong>Discussion Rubric.</strong></p>
<div class="tip w-75 mx-auto" role="alert">
<p><i class="bi bi-info-circle"></i> <strong>Tip: </strong>To view the discussion rubric, select the <strong>Options</strong> (three dots) icon in the upper right and select <strong>Show Rubric.</strong> Review the <strong><a href="https://community.canvaslms.com/t5/Student-Guide/How-do-I-view-the-rubric-for-my-graded-discussion/ta-p/319#:~:text=Click%20the%20Options%20icon%20%5B1,no%20rubric%20for%20your%20discussion." target="_blank" rel="noopener">Canvas Guide on finding discussion rubrics</a></strong> for additional details.</p>
</div>
</div>
</div>
</div>
<hr class="decorative" role="presentation" />
</div>
</div>
<div id="excelsior-bootstrap">
<div class="page-container">
<hr class="decorative large bi bi-pencil-fill" role="presentation" />
<div class="excelsior-tabs">
<ul class="nav nav-tabs">
<li class="nav-item" role="presentation"><a id="review-tab" class="nav-link active" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#review-pane" aria-controls="review-pane" aria-selected="true"><i class="bi bi-book"></i> Review</a></li>
<li class="nav-item" role="presentation"><a id="complete-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#complete-pane" aria-controls="complete-pane" aria-selected="false"><i class="bi bi-pencil-square"></i> Complete</a></li>
<li class="nav-item" role="presentation"><a id="submit-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#submit-pane" aria-controls="submit-pane" aria-selected="false"><i class="bi bi-file-earmark-arrow-up"></i> Submit</a></li>
<li class="nav-item" role="presentation"><a id="Evaluation-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#Evaluation-pane" aria-controls="Evaluation-pane" aria-selected="false"><i class="bi bi-person-exclamation"></i> Evaluation</a></li>
</ul>
<div class="tab-content">
<div id="review-pane" class="tab-pane fade show active" role="tabpanel" aria-labelledby="review-tab">
<h2 class="h4">Review</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="btn btn-resource" href="https://www.excelsior.edu/" target="_blank" rel="noopener">Read More</a>
</div>
<div id="complete-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="complete-tab">
<h2 class="h4">Complete</h2>
<p>In this assignment, you will... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Review the following details to successfully complete the assignment:</p>
<div class="callout callout-guide">
<p>First, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ol style="list-style-type: decimal;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ol>
<p>Then, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<p>Review the <strong>Evaluation</strong> tab for details on this assignment's expectations and grading.</p>
<div class="tip w-75 mx-auto" role="alert">
<p><i class="bi bi-info-circle"></i> <strong>Tip:</strong> Consider using the <strong>Online Tutoring</strong> and <strong>Anti-Plagiarism</strong> resources on the left panel to write, check your work, and correct any spelling or grammatical errors. You can also visit the <strong><a title="Getting Started" href="[url]" target="_blank" rel="noopener">Getting Started Module</a></strong> for more information and support.</p>
</div>
</div>
<div id="submit-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="submit-tab">
<h2 class="h4">Submit</h2>
<p>Use the following standards for your submission:</p>
<ul>
<li>3-5 pages in length</li>
<li>1-inch margins</li>
<li>Double-spaced</li>
<li>11- or 12-point font size</li>
<li>Times New Roman, Arial, or Garamond font</li>
</ul>
<p>Submit your work to the assignment's submission area as a Word or PDF document.</p>
<p>Review the <strong>Evaluation</strong> tab for details on this assignment's expectations and grading.</p>
</div>
<div id="Evaluation-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="Evaluation-tab">
<h2 class="h4">Evaluation</h2>
<p class="fs-5"><strong><i class="bi bi-calendar-check"></i> Expectations</strong></p>
<p>Your complete submission is due by <strong>Sunday, at 11:59 PM EST.</strong> Failure to meet the timeliness and quality expectations will result in a point deduction.</p>
<p class="fs-5"><strong><i class="bi bi-check-circle"></i> Grading</strong></p>
<p>This is a graded assignment. For details on the specific criteria for this assignment, review the assignment rubric located at the bottom of this assignment page. Review the <strong><a href="https://community.canvaslms.com/t5/Student-Guide/How-do-I-view-the-rubric-for-my-assignment/ta-p/275" target="_blank" rel="noopener">Canvas Guide on finding assignment rubrics</a></strong> for additional details.</p>
</div>
</div>
</div>
<hr class="decorative" role="presentation" />
</div>
</div>
<div id="excelsior-bootstrap">
<div class="page-container">
<hr class="decorative large bi bi-people-fill" role="presentation" />
<h2>Live Session Information</h2>
<p>To locate the meeting information for this module's Live Session, please select the Zoom option from the left-side course navigation. From there, you will be able to join the session and view the recording.</p>
<div class="excelsior-tabs">
<ul class="nav nav-tabs">
<li class="nav-item" role="presentation"><a id="agenda-tab" class="nav-link active" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#agenda-pane" aria-controls="agenda-pane" aria-selected="true"><i class="bi bi-book"></i> Agenda</a></li>
<li class="nav-item" role="presentation"><a id="prepare-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#prepare-pane" aria-controls="prepare-pane" aria-selected="false"><i class="bi bi-pencil-square"></i> What to Prepare</a></li>
<li class="nav-item" role="presentation"><a id="tips-tab" class="nav-link" role="tab" href="#" data-bs-toggle="tab" data-bs-target="#tips-pane" aria-controls="tips-pane" aria-selected="false"><i class="bi bi-person-exclamation"></i> Reminders</a></li>
</ul>
<div class="tab-content">
<div id="agenda-pane" class="tab-pane fade show active" role="tabpanel" aria-labelledby="agenda-tab">
<h2 class="h4">Agenda</h2>
<p>The 60-minute live session for this module will provide you detailed information on the course expectations, key assignments, and grading.</p>
<p>Review the agenda to prepare for the live session:</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">10 minutes: Introduction</li>
<li class="list-group-item">15 minutes: Presentation</li>
<li class="list-group-item">20 minutes: Small Group Discussions</li>
<li class="list-group-item">15 minutes: Regroup and wrap up</li>
</ul>
</div>
<div id="prepare-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="prepare-tab">
<h2 class="h4">What to Prepare</h2>
<p>Complete the following items ahead of our live session:</p>
<ul>
<li>Module # Worksheet</li>
<li>Select a topic for your final presentation</li>
</ul>
</div>
<div id="tips-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="tips-tab">
<h2 class="h4">Reminders</h2>
<p>Be thoughtful and courteous in your interactions with others in your live session. Review the <strong><a href="https://www.excelsior.edu/policy/student-behavioral-conduct-policy/" target="_blank" rel="noopener">Excelsior University Student Conduct policy</a></strong> for additional details.</p>
<div class="tip" role="alert">
<h3 class="h5"><i class="bi bi-question-circle-fill"></i> Connection Issues</h3>
<p>In the event you can't access the live session using the provided link (e.g., your internet is down or audio on your computer is not working), you may call in via phone using the provided call-in details. This will serve as audio only access.</p>
</div>
</div>
</div>
</div>
<hr class="decorative" role="presentation" />
</div>
</div>
<div id="excelsior-bootstrap">
<div class="page-container">
<hr class="decorative large bi bi-bookmark-check-fill" role="presentation" />
<p>Congratulations! You've completed Module #: [Title].</p>
<h2>Key Takeaways</h2>
<p>In this module, we covered... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Consider... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr class="decorative" role="presentation" />
</div>
</div>
