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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5MDUvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMTgtMzQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzU3NjgzfX19XX0_&Signature=HHL7EeMeCQKwmmUdz~T3TNc4VV3HV2R3qeuWUqE9S5H79PM-iSEC8ccSn~ddlXrON4D5loB4JIYsL8xviQ5FLy~0RjIqR25bay2EPdwJRF75hAjtZNWwSSxWYVm1UlvXxGr-3RIua~HAUAr8S8eeSuA3x7Zc-viiZFaU-C1ow3Gd62~PZvbrqONUBPIekfdyt3SQGtgXVQKozlVXugxmgcde7utQD1brb7pqzWnwILH9bmWJLHMKBIflY7h7e~MPKqPpPjXqziVDXr1iaBOElsCntPAgXdq0YmqioNxW9L-vLutttMYeeUF7QTDHJNWHiSYtG~1hFzAUyO7mgxcUcQ__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzU0ODg5NDkvcGFnZV9yZWd1bGFyLzIwMjQtMDUtMjktMTUtMjEtNDQucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzU3NjgzfX19XX0_&Signature=X9ao0RVtglXdbkY3G-8vCYP8amVYMg~2x1tmNT9n3~LEXphRvuoIaNkg5XbzH6zIjxWtpHyjoehmKAhM~4oSBunPfF5gPkkp-BY8uD5zDeSYdq~mS2Hrz-H35HN8jPDdAHSNEAjdNY4SLNra7QQOOQOJ3Ed2TvcT8lQpqBHYYLlxFyvD58LEwjfPi4oYDMMd41kGGLeURgELDevZuPXm9fwhVFPr3IlqHmwVb8mRwdnZBg9CEgKPj2XO0IHeQ9yy8upDDSc-VFJPqbihqbPpOn-ZYes0w3ws4SdGfaWwsEmXAxAY~Yp6setjbM10ckIL2nTq2B4iMJXfTGQQ0SooKw__&Key-Pair-Id=APKAJINUZDMKZJI5I6DA)
![](https://cdn.exceedlms.com/uploads/resource_images/targets/1449628/page_regular/hr1.jpeg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjgvcGFnZV9yZWd1bGFyL2hyMS5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzU3NjgzfX19XX0_&Signature=BF~pYMgRLM65to1mHBCcue5vwpFFYKZ~RPaF~zKwfE77ytoVxqb0B1UInbKhuPp4njyeUdwzECyEJWQrqMWdSif8JA3qvqRLwXVwhkWRYrNMzYS30T8MQPxLrbkuVMWWIQE2vcluP5FJdNvUZQymwAbpJaKi5nfrcrzrMTANqdS-19SXCczVFFGW5RA1nMOkbq4URlZ0YX7ECFqMgzb~Y9fH3PQr~J1c78x9jjLf4nfbN0OuC-SBvnNB3VpqdpWX0gF7OQtlH4XwoNOSzk2ch~YMguMzZMWOpQ77sD4UTVskZ7H5cNxSDe8yOki1unSB1w0pUeG6fK-ev9hL7Qeqjw__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MjkvcGFnZV9yZWd1bGFyL3RhYmxlLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyNTc1NzY4M319fV19&Signature=LFfvhlQWnDN-2XgAby4ioTrKr3JyeK9GvsLciSCWJyzrqVPGzzBQpnDaDTT9SAm8QkSeplaqYODCd123E47CcAbdMtC-ZNP9oqWe0sfFvWeUgC7Qoklx~MLX81UisJbForY7CJahWTbJpqRx0gLNEoRaDsIcAsnIigzWWMgQ3Nml68ggQjEq-2QUq2MUtkZW0NCJMlgjpwz6rzQ3Q3BOcK7e5sZZCgENpdIaS8sWwDnwlUEHZW0h3AtF~oOKz8wOk8W6ylijcJ0DX65EIM57FUYbIAzn54pvk~Ai6O4RqAmee5TNLs6TnvFvXKFleVvUHGBg5MJNLs14ENZ1mtmfjw__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzAvcGFnZV9yZWd1bGFyL2hyNC5qcGVnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzU3NjgzfX19XX0_&Signature=DVZ1sYSuZ444M~gZycW5y~7zw0DVo-J65MqujB2qgwGAPsBkcZuerDAEKDZSOuJp-dg7N2MxV7CCWeNnyGIvF7Ue5VPKH0gGWUbw5-gAQj536jNtEHQvaOqLwJsL0CeslXezPqletdI5xZ2wKGQYLciLiwdiqsGHaESuTE-bK5iOVIqynMrgW6egrMQ0~hDbu0mojPktvP1-5e8SfFNfB4mteCmUHZMPA8QgW~TsMfmrxdCBx21fT8LxIKSqsEzzjMDeWUifmFaMOi7CAtfkDifav~omCOmQspAwzunFsAVlfttwve6cDWaNqkl0~sUhFAebFJHSJNH4PObJkdUWMA__&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=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uZXhjZWVkbG1zLmNvbS91cGxvYWRzL3Jlc291cmNlX2ltYWdlcy90YXJnZXRzLzE0NDk2MzEvcGFnZV9yZWd1bGFyL3Jlc3BvbnNpdmUucG5nIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzI1NzU3NjgzfX19XX0_&Signature=d2uDeT78QK5WonL-lAO4aQvkyL8INE0fjkgU2pEBclnK3jk1xlKIvVRPTTHuDXsq9q4r~kpAzzkUCtPjIUHXBnPfGTwIozittD6LNvfnB5DWm9OXMfs1axxAKklv3OyD7aEso6HKDgg~4RRa6ipmUH~UJ0xPmb64NiX8yAt-UkbTkcnVF0ffRF51K0fIyeNUaL7Lzsds59x88LwOPShDIGCArry4lIKAv8SIgoftcRqYyrvPzGdEIMUtNVXZo7fGOZ2kI1v4Z~VNjy~bzqlmTGP4KGaBWBWERvwE5AiTcUwUukHsEHtVE9GflxZ648Xn4YCi0NmPY1EzDkph~rKR3A__&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.