Conversation row

an inbox row: leading avatar, title and preview, time and an unread count.

Example

<button type="button" class="lucent-conversation-row is-active" aria-current="true">
  <span class="lucent-conversation-row__leading">
    <div class="lucent-avatar lucent-avatar--sm lucent-avatar--none">
      <div class="lucent-avatar__circle">
        <span class="lucent-avatar__initials">AL</span>
      </div>
    </div>
  </span>
  <span class="lucent-conversation-row__main">
    <span class="lucent-conversation-row__title">Ada Lovelace</span>
    <span class="lucent-conversation-row__preview">Sounds great, shipping today.</span>
  </span>
  <span class="lucent-conversation-row__meta">
    <span class="lucent-conversation-row__time">9:24</span>
  </span>
</button>
<button type="button" class="lucent-conversation-row">
  <span class="lucent-conversation-row__leading">
    <div class="lucent-avatar lucent-avatar--sm lucent-avatar--none">
      <div class="lucent-avatar__circle">
        <span class="lucent-avatar__initials">DF</span>
      </div>
    </div>
  </span>
  <span class="lucent-conversation-row__main">
    <span class="lucent-conversation-row__title">Design Foundry</span>
    <span class="lucent-conversation-row__preview">3 new components are ready.</span>
  </span>
  <span class="lucent-conversation-row__meta">
    <span class="lucent-conversation-row__time">Mon</span>
    <span class="lucent-badge lucent-badge--count lucent-badge--accent lucent-conversation-row__badge">3</span>
  </span>
</button>

Using it

Angular lucent-conversation-row
import { LucentConversationRow } from '@design-foundry/lucent-angular';
Stylesheet .lucent-conversation-row
@design-foundry/lucent-styles/packs/messaging.css

API

NameKindTypeDefaultDescription
title input string '' primary line.
preview input string '' secondary preview line.
time input string '' timestamp.
unread input number 0 unread count badge.
active input boolean false the open conversation.
selected output void emits on activation.

Slots

AttributeDescription
lucentLeading leading avatar.

Theming

Color (4)
Size & spacing (4)
Border & radius (2)
Type (6)