Conversation
note
This component is intended for staff-facing use only.
Use the conversation component to show messages between two or more people. It's a good fit for tools with a chat feature.
New messages appear at the bottom, so the keyboard tab order of a conversation is reversed.
- Sent:
That's great. I'll give you a call then.
Details
Sent 12 Jan 2020 6.30pm by Jane Smith
- Received:
Sure - how about five o clock on Tuesday?
Details
Received 12 Jan 2020 6.20pm
- Sent:
Hello. It's time to schedule a review of your plan. Is some time in the next week good?
Details
Sent 12 Jan 2020 5.45pm by Jane Smith
Delivered 12 Jan 2020 5.47pm
- Showing oldest messages
<ul class="lbh-conversation">
<li class="lbh-conversation__message">
<span class="govuk-visually-hidden">Sent: </span>
<p class="lbh-body">That's great. I'll give you a call then.</p>
<details class="lbh-conversation__details">
<summary class="lbh-conversation__summary">
<svg width="17" height="11" viewBox="0 0 17 11" fill="none">
<path d="M2 2L8.5 8L15 2" stroke="white" stroke-width="2" />
</svg>
<span class="govuk-visually-hidden">Details</span>
</summary>
<div class="lbh-conversation__metadata">
<p class="lbh-body-xs">
Sent 12 Jan 2020 6.30pm by <strong>Jane Smith</strong>
</p>
</div>
</details>
<svg
class="lbh-conversation__root"
width="12"
height="12"
viewBox="0 0 21 21"
fill="none"
>
<path d="M20.5 21V0.5H0L20.5 21Z" fill="#00664F" />
</svg>
</li>
<li class="lbh-conversation__message lbh-conversation__message--inbound">
<span class="govuk-visually-hidden">Received: </span>
<p class="lbh-body">Sure - how about five o clock on Tuesday?</p>
<details class="lbh-conversation__details">
<summary class="lbh-conversation__summary">
<svg width="17" height="11" viewBox="0 0 17 11" fill="none">
<path d="M2 2L8.5 8L15 2" stroke="white" stroke-width="2" />
</svg>
<span class="govuk-visually-hidden">Details</span>
</summary>
<div class="lbh-conversation__metadata">
<p class="lbh-body-xs">Received 12 Jan 2020 6.20pm</p>
</div>
</details>
<svg
class="lbh-conversation__root"
width="12"
height="12"
viewBox="0 0 21 21"
fill="none"
>
<path d="M0 21V0.5H20.5L0 21Z" fill="white" />
</svg>
</li>
<li class="lbh-conversation__message">
<span class="govuk-visually-hidden">Sent: </span>
<p class="lbh-body">
Hello. It's time to schedule a review of your plan. Is some time in the
next week good?
</p>
<details class="lbh-conversation__details">
<summary class="lbh-conversation__summary">
<svg width="17" height="11" viewBox="0 0 17 11" fill="none">
<path d="M2 2L8.5 8L15 2" stroke="white" stroke-width="2" />
</svg>
<span class="govuk-visually-hidden">Details</span>
</summary>
<div class="lbh-conversation__metadata">
<p class="lbh-body-xs">
Sent 12 Jan 2020 5.45pm by <strong>Jane Smith</strong>
</p>
<p class="lbh-body-xs">Delivered 12 Jan 2020 5.47pm</p>
</div>
</details>
<svg
class="lbh-conversation__root"
width="12"
height="12"
viewBox="0 0 21 21"
fill="none"
>
<path d="M20.5 21V0.5H0L20.5 21Z" fill="#00664F" />
</svg>
</li>
<li class="lbh-body-xs lbh-conversation__no-older">
Showing oldest messages
</li>
</ul>
Without details#
- Sent:
Hello. It's time to schedule a review of your plan. Is some time in the next week good?
- Showing oldest messages
<ul class="lbh-conversation">
<li class="lbh-conversation__message">
<span class="govuk-visually-hidden">Sent: </span>
<p class="lbh-body">
Hello. It's time to schedule a review of your plan. Is some time in the
next week good?
</p>
<svg
class="lbh-conversation__root"
width="12"
height="12"
viewBox="0 0 21 21"
fill="none"
>
<path d="M20.5 21V0.5H0L20.5 21Z" fill="#00664F" />
</svg>
</li>
<li class="lbh-body-xs lbh-conversation__no-older">
Showing oldest messages
</li>
</ul>