UI: Components

Chat

A chat application is a great way to communicate with others in real-time. The chat UI is built with an ordered list, ol, containing a series of list items, li. Each list item contains an (optional) avatar and a chat entry.

    1. KC Unknown Person
      Hey @Mads, can you please help me with building the UI for a chat application? 🙂
    1. I sure can! 👍
    2. First you need an ordered list, <ol>. Then you add the entries as <li>-tags.
    1. KC Unknown Person
      How do I know who is who?
    1. You add a value-attribute to each entry. A value of 1 is the first person (other), a value of 2 is the second. You can even add more people if you want to.

With opposite color-scheme

    1. KC Unknown Person
      Hey @Mads, can you please help me with building the UI for a chat application? 🙂
    1. I sure can! 👍
    2. First you need an ordered list, <ol>. Then you add the entries as <li>-tags.
    1. KC Unknown Person
      How do I know who is who?
    1. You add a value-attribute to each entry. A value of 1 is the first person (other), a value of 2 is the second. You can even add more people if you want to.

With right-to-left

    1. KC Unknown Person
      Hey @Mads, can you please help me with building the UI for a chat application? 🙂
    1. I sure can! 👍
    2. First you need an ordered list, <ol>. Then you add the entries as <li>-tags.
    1. KC Unknown Person
      How do I know who is who?
    1. You add a value-attribute to each entry. A value of 1 is the first person (other), a value of 2 is the second. You can even add more people if you want to.