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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5MDUvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMTgtMzQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUyMDkzfX19XX0_&Signature=TD66elYowT1~POI6Np772PDRMid03~HLlQtj2H93hg6ST~Q9WRBsgrp8cKbKne03uPzzmDYk~OvM1~JmsmJbA6NMG7izOqO33jTocMG-CfW~Ai905afAK7C5glfDBG5-7NjfEhw3QgxlH2gLM7jw3beg3crEPFQs8oPQTW0hekHbjq9xf8cp1RDI5TiXw8zdJOubp2qHtR-qdCxGS58MpYVG~QrjO9r6XZESb3L70x-vnqdFn~KKr2~hvDfNYuzjdWxz2notaY-qW5mGQMC2x15phHWjpY24B0CPCTTPoo4Q-H6RmA-rGddzRVUN3TmcZl4cNCdohgSnrdOEmqGQNg__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5NDkvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMjEtNDQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUyMDkzfX19XX0_&Signature=W79g0P9jDnz00-PnT3MSgIed5OqixOZLHrRl~fDiX2aZtb30dCzswJaEzkdqL9e57xy7Ji-pgpU6w0JccxlnMvp-7~aniXSOIlxI9gXJRpGVyD9CQKnIyoJUVdLq4sbakp5sEHpqmTcSIBE8~zHM5FXL51O7SXuHQVYPSwDllLJMI-gtFk0DUpisSgJXH7GqH~jQ1Wowy-WhunKWhA~9-zEKgjQP7OXkvQf6lNoWU7khcH4CvHCuCiP2CNUzqiOQcP~kCOdAowV~ni9NM~Ul5ISNMUfuykzrCsaba-xv-Pk43Mv~gbRcJZSj1ugFLykPKkKjWaBxcO6QeHfgL2vjSg__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449628/page_regular/hr1.jpeg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjgvcGFnZV9yZWd1bGFyL2hyMS5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUyMDkzfX19XX0_&Signature=NO2vbSd4Fi5is8qyFlk0ZA~OnJKl4R4ucNyWDnXSvnzRcyUAjfWfa8Btg7tux4yKmQBHpzrwf7odVCMJJNsrRCE7CT56MwbWbm9z0n9CUlzlUMBjzkg1dDknLeCtQwn9ijDMLxmwR5FUmxkwi17e1dCxXeDWB1mJOf3MuWggF7Nm0WpnJgABfKvDsg0laAEyQOq2GwKRLqPgJ6v7XBQLthxlMhUUDI62iOuuai9k3q6YZNMQjb3T0F9h2flLteOU5QD6MpYP-Nvo05ITj8qHg6SBbHO8VRMkFjsexl3AO5Mcz3wQLlH1b~6eSnVV5IHF~6lL7KNO1hhzvvqru6ROhA__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjkvcGFnZV9yZWd1bGFyL3RhYmxlLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMjA1MjA5M319fV19&Signature=gVx6ROmoAqLQ2Mhn5x8q6cIUsBhineIp80icWZu3rOS0Ve90LflFXWAZ~~lTIS8HkfanLHv2F9OiThwqJiF8Twk1RgdTvu6a6DEJQtJ7hdDGYykMjUw7X4eIVojGQxsiIovaKlu8YxKdRUg9ZT-LqDgTh6YvmCYuF6V~22Hf9GIZFpZIOeCmMQSkx4TKcY7Wq1yQPAMezLuQXrRV7v1MuIJFyQ5u3ZbTrBlP5Anuq7PAwZhUboy6iiq0q2IgpQ-lv-aaLA3SrSEhU4goFeUNMlES0TmNMjk~A8To4SSmEsc0Edi1FS7cU-lP5dggsn1KEEQhh9k9rmQzFPwTD8js7Q__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzAvcGFnZV9yZWd1bGFyL2hyNC5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUyMDkzfX19XX0_&Signature=D8thqOqwsoi92oIU4CACPEwfDONoUQp6aSGGr8X7B9SdZJ7nU8osrOOA35UlqZBlzMAleMBygDlSDe1t78DUEh0XnMDosRBy6mEmHV0ho81lyVpRhGaWYKqymnd0NyAktWAi9J8WMXozUepnSwywDcOFbUf8PVzHYQKE~jITEh4v7FfKqgCb6~xMLq-TdhkusWALo7NTw5NpMatZ~KN73zOGFjHHQnoU4cOpQZbBAQuKEVjTrsvBNj7o33CAgc0etcq18o8e2A6NOl6pOVzPMwBIXAQtQUWIqDrcR9zuFG7JMm4M8rRVNbXjJM7PuPJdBuI~AHpW1-gXo6mrAWcuQQ__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzEvcGFnZV9yZWd1bGFyL3Jlc3BvbnNpdmUucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzIyMDUyMDkzfX19XX0_&Signature=gJXb6HY~wgmkSns0paqBZ0bL2jQqdx81jobOk4my6HhghanzuD-Du-P3b1iuOZzyHSsVg6VQ~5Tfan5ATVkmIzETRGJy~MWGEZ1Z~MnhyRcL00smIYMsfpklC3QTkw4iCrQD5qSEfuAt4zzAsMt6OiP-fgXqqt1OdXV-lLmgVBXKbLS5yhoymunSzGrT7kVREH5AgX0ET4nQb9OzuHy7bBch9GqarnvkMEQpPf6O8uKkPm85v0i1VqCgbCV-8Cb5Yh6OdW1QCerSlt70A5~R15aCFgIW6gBQCwb4nW5qCFStm6JqU6kMpHfwLXvqRrWIFeeWEY9t1W1o3HsJ7ZV7-Q__&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.