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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5MDUvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMTgtMzQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYzOTQzfX19XX0_&Signature=THR9VSBgY4JsqqLghMr~VZ2umifEWkWMa9LRws57xW8UAUqNh9WiNUwMtothpoHM1u7TmDv0PqNz1p9d7IpfCnYs0TYCbI76b0msX4bMDSQZ7iBEz3KafK7J3dmat2Epafod3lOkt4hlr8TDhAaBg~zZ9984VxkvwBVOqqhY5~HUXHCMmCRk-1GeWhnuEnBVi3wXZsXFSci9LbQyNX0IaEjDLJEJXJ~Nf0kYSe-BP5s3J17u3q8EHDx~8FAcc-eZYwzmDXzmez~AAYcdcZ-d0ZGaBIYo~PMMrHMbgjIJNxk95vOn06lMHEDQPdxrwUS~VyrxzjZG8nXdvZMoK1vdxg__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5NDkvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMjEtNDQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYzOTQzfX19XX0_&Signature=IAc4vvOoTVmZs7~qZNKRBINilCjPdzlkvzTeeTXh0usBSjQbbH30we8v8AOIPgSoTapHs-7Kcyj9xlfBeN9bLRovFJtMJuO8G82LNS33GA6SC-JxEdm5wFTq5AKM~QVoARS907POBTIVZKnksFWZJVKWxaUMqRBQAYmwodS0wB30zcYFTk9GqQ~07xLzdDm2AyTCHSlIGn13GzoumutXCpVXFm13Q3AJvawa1e9MD23bjVLPiLGR7X582j17u0XmbkN42JmNpfD5FaGLmmkVviiJHTG6zvWkQlkuRFNcP2e7YwO~Q1f4pEhVByemwHBzuO~FCBFl5ffTnavJ5Uh6RQ__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449628/page_regular/hr1.jpeg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjgvcGFnZV9yZWd1bGFyL2hyMS5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYzOTQzfX19XX0_&Signature=J~jbzmK~L2tT-PvbqVcN2VM1CbfJQBS~xchOSDkwXIlQNuuGYEOQOeXHfvfP06PD9VGFIHU1~8mkVl1ReWKapVEoFN4A1bXACYpIB6NYwaGzZfrlTnnTsFbYW0C0BPy~cMqHoD2tNLwxVA54ZOf1ajXGlTyziVqxLEQZa5izskw~xbu8fpspGl4x6FhbcfdzrWOVkybmQdRkhXxJvlmMDvT6spUugmhpFf3v0gp49DOCTGkxi9Li1L3M6n32TeulCF5jyqKLjZzfgVk~eJosdHHRAVb~E0txHwcg7EdubkbhPEVkxSpqyCQXabXR5k60b285tnreCi0RVuGOMZptEg__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjkvcGFnZV9yZWd1bGFyL3RhYmxlLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyNTc2Mzk0M319fV19&Signature=P9hxapPFvUuunaHVbUvQZHp0pG1OsavO23GCx8SoGeKNtIc-XLORd23UB0bf1J0P1IIqJW6XK91UPLaMHYvof1j0UW5pkRQWUXf5sPW2GBr8bbEGw0gjs3GTkRO1cCS4NiUAZOuWhwfNneXO~5bO4u3EkznCEMS2NurkO6rIgK2pVmPZN5cJb1-99FpjRTvzLePY4F1SFWIIO9Pq-gruCfQLbd53n2SSFQAkQEUMBN9RRJeNd11LDem81zwlFwpczTNvJU~bi8a-6mGw-Iuw3IS5vBDEbCcYSj5NJ-r5TagYgPcwDo0lpEDBvfTu7~YEVxBwk3grAMSZm2Y1leJIoA__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzAvcGFnZV9yZWd1bGFyL2hyNC5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYzOTQzfX19XX0_&Signature=HCScItUCF6FSIHVtrcpPwng4AApxDoal8~rRG3ljpA741~A3ycou7blW-UulqVwj69YAtOBOofmTvX2fYoLmNhKU9FXNeYqUw4exuFBpLGXUjGg7P-B1yDLwT0A1A-RWUcBKO7Wt~ynyPWuSC8EqwVsz8hRYqaB9YaszjBtSDHpmmf4pqH-Tf~uSGj6kd0a5Qopw3Zpd1r6T9OrEyUrhJTjUSiEB8BXHfYHi1GdY4P4wPfbpklqV5WFB9Cpp~hraPtY7cMi3XBn5gDf240AcSxLr4VKsxzrDnBAGS~TRD7m2R-Uqwzu6~I80HMQ7BL2VXJbtWskf0Y6-~EaWvzRAOw__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzEvcGFnZV9yZWd1bGFyL3Jlc3BvbnNpdmUucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzYzOTQzfX19XX0_&Signature=BgvoGzE2DLHnS2BClP4KGSfy3ChcJGnmlrBaBq0vYDVzx6E89IG~hwaMh-juLyfg60I4bxMEw-3RqdslqXHLagPI3EME-6LdKB-TxlOEbvepcrZ~hpZhqhbIdQvwpGXf9NFMXYSerbnvMe1-p7pbM14pKK3c-O9NgYXVNUT00venlBSZ7kyUi9FbHVUa9eBz3wKrerN-n~SVyo19~3SqexYEwSRt4DuijrmSr9R3Cyta8dgJiJiMwIXmufgdjORwragUa2PaUbWhV5l9ZTHud62fXMKWJHjbe3B2SsIqkJm5ye0W60atb3JyISf-AkQbu8rVC8-mK37PXWQ7AEuDUw__&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.