­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ --- layout: page title: Direct Chat Components --- The direct chat widget extends the card component to create a beautiful chat interface. This widget consists of a required messages pane and an __optional__ contacts pane. Examples:

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!
Alexander Pierce 23 Jan 5:37 pm
message user image
Working with AdminLTE on a great new app! Wanna join?
Sarah Bullock 23 Jan 6:10 pm
message user image
I would love to.

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!
Alexander Pierce 23 Jan 5:37 pm
message user image
Working with AdminLTE on a great new app! Wanna join?
Sarah Bullock 23 Jan 6:10 pm
message user image
I would love to.
```html

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!
Alexander Pierce 23 Jan 5:37 pm
message user image
Working with AdminLTE on a great new app! Wanna join?
Sarah Bullock 23 Jan 6:10 pm
message user image
I would love to.
``` {: .max-height-300} ##### Outline Direct Chat {: .text-bold .text-dark .mt-5} Of course you can use direct chat with a outline card by adding the class `.card-outline` to the card. Here are a couple of examples:

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!
Alexander Pierce 23 Jan 5:37 pm
message user image
Working with AdminLTE on a great new app! Wanna join?
Sarah Bullock 23 Jan 6:10 pm
message user image
I would love to.

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!
Alexander Pierce 23 Jan 5:37 pm
message user image
Working with AdminLTE on a great new app! Wanna join?
Sarah Bullock 23 Jan 6:10 pm
message user image
I would love to.