HTML Components | Examples
The HTML component in Pages gives you the ability to format, link, and customize the layout of your text and visuals in a Page using standard HTML.
This article provides examples of HTML (iframe) components in admin view of the Intellum platform and the resulting content in learner view.
Things to Note:
- The platform does not validate custom code. Any incorrect HTML you add may have an effect on other Page components.
HTML Component Examples
Iframe Embeds:
An iframe embed in Admin View:
![](https://cdn.exceedlms.com/uploads/resource_images/targets/5488905/page_regular/2024-05-29-15-18-34.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5MDUvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMTgtMzQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUxMTcxfX19XX0_&Signature=Y4Bzje84WzEemNGTngLBsUEitWJIr6RVnbTNrXl7bwRoC6d8ThAm8eUKaQbsTRfjhh3Zs~LZFMsjHYB~iJ7R3Yi3zMQyQR~JHcXb9Yopo4pedUFFt7tVJ0D1abG6V46Cjq5R9yicVcQaSEA4SyShvWOxJBecdCUYBASKff~tXu1KyO6mXea7I9wrh5s3Gzww49suoE4u8MW8nhjVvyj8T7h-cA00zpTcctcfyuVkpFz1i4BsoFKe92JCe3pkynR54HATDM9JL89YbKvTTFCXUk1LcaiWiq0xPRBxwvyeSH2-2KigPonUayXjxMo17wgAAfD~Yie-JRAKipH38nEnbQ__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
and here's the result in Learner View:
![](https://cdn.exceedlms.com/uploads/resource_images/targets/5488949/page_regular/2024-05-29-15-21-44.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5NDkvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMjEtNDQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUxMTcxfX19XX0_&Signature=OWuqb9j3V~-Pm9Lx1kRHNMDbNxC7XhezhUbAEctG1rlJqbIqgmJ0QfO3tr76yafpLYS3Wp2UbpjLWkhqND6264A82wcocEhpZ1DeokRmA5BtQW7or-RaO6aMv~SEfFsKXnWTkpVTUrxQqeOiU8DnwuFH2Ag8ZpuX42loHJINzy-oF~rCwgvn9xZXdtBWgkFuTDzhuuoyvEREtQut2NASFiewUwRqvuJLNViU4zhGfm31se04dEVEA27w3AoqGRx4bEtDFbOScWmR6NS5JUEJQe~aceWYCyuPpDFCA2qeWVygqu-cz1vn-vCVhUQBzlTULX3ddqngq-uBtv2OGB7q9Q__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449628/page_regular/hr1.jpeg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjgvcGFnZV9yZWd1bGFyL2hyMS5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUxMTcxfX19XX0_&Signature=SK9pCZIRrQq2VJJbbf1R2~RDfoR2sfgFH22Grp3M7AahLRN1Z86kvrgNyDnFd4o~dLexHTc19783A~-vjBUaXXXfIrl7fwMAvN7L~Nn6lHQf9rv5cTuAuBlIfvWG6Ku8yYSzLtQulkpJN4YmFF7tWffYcma7akpQZWoH0k51DsVYMTFLB1oLVQCF14nSQsC5GRVNb3W4oRCFFP4hq32veP6TZ2NaKRWxCqrjzvMJEYmVRq23yMekJ48pcegLj8K8SwmQp8o-urk8KhKjkuYvBbRCGlkTh1ct2DbDGhRY3~oRm~5R3IoZ7yIAlgaiY30sPGuy9RzhEYGWNDh0rh3-kw__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
HTML Tables
Creating an HTML table in Admin View:
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449629/page_regular/table.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjkvcGFnZV9yZWd1bGFyL3RhYmxlLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMjA1MTE3MX19fV19&Signature=Cd~-7GneqAnevZXZxR4M~zHFdXbZofUMcbYfdxTcExvu5-5ouZTPWXrTPqHJQZ6-y19xETuNOQHFW9QZkcQrvJnvnlE6ZluCxygadI9MFrL2AjStw4jkB2MHGUSMtBPs2LvsW8npYzO3PFP5Ljcq~uxkpoYwQ5nKW136MXrHI2yVQILiEXlN3ciY3nMHgje1bZOyWRKpy71An3oStL-leOvvVUVgRfKsyd7Qhh9m6bzErqKSvXKg~4qMgfljtKNvsaSmP4p6HRDvXqPEljSWGONNc4zLU1zuz98W-BpDCUopbnvEWH~sJRkQDaZPxlSfBWAgG1mRhtvjtG55bUsbWw__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
and here's the table in Learner View:
Table Header | Table Header | Table Header |
---|---|---|
Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell |
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449630/page_regular/hr4.jpeg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzAvcGFnZV9yZWd1bGFyL2hyNC5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUxMTcxfX19XX0_&Signature=Tj~bUmHPUb6j6DbvaeWtCE7KN0RRJYRlLkrOopZFWkY1Q6KS41hcaKJdBk-K-7LH1jkhTo8qf5aFcxdT2Ed4jSgKHtSeCy7GeDJPbmyaBaVQvBWDpneqzug6Nx12pXtvgBwKTCCu8qUERalgcwKycYXnC3~vm8571RBpwlxbTeMAdfcSjFrvADwHgR4q~RWbATXC1P4t2wUEfkGYyr6DsKbiCxr07kkS0RBHrlQ71ALkWAK67e6jCyDM297rCoWq38HQKLWpBZ0bHSOdT18T8XPdB9XI~tbs5Sl-rBWSfP4pw9Kiexx2NtibI~KtP0QOPjdLet3X03dOihkpJf9zgA__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
Responsive Images
Adding a responsive image in Admin View:
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449631/page_regular/responsive.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzEvcGFnZV9yZWd1bGFyL3Jlc3BvbnNpdmUucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUxMTcxfX19XX0_&Signature=bxm4f6SCqy9x20CVIMBwFiH0t7fLISdMNOGFB3CliKBq55y7mgBEPeyJxiW0P~0eR4OlR-Ubqlsaphw649Mgzw0Rb7eUEEoA5ISASQpOUFbdRRT3I2t24f91YVguXHADnwssZ6ir3SYjqShXFV9QewMoaCGrnvV8TxQ1tGDHVyu4YggUKcYsRPNeyOtXVKyH5V2eqO5Db1CCZvpFT51NvGhW5gbAcJDRepl4z7q1nb6Af0wHkjyQpFaoS00c6uWsB8dJfA2pH2-iYASV0IxHGxPqGZNQ8bI6ARFECgqE79YQ2KhjPPjiVLWe3l-INJ8U4-aAxq~lq9gf~rd99-SzGQ__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
and here's the responsive image in Learner View:
Heads Up!
Responsive images will resize to the viewport size if they're too wide to fit.
Non-responsive images do not, and may result in horizontal scrolling.