About
Foundations
Components
Templates
Messages
Messages, typically between caregivers and teachers.

Basic text-only messages

Text-only message
current
<div class="message-list">
  <div class="message">
    <div class="message-header self">
      <div class="datetime pull-right">Apr 11,  2:11 PM</div>
      <div class="author">You</div>
    </div>
    <div class="message-body self">
      <div class="view-mail message">
        <p>just testing</p>
      </div>
    </div>
  </div>

  <div class="message">
    <div class="message-header other">
      <div class="datetime pull-right">Jan 15,  8:28 AM</div>
      <div class="author">sean fitzpatrick</div>
    </div>
    <div class="message-body other">
      <div class="view-mail message">
        <p>good video!</p>
      </div>
    </div>
  </div>
</div>
Text-only message—v2
ready
<div class="message-list">
  <div class="message v2-message message--self">
    <div class="message-header self">
      <div class="datetime text-right">Apr 11, 2:11 PM</div>
    </div>
    <div class="message-body self">
      <div class="view-mail message">
        <p>just testing</p>
      </div>
    </div>
  </div>
  <div class="message v2-message message--other">
    <div class="message-header other">
      <div class="datetime text-right">Jan 15, 8:28 AM</div>
    </div>
    <div class="message-body other">
      <div class="view-mail message">
        <p>good video!</p>
      </div>
    </div>
  </div>
</div>

Video comment

Video Comment
current
<div class="message-list">
  <div class="message">
    <div class="message-header self">
      <div class="datetime pull-right">Apr 11,  2:11 PM</div>
      <div class="author">You</div>
    </div>
    <div class="message-body self">
      <div class="view-mail message">
        <a href="/en/videos/3"><img class="video-thumbnail" src="https://thumbnails-readyrosie-com.s3-us-west-2.amazonaws.com/uploads/video/thumbnail/3/play_689233967_295x166.jpg" alt="Play 689233967 295x166"></a>
        <p>just testing</p>
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message-header other">
      <div class="datetime pull-right">Jan 15,  8:28 AM</div>
      <div class="author">sean fitzpatrick</div>
    </div>
    <div class="message-body other">
      <div class="view-mail message">
        <a href="/en/videos/3"><img class="video-thumbnail" src="https://thumbnails-readyrosie-com.s3-us-west-2.amazonaws.com/uploads/video/thumbnail/3/play_689233967_295x166.jpg" alt="Play 689233967 295x166"></a>
        <p>good video!</p>
      </div>
    </div>
  </div>
</div>
Video Comment—v2
ready
<div class="message-list">
  <div class="message v2-message message--comment message--self">
    <div class="message-header self">
      <div class="datetime text-right">Apr 11,  2:11 PM</div>
    </div>
    <div class="message-comment-header">Comment on <strong>&ldquo;Pair of Socks&rdquo;</strong></div>
    <div class="message-body self">
      <div class="view-mail message">
        <p>just testing</p>
      </div>
    </div>
  </div>
  <div class="message v2-message message--comment message--other">
    <div class="message-header other">
      <div class="datetime text-right">Jan 15,  8:28 AM</div>
    </div>
    <div class="message-comment-header">Comment on <strong>&ldquo;Pair of Socks&rdquo;</strong></div>
    <div class="message-body other">
      <div class="view-mail message">
        <p>good video!</p>
      </div>
    </div>
  </div>
</div>

Video message

Message with video
current
<div class="message-list">
  <div class="message">
    <div class="message-header self">
      <div class="datetime pull-right">Apr 11,  2:11 PM</div>
      <div class="author">You</div>
    </div>
    <div class="message-body self">
      <div class="view-mail message">
        <a href="/en/videos/3"><img class="video-thumbnail" src="https://thumbnails-readyrosie-com.s3-us-west-2.amazonaws.com/uploads/video/thumbnail/3/play_689233967_295x166.jpg" alt="Play 689233967 295x166"></a>
        <p>just testing</p>
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message-header other">
      <div class="datetime pull-right">Jan 15,  8:28 AM</div>
      <div class="author">sean fitzpatrick</div>
    </div>
    <div class="message-body other">
      <div class="view-mail message">
        <a href="/en/videos/3"><img class="video-thumbnail" src="https://thumbnails-readyrosie-com.s3-us-west-2.amazonaws.com/uploads/video/thumbnail/3/play_689233967_295x166.jpg" alt="Play 689233967 295x166"></a>
        <p>good video!</p>
      </div>
    </div>
  </div>
</div>
Message with video—v2
ready
<div class="message-list">
  <div class="message v2-message message--video message--self">
    <div class="message-header self">
      <div class="datetime text-right">Apr 11,  2:11 PM</div>
    </div>
    <div class="message-thumbnail">
      <a href="/en/videos/3"><img class="video-thumbnail" src="https://thumbnails-readyrosie-com.s3-us-west-2.amazonaws.com/uploads/video/thumbnail/3/play_689233967_295x166.jpg" alt="Play 689233967 295x166"></a>
    </div>
    <div class="message-body self">
      <div class="view-mail message">
        <p>just testing</p>
      </div>
    </div>
  </div>
  <div class="message v2-message message--video message--other">
    <div class="message-header other">
      <div class="datetime text-right">Jan 15,  8:28 AM</div>
    </div>
    <div class="message-thumbnail">
      <a href="/en/videos/3"><img class="video-thumbnail" src="https://thumbnails-readyrosie-com.s3-us-west-2.amazonaws.com/uploads/video/thumbnail/3/play_689233967_295x166.jpg" alt="Play 689233967 295x166"></a>
    </div>
    <div class="message-body other">
      <div class="view-mail message">
        <p>good video!</p>
      </div>
    </div>
  </div>
</div>