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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5MDUvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMTgtMzQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYyMTI1fX19XX0_&Signature=Ef7PpwjGm-BAzZ-UCYeIeR3OUb4g~kB3P6TDVfXBGhuA0TRgnrSarUjqGsi3HUNkFpk-SQWv1qPwOCbnmOKtvEEdJhQxQuo3qZJ18mstbVMS6DEsToWk5wFk4gPJD1n94~IvUbY2pThtUxQ9fbM0GsGtnDxH4gxVpSajmGnIZ0GEKMD1lYAkjvrFCtb3rs5gwm55UK1Rtv0oG-b6HVb1cG-TMv49ha5U1m3vkXMtZ2sdcj-Z6jIzESwoFK9yQvzKbohyq0nKMecJgJE~7dgNalTlexZZn63j4OCZtkUBn62FeTlGXUF5Q906sFzTW-S-v9I2pR5ZORC3GJy~0Yk9wQ__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5NDkvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMjEtNDQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYyMTI1fX19XX0_&Signature=XSPM2t-Vm9BGXuT~JfLjp05RaDqEyAgfB9U63Nl8GjDFHkrdG5ANt9~GEqlC4NRvzu4Ddo6o8lIv8oLSlxJVGL9THCfH5GigLIHif2c5dg5wQVjz575UjH2QEs4Th4fSoecK7y5QaVEDd9GONAHZqp~4Xc6ITm8-ZhRBdkU3FqQCu~SeLsYMUeClRWYnAB2uIzn~9x5uJ8GOfc1kaWYf99r8stWkFm3IJxtrtDeh5EvoQ2Elcefazc2cZ89VvcpCx6wlqipXsXun9FGrQkBs-py~mgvrHPgVNhJXmgi0D7FSeXqKDqXbDwKPHOTDvvXFGmcizR~N0cEHaxMI98-eVw__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449628/page_regular/hr1.jpeg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjgvcGFnZV9yZWd1bGFyL2hyMS5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYyMTI1fX19XX0_&Signature=XZiZBCJxiV8xdxmFDo6cdoFLrjPYj9GEdhqAc-TokgZJo8vJUA~mb2mdEvBqaw1S4SlE6-hedLwqJZdxvXBz6FhumEpA1H3XA~6u37IOn0W4lXhN44dtaj~6MhQM-GSPoYzpqYizBVHsIuo~WXjdizAKnxm6KLrasSDMHCLF0YlCu8D3Hy05OqKkYQBDaVjISiloCzkiA5E-ZUuDG3S30xoQsfTBvfo2P4M7KP0oYdCLBYUT8xY73EPYDTecYi5GHekty25QeVNQwHr~52~s54x-aHNYPc5xGT2qjQoXSD-WNIC7jBuiPBBOOzaJGSrf3u3S~8czjche3dfBTjSfgA__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjkvcGFnZV9yZWd1bGFyL3RhYmxlLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyNTc2MjEyNX19fV19&Signature=auRKypGeRaVxJGT2newFgx5mqUGFkkJHez2Jsgoxgzu15oLGe0rOgHJOeoWQ3CQqh~Mp08UxRQraMO~FGG82ZEJk2aU20RY59T0dEuukSIhROkpZtEADovzFvvppZr9vLGkgwuvcU6X8LneATPvHso0ivurpwUUxJjmQyRlEtTvXorRHDbcBOiiNXgHQ0Ee3dK~vdj4qNh-Wz~BFPUOtZvGfsXBg0QAWHePwtXP4ObCVjH9kannCyToIfN-x9HMJduzPV48YzehBbg6HgMWA8aJ0zV5PjsUINujuZv~xRFofNDTZYkKfNenc3zJQ3RmX-uXCMXdNg9liS9NuOfIcCg__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzAvcGFnZV9yZWd1bGFyL2hyNC5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYyMTI1fX19XX0_&Signature=OganGoR0fZjnPuZk5a~E~vJb9~9a~6PvbP0YALFBbVF133AL6zISJVMzDYNtq0dwcqiUozvBu~aKpiBiOi-Sc6iEPwvR3AAvHGs~hoFi3aTZAp6pJuiVMalECY8V1hKUHhVKrN19uZHoas5oSXfvyZwUfVBkovtCOYAqV5RgqRDyp-Hywh3n7Md4hSd9Kouf1krGGeUcLg8eX4GUq59qAJtRRj2xfAVGgDa1N7QDLsymdMf2oQ-NdR7ObCt0zEUu8QXXj393bgvmJN8~5BLyx5TQ0rH3s-9H8DiHRjdZbbKWcF7jMh6w5aUucMa7oiEVVg88hYWp7ZEUEvV-X6qeUw__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzEvcGFnZV9yZWd1bGFyL3Jlc3BvbnNpdmUucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYyMTI1fX19XX0_&Signature=BYYpFBEtSOh7RjCcT6e1iPwcH2w8N3iOdkVyGHRKWFeqU7bIUmfKemT26SqFRpVReQi6R1ucc28jYGhOP0he~C8MQja0MuL5kOTaGbP-e6gIr9kac00kcRjImTTQUUs29R1a3-wMqRRhophd6FK3rtj1HBibBX9TZNx0E033Zg4FXE1flct4AMvX3cpJVzqQqsrkBo7pDJ8helwZIiiS73lDB71vH6IICoo9bNiYDndxdRT37wdxPNIB0zIrqvHzrQl2i7SEpXm5R~rQbCD2VfgTQFF7J-nUyH9jt2ug3PlaBzhh4PwvwiWmVx2duckyJO6rnfhtdDukJVN0w1pebQ__&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.