Chat elements as the name suggests can be used for messaging. To make chat bubbles use .chat-bubble class with <p> tag. Wrap your chat bubbles into .chat-content. You must set chat items alignment by extend .chat-item class with .chat-item-{start|end} modifier classes.

You can put your avatar into the chat elements. Wrap your avatar into .chat-avatar class.

consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Friday at 3:45 PM

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Friday at 4:15 PM

Chat section is an element that can be used for marking time section, look the example.

consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Friday at 3:45 PM

11 September

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Friday at 4:15 PM

Apply gradient styles to chat bubbles using .chat-bubble-gradient-{color} classes to make conversations more visually appealing and distinctive.

consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Friday at 3:45 PM

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Friday at 4:15 PM

You can put chat bubble into another bubble to make mentioned message. Insert images or any elements to make more rich messages.

Here’s the banner design draft.

Do you want me to prepare a mobile version as well?

Friday at 3:45 PM

Looks great! I like the clean layout.

Yes, please create a mobile-friendly version too.

Friday at 4:15 PM

FinalDesign.zip

Includes desktop

I’ve attached the final files here.

Let me know if any changes are needed.

Friday at 4:30 PM

I’ll review and get back with feedback by tomorrow.

Friday at 5:00 PM