The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voilà!
An accordion is used to show (and hide) HTML content. Accordions are useful when you want to toggle between hiding and showing a large amount of content:
Demo
Copy and paste the HTML code to CMS Rich text embed code editor.
Note: Do not copy the CSS and JavaScript. The CSS style and JavaScript will be updated at Designer's end. This is to maintain the function and design consistency across the pages.
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
<style>
/* Style the accordion */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
/* Style the accordion hover */
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}.active:after {
content: "\2212";
}
/* Style the accordion panel */
.panel {
padding: 0px 24px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}/* Style the accordion panel */
.panel p{
margin: 24px 24px;
}
</style>
<script>
// Script for Accordion
var acc = document.getElementsByClassName("accordion");
var i;for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects:
Demo
In this example, we use JavaScript to "click" on the London button, to open the tab on page load.
Copy and paste the HTML code to CMS Rich text embed code editor.
Note: Do not copy the CSS and JavaScript. The CSS style and JavaScript will be updated at Designer's end. This is to maintain the function and design consistency across the pages.
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<style>
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<script>
// Script for Tab
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
To create a zebra-striped table, use the nth-child() selector and add a background-color to all even (or odd) table rows:
Demo
Copy and paste the HTML code to CMS Rich text embed code editor.
Note: Do not copy the CSS and JavaScript. The CSS style and JavaScript will be updated at Designer's end. This is to maintain the function and design consistency across the pages.
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
<style>
/* Style the table */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
/* Style the table */
th, td {
text-align: left;
padding: 16px;
}
/* Style the nth-child */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Style the snippet container */
.snippet {
background-color: #eee;
width: 50%;
height: 500px;
border: 1px dotted black;
overflow: scroll;
</style>
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:
Demo
Copy and paste the HTML code to CMS Rich text embed code editor.
Note: Do not copy the CSS and JavaScript. The CSS style and JavaScript will be updated at Designer's end. This is to maintain the function and design consistency across the pages.
<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Point 1</th>
<th>Point 2</th>
<th>Point 3</th>
<th>Point 4</th>
<th>Point 5</th>
<th>Point 6</th>
<th>Point 7</th>
<th>Point 8</th>
<th>Point 9</th>
<th>Point 10</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<style>
/* Style the table */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
/* Style the table */
th, td {
text-align: left;
padding: 16px;
}
/* Style the nth-child */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Style the snippet container */
.snippet {
background-color: #eee;
width: 50%;
height: 500px;
border: 1px dotted black;
overflow: scroll;
</style>
Display bar graph percentage.
Demo
Copy and paste the HTML code to CMS Rich text embed code editor.
Note: Some CSS style needs to be updated at Designer's end to maintain the function and design consistency across the pages.
<div class="bar-wrapper">
<h2 class="bar-heading">90%</h2>
<div>
<p>HTML</p>
<div class="bar-container">
<div class="skills html">90%</div>
</div>
</div>
</div>
<div class="bar-wrapper">
<h2 class="bar-heading">80%</h2>
<div>
<p>CSS</p>
<div class="bar-container">
<div class="skills css">80%</div>
</div>
</div>
</div>
<div class="bar-wrapper">
<h2 class="bar-heading">65%</h2>
<div>
<p>JS</p>
<div class="bar-container">
<div class="skills js">65%</div>
</div>
</div>
</div>
<div class="bar-wrapper">
<h2 class="bar-heading">60%</h2>
<div>
<p>PHP</p>
<div class="bar-container">
<div class="skills php">60%</div>
</div>
</div>
</div>
<style>
/* Bar Graph Horizontal */
* {box-sizing: border-box}
}
.bar-wrapper {
display: flex;
}.bar-wrapper > div {
border-left: 2px solid #ebeae8;
margin: 10px;
padding-left: 20px;
width:100%;
}
.bar-container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
/* Copy and paste this line of code in the rich text embed editor together with the HTML*/
.html {width: 90%; background-color: #04AA6D;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
</style>/
