Draft

Messages

There are two views in the messages page. One is the index, which is a list of all messages within an inbox. The second is the thread view, which displays all messages within a thread in their entirety.

Thread view

  • Messages are displayed newest first

Thread header

Conversation

Conversations are messages that take between two parties.

Hi, I have a question about my application

<div class="sba-c-thread-header">
  <div class="sba-c-thread__icon">
    <svg aria-hidden="true" class="sba-c-icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#comments"></use>
    </svg>
  </div>
  <h2 class="sba-c-thread-header__subject">Hi, I have a question about my application</h2>
  <div class="sba-c-thread-header__actions">
    <button class="sba-c-button" type="button">Reply</button>
  </div>
</div>

Official letter

Official letters are to be used on any official notice from the SBA. This includes determination letters, 15-day letters, letters of intent, etc. Official letters cannot be replied to.

Decision Letter

Replies are disabled on this message

<div class="sba-c-thread-header">
  <div class="sba-c-thread__icon">
    <img src="/certify-design-system-documentation/assets/img/sba_round_logo.png" alt="">
  </div>
  <h2 class="sba-c-thread-header__subject">Decision Letter</h2>
  <div class="sba-c-thread-header__actions">
    <p>Replies are disabled on this message</p>
  </div>
</div>

Read status

The read status provides feedback to the sender about whether or not a message was opened. Note, it cannot be determined whether or not a message was read.

This message was opened on Sept. 15 2017 at 11:30am

This message has not been opened 

<!-- Opened message -->
<p class="sba-c-message__read-status">
  <svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#envelope-open"></use>
  </svg> This message was opened on Sept. 15 2017 at 11:30am
</p>

<!-- Unopened message -->
<p class="sba-c-message__read-status">
  <svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#envelope"></use>
  </svg> This message has not been opened
</p>

Avatars

Avatars help users quickly scan a page. SBA users can be highlighted using a blue background color.

 <!-- SBA User -->
<div class="sample">
  <svg class="sba-c-avatar sba-c-avatar--sba-user" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="50" cy="50" r="50"/>
    <text x="50" y="50" text-anchor="middle" alignment-baseline="central" dominant-baseline="central">SA</text>
  </svg>

  <!-- Firm User -->
  <svg class="sba-c-avatar" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="50" cy="50" r="50"/>
    <text x="50" y="50" text-anchor="middle" alignment-baseline="central" dominant-baseline="central">AS</text>
  </svg>
</div>

Putting everything together

Conversation

  • The most recent message has a reply button below the last paragraph. It triggers the same action as the reply button in the header

Hi, I have a question about my application

  1. Bill Simpson

    To: Allen Hayes

    June 15, 2018

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Reply to this message

  2. Allen Hayes

    To: Bill Simpson

    June 10, 2018

    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

    This message was opened on Sept. 15 2017 at 11:30am

Official letter

Decision Letter

Replies are disabled on this message

  1. Bill Simpson

    To: Allen Hayes

    June 15, 2018

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    If you have a question about this notice, please contact your Business Opportunity Specialist.