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
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__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
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
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 · 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 · 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 · 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 · 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 · 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 · 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
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
trent.anderson deployed Active Directory
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 · 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 · 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 · 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 · 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 · 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 · 11:20 AM</div>
</div>
</div>
</div>
</div>
</div>
Feed with stories
<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
<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>