Activity

Activity is used to represent the logging of user activity.

Examples

To render activity, use the class chi-activity.

Base

Monday, Apr 22 2019
2:50 PM
Password change for user trent.anderson
2:38 PM
Password change for user trent.anderson
11:37 PM
Password change for user trent.anderson
Monday, Apr 21 2019
5:00 PM
Password change for user trent.anderson
5:00 PM
Password change for user trent.anderson
11:20 AM
Password change for user trent.anderson
<div class="chi-activity">
  <div class="chi-activity__day">
    <div class="chi-activity__header">Monday, Apr 22 2019</div>
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>2:50 PM</div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>2:38 PM</div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>11:37 PM</div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-activity__day">
    <div class="chi-activity__header">Monday, Apr 21 2019</div>
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>11:20 AM</div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
    </div>
  </div>
</div>

With Avatar

Monday, Apr 22 2019
2:50 PM
avatar
Password change for user trent.anderson
2:38 PM
avatar
Password change for user trent.anderson
11:37 PM
avatar
Password change for user trent.anderson
Monday, Apr 21 2019
5:00 PM
avatar
Password change for user trent.anderson
5:00 PM
avatar
Password change for user trent.anderson
11:20 AM
avatar
Password change for user trent.anderson
<div class="chi-activity">
  <div class="chi-activity__day">
    <div class="chi-activity__header">Monday, Apr 22 2019</div>
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>2:50 PM</div>
        </div>
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>2:38 PM</div>
        </div>
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>11:37 PM</div>
        </div>
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-activity__day">
    <div class="chi-activity__header">Monday, Apr 21 2019</div>
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>11:20 AM</div>
        </div>
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header">Password change for user trent.anderson</div>
          <div class="chi-activity__end-footer">Admin</div>
        </div>
      </div>
    </div>
  </div>
</div>

Feed

Apply the modifier class -feed to render with feed style

avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
<div class="chi-activity -feed">
  <div class="chi-activity__day">
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/22/2019 &#183; 2:50 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/22/2019 &#183; 2:38 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/22/2019 &#183; 2:37 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/16/2019 &#183; 11:20 AM</div>
        </div>
      </div>
    </div>
  </div>
</div>

Compact Feed

Apply the modifier class -feed and the modifier class -compact to render with compact feed style

avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
avatar
trent.anderson deployed Active Directory
<div class="chi-activity -feed -compact">
  <div class="chi-activity__day">
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/22/2019 &#183; 2:50 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/22/2019 &#183; 2:38 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/22/2019 &#183; 2:37 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="chi-activity__item">
        <div class="chi-activity__item-avatar">
          <div class="chi-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-footer">04/16/2019 &#183; 11:20 AM</div>
        </div>
      </div>
    </div>
  </div>
</div>

Feed with stories

avatar
trent.anderson deployed Active Directory
  • Instance successfully deployed
    1 minute ago
  • Machine active-directory-vbo8o-1 successfully deployed
    2 minutes ago
  • Executing install:Active Directory in machine active-directory-vbo8o-1
    2 minutes ago
  • Updating machine IPs
    3 minutes ago
avatar
trent.anderson deployed Active Directory
  • Instance successfully deployed
    1 minute ago
  • Machine active-directory-vbo8o-1 successfully deployed
    2 minutes ago
  • Executing install:Active Directory in machine active-directory-vbo8o-1
    2 minutes ago
  • Updating machine IPs
    3 minutes ago
<div class="chi-activity -feed -stories">
  <div class="chi-activity__day">
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>
            <div class="chi-avatar">
              <img src="../../assets/images/avatar.jpg" alt="avatar">
            </div>
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-content">
            <ul>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Executing install:Active Directory in machine active-directory-vbo8o-1</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Updating machine IPs</div>
                  <div class="-time">3 minutes ago</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="chi-activity__end-footer">04/22/2019</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-activity__day">
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>
            <div class="chi-avatar">
              <img src="../../assets/images/avatar.jpg" alt="avatar">
            </div>
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-content">
            <ul>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Executing install:Active Directory in machine active-directory-vbo8o-1</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Updating machine IPs</div>
                  <div class="-time">3 minutes ago</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="chi-activity__end-footer">04/21/2019</div>
        </div>
      </div>
    </div>
  </div>
</div>

Feed with stories and operation icons

avatar
trent.anderson deployed Active Directory
  • Instance successfully deployed
    1 minute ago
  • Machine active-directory-vbo8o-1 successfully deployed
    2 minutes ago
  • Executing install:Active Directory in machine active-directory-vbo8o-1
    2 minutes ago
  • Updating machine IPs
    3 minutes ago
avatar
trent.anderson deployed Active Directory
  • Instance successfully deployed
    1 minute ago
  • Machine active-directory-vbo8o-1 successfully deployed
    2 minutes ago
  • Executing install:Active Directory in machine active-directory-vbo8o-1
    2 minutes ago
  • Updating machine IPs
    3 minutes ago
<div class="chi-activity -feed -stories">
  <div class="chi-activity__day">
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>
            <i class="chi-icon -icon--muted icon-circle-play-outline"></i>
            <div class="chi-avatar">
              <img src="../../assets/images/avatar.jpg" alt="avatar">
            </div>
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-content">
            <ul>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Executing install:Active Directory in machine active-directory-vbo8o-1</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Updating machine IPs</div>
                  <div class="-time">3 minutes ago</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="chi-activity__end-footer">04/22/2019</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-activity__day">
    <div class="chi-activity__content">
      <div class="chi-activity__item">
        <div class="chi-activity__start">
          <div>
            <i class="chi-icon -icon--muted icon-circle-play-outline"></i>
            <div class="chi-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
          </div>
        </div>
        <div class="chi-activity__end">
          <div class="chi-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="chi-activity__end-content">
            <ul>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--success icon-check"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Executing install:Active Directory in machine active-directory-vbo8o-1</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="chi-icon -icon--muted icon-circle-plus-outline"></i>
                <div>
                  <div>Updating machine IPs</div>
                  <div class="-time">3 minutes ago</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="chi-activity__end-footer">04/21/2019</div>
        </div>
      </div>
    </div>
  </div>
</div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon