--- layout: page-layout-tester.njk title: "Layout chat page" description: "Chat interface layout example with message list and input area for messaging applications." tags: "layouts" --- %nav.sidebar.tester{arialabel:'Sidebar'} .profilepicture-wrapper %details.profilepicture-actions %summary %img.testerlevel-medal{src:'/assets/images/testerlevel-medals/medal_testerlevel_1_md.png', alt:''} %img.profilepicture{src:'/assets/images/placeholders/profile_supergirl.png', alt:''} .popover-menu %a.popover-action{href:'#'} %span.icon.text-icon-default.icon-cloud-upload.mr-icon-spacing Upload picture %a.popover-action{href:'#'} %span.icon.text-icon-default.icon-remove.mr-icon-spacing Remove picture .sidebar-title Anja Berger .navlinks %a.navlink.active{href:'#'} %span.icon.icon-home Navlink active %a.navlink{href:'#'} %span.icon.icon-ranking Ranking %a.navlink{href:'#'} .icon-wrapper %span.icon.icon-test %span.icon.icon-circle-sm-filled.recording-icon .text-wrapper .div #123321 Customer .label-sm Test Session active 00:15 .banner-install-testnow Install testNow %a.icon.icon-apple.ml-auto{href:'#'} %a.icon.icon-android.ml-xs{href:'#'} %header.test-header.tester %h1.test-title Customer name .test-progress-wrapper .meta-info #123321 | Focused Test | Ends in 8 hours %progress.test-progress{value:"32", max:"100"} 32% .test-actions %a.btn.btn-recording{href:""} .icon.icon-circle-filled %nav.nav-tabs .navlink.active{href:""} Navlink active .navlink{href:""} Navlink .navlink{href:""} Navlink .navlink{href:""} Counter .counter 99 .navlink.disabled{href:""} Disabled %main.main-content.main-content-padding %h1.mb-heading Layout chat page %section.section %section .section-header %h2.section-title Announcements .list-chat-messages .chat-message-item.announcement %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"} .chat-header 2 hours by .chat-author Team Leader .chat-message .message-banner.announcement Announcement %span.text-mentioned @All here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .chat-message-addons %a.btn{href:"#chat-announcement"} Show in chat %details.popover-wrapper.dropup %summary.btn .icon.icon-heart-filled 10 .popover-menu.info .popover-title 10 people like this .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10 %details.popover-wrapper.dropup %summary.btn .icon.icon-verify-check TL .popover-menu.info .popover-title Verified by Team Leader .popover-content Team Leader name %section.section .section-header %h2.section-title Messages .list-chat-messages .chat-message-item %details.dropdown-actions.chat-avatar %summary .user-item.linked %img{src:"/assets/images/placeholders/profile_supergirl.png"} .popover-menu %a.popover-action{href:'#'} %span.icon.icon-user-story-test Tester profile %a.popover-action{href:'#'} %span.icon.icon-review-exclamation Report tester .chat-header %span 2 hours by %span.chat-author Message sender .chat-message Here's a short message. .chat-actions .btn .icon.icon-heart .chat-message-item %details.dropdown-actions.chat-avatar %summary .user-item.linked %img{src:"/assets/images/placeholders/profile_supergirl.png"} .popover-menu %a.popover-action{href:'#'} %span.icon.icon-user-story-test Tester profile %a.popover-action{href:'#'} %span.icon.icon-review-exclamation Report tester .chat-header 2 hours by .chat-author Message sender with a much much longer name .chat-message Here's a short message which you liked. .chat-message-addons %details.popover-wrapper.dropup %summary.btn .icon.icon-heart-filled 1 .popover-menu.info .popover-title 1 person likes this .popover-content You .chat-actions .btn .icon.icon-heart-filled .chat-message-item %details.dropdown-actions.chat-avatar %summary .user-item.linked %img{src:"/assets/images/placeholders/profile_supergirl.png"} .popover-menu %a.popover-action{href:'#'} %span.icon.icon-user-story-test Tester profile %a.popover-action{href:'#'} %span.icon.icon-review-exclamation Report tester .chat-header 2 hours by .chat-author Message sender .chat-message Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. .chat-message-addons %details.popover-wrapper.dropup %summary.btn .icon.icon-heart-filled 10 .popover-menu.info .popover-title 10 people like this .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10 %details.popover-wrapper.dropup %summary.btn .icon.icon-verify-check TL .popover-menu.info .popover-title Verified by Team Leader .popover-content Team Leader name .chat-actions %details.dropdown-actions.chat-message-actions %summary .btn .icon.icon-more .popover-menu %a.popover-action{href:'#'} %span.icon.icon-pencil Action %a.popover-action{href:'#'} %span.icon.icon-remove Action .chat-message-item %details.dropdown-actions.chat-avatar %summary .user-item.linked %img{src:"/assets/images/placeholders/profile_supergirl.png"} .popover-menu %a.popover-action{href:'#'} %span.icon.icon-user-story-test Tester profile %a.popover-action{href:'#'} %span.icon.icon-review-exclamation Report tester .chat-header 2 hours by .chat-author Message sender with a much much longer name .chat-message Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. .chat-actions %details.dropdown-actions.chat-message-actions %summary .btn .icon.icon-more .popover-menu %a.popover-action{href:'#'} %span.icon.icon-pencil Action %a.popover-action{href:'#'} %span.icon.icon-remove Action .chat-message-item.your-message %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"} .chat-header 2 hours by .chat-author You .chat-message Your short chat message with no lorem ipsum. .chat-actions %details.dropdown-actions.chat-message-actions %summary .btn .icon.icon-more .popover-menu %a.popover-action{href:'#'} %span.icon.icon-pencil Action %a.popover-action{href:'#'} %span.icon.icon-remove Action .chat-message-item.your-message %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"} .chat-header 2 hours by .chat-author You .chat-message Another message by you with a lot ofLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. .chat-message-addons %details.popover-wrapper.dropup %summary.btn .icon.icon-heart-filled 10 .popover-menu.info .popover-title 10 people like this .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10 %details.popover-wrapper.dropup %summary.btn .icon.icon-verify-check TL .popover-menu.info .popover-title Verified by Team Leader .popover-content Team Leader name .chat-actions %details.dropdown-actions.chat-message-actions %summary .btn .icon.icon-more .popover-menu %a.popover-action{href:'#'} %span.icon.icon-pencil Action %a.popover-action{href:'#'} %span.icon.icon-remove Action .chat-message-item.announcement#chat-announcement %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"} .chat-header 2 hours by .chat-author Team Leader .chat-message .message-banner.announcement Announcement %span.text-mentioned @All here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .chat-message-addons %details.popover-wrapper.dropup %summary.btn .icon.icon-heart-filled 10 .popover-menu.info .popover-title 10 people like this .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10 %details.popover-wrapper.dropup %summary.btn .icon.icon-verify-check TL .popover-menu.info .popover-title Verified by Team Leader .popover-content Team Leader name .chat-message-item %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"} .chat-header 2 hours by .chat-author Team Leader .chat-message .message-banner.mentioned You were mentioned %span.text-mentioned @You here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. .chat-message-addons %details.popover-wrapper.dropup %summary.btn .icon.icon-heart-filled 10 .popover-menu.info .popover-title 10 people like this .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10 %details.popover-wrapper.dropup %summary.btn .icon.icon-verify-check TL .popover-menu.info .popover-title Verified by Team Leader .popover-content Team Leader name %form.floating-chatinput %textarea.form-control{rows:'1', placeholder:"Enter your chat message here"} .btn.btn-primary.btn-square.btn-sendmessage{type:'submit', value:'Input btn'} .icon.icon-sendmessage %aside.metasidebar %details.metasidebar-wrapper{open:"true"} %summary.metasidebar-btn .metasidebar-content %h2.metasidebar-title Metasidebar title %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur %h3.metasidebar-subheading Metasidebar subheading %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur