Design Kit

Activity

Activity is used to represent the logging of user activity.

Examples

To render activity, use the class m-activity.

Base

Monday, Apr 22 2019
2:50 PM
Password change for user trent.anderson
Admin
2:38 PM
Password change for user trent.anderson
Admin
11:37 PM
Password change for user trent.anderson
Admin
Monday, Apr 21 2019
5:00 PM
Password change for user trent.anderson
Admin
5:00 PM
Password change for user trent.anderson
Admin
11:20 AM
Password change for user trent.anderson
Admin
<div class="m-activity">
  <div class="m-activity__day">
    <div class="m-activity__header">Monday, Apr 22 2019</div>
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>2:50 PM</div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>2:38 PM</div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>11:37 PM</div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
    </div>
  </div>
  <div class="m-activity__day">
    <div class="m-activity__header">Monday, Apr 21 2019</div>
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>11:20 AM</div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-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
Admin
2:38 PM
avatar
Password change for user trent.anderson
Admin
11:37 PM
avatar
Password change for user trent.anderson
Admin
Monday, Apr 21 2019
5:00 PM
avatar
Password change for user trent.anderson
Admin
5:00 PM
avatar
Password change for user trent.anderson
Admin
11:20 AM
avatar
Password change for user trent.anderson
Admin
<div class="m-activity">
  <div class="m-activity__day">
    <div class="m-activity__header">Monday, Apr 22 2019</div>
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>2:50 PM</div>
        </div>
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>2:38 PM</div>
        </div>
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>11:37 PM</div>
        </div>
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
    </div>
  </div>
  <div class="m-activity__day">
    <div class="m-activity__header">Monday, Apr 21 2019</div>
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>5:00 PM</div>
        </div>
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-activity__end-footer">Admin</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>11:20 AM</div>
        </div>
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header">Password change for user trent.anderson</div>
          <div class="m-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
04/22/2019 · 2:50 PM
avatar
trent.anderson deployed Active Directory
04/22/2019 · 2:38 PM
avatar
trent.anderson deployed Active Directory
04/22/2019 · 2:37 PM
avatar
trent.anderson deployed Active Directory
04/16/2019 · 5:00 PM
avatar
trent.anderson deployed Active Directory
04/16/2019 · 5:00 PM
avatar
trent.anderson deployed Active Directory
04/16/2019 · 11:20 AM
<div class="m-activity -feed">
  <div class="m-activity__day">
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/22/2019 &#183; 2:50 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/22/2019 &#183; 2:38 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/22/2019 &#183; 2:37 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-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
04/22/2019 · 2:50 PM
avatar
trent.anderson deployed Active Directory
04/22/2019 · 2:38 PM
avatar
trent.anderson deployed Active Directory
04/22/2019 · 2:37 PM
avatar
trent.anderson deployed Active Directory
04/16/2019 · 5:00 PM
avatar
trent.anderson deployed Active Directory
04/16/2019 · 5:00 PM
avatar
trent.anderson deployed Active Directory
04/16/2019 · 11:20 AM
<div class="m-activity -feed -compact">
  <div class="m-activity__day">
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/22/2019 &#183; 2:50 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/22/2019 &#183; 2:38 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/22/2019 &#183; 2:37 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-footer">04/16/2019 &#183; 5:00 PM</div>
        </div>
      </div>
      <div class="m-activity__item">
        <div class="m-activity__item-avatar">
          <div class="a-avatar">
            <img src="../../assets/images/avatar.jpg" alt="avatar">
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-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
04/22/2019
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
04/21/2019
<div class="m-activity -feed -stories">
  <div class="m-activity__day">
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>
            <div class="a-avatar">
              <img src="../../assets/images/avatar.jpg" alt="avatar">
            </div>
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-content">
            <ul>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--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="a-icon -text--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="m-activity__end-footer">04/22/2019</div>
        </div>
      </div>
    </div>
  </div>
  <div class="m-activity__day">
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>
            <div class="a-avatar">
              <img src="../../assets/images/avatar.jpg" alt="avatar">
            </div>
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-content">
            <ul>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--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="a-icon -text--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="m-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
04/22/2019
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
04/21/2019
<div class="m-activity -feed -stories">
  <div class="m-activity__day">
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>
            <i class="a-icon -text--muted icon-circle-play-outline"></i>
            <div class="a-avatar">
              <img src="../../assets/images/avatar.jpg" alt="avatar">
            </div>
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-content">
            <ul>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--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="a-icon -text--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="m-activity__end-footer">04/22/2019</div>
        </div>
      </div>
    </div>
  </div>
  <div class="m-activity__day">
    <div class="m-activity__content">
      <div class="m-activity__item">
        <div class="m-activity__start">
          <div>
            <i class="a-icon -text--muted icon-circle-play-outline"></i>
            <div class="a-avatar"><img src="../../assets/images/avatar.jpg" alt="avatar"></div>
          </div>
        </div>
        <div class="m-activity__end">
          <div class="m-activity__end-header"><strong>trent.anderson</strong> deployed<strong> Active Directory</strong>
          </div>
          <div class="m-activity__end-content">
            <ul>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Instance successfully deployed</div>
                  <div class="-time">1 minute ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--success icon-check-alt"></i>
                <div>
                  <div>Machine active-directory-vbo8o-1 successfully deployed</div>
                  <div class="-time">2 minutes ago</div>
                </div>
              </li>
              <li>
                <i class="a-icon -text--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="a-icon -text--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="m-activity__end-footer">04/21/2019</div>
        </div>
      </div>
    </div>
  </div>
</div>