Activity Logs Wireframes

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe>
        <VeltActivityLogWireframe.Header />
        <VeltActivityLogWireframe.Loading />
        <VeltActivityLogWireframe.List />
        <VeltActivityLogWireframe.Empty />
    </VeltActivityLogWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-wireframe>
        <velt-activity-log-header-wireframe></velt-activity-log-header-wireframe>
        <velt-activity-log-loading-wireframe></velt-activity-log-loading-wireframe>
        <velt-activity-log-list-wireframe></velt-activity-log-list-wireframe>
        <velt-activity-log-empty-wireframe></velt-activity-log-empty-wireframe>
    </velt-activity-log-wireframe>
</velt-wireframe>

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header>
        <VeltActivityLogWireframe.Header.Title />
        <VeltActivityLogWireframe.Header.CloseButton />
        <VeltActivityLogWireframe.Header.Filter />
    </VeltActivityLogWireframe.Header>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-wireframe>
        <velt-activity-log-header-title-wireframe></velt-activity-log-header-title-wireframe>
        <velt-activity-log-header-close-button-wireframe></velt-activity-log-header-close-button-wireframe>
        <velt-activity-log-header-filter-wireframe></velt-activity-log-header-filter-wireframe>
    </velt-activity-log-header-wireframe>
</velt-wireframe>

Title

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Title />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-title-wireframe></velt-activity-log-header-title-wireframe>
</velt-wireframe>

CloseButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.CloseButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-close-button-wireframe></velt-activity-log-header-close-button-wireframe>
</velt-wireframe>

Filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter>
        <VeltActivityLogWireframe.Header.Filter.Trigger />
        <VeltActivityLogWireframe.Header.Filter.Content />
    </VeltActivityLogWireframe.Header.Filter>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-wireframe>
        <velt-activity-log-header-filter-trigger-wireframe></velt-activity-log-header-filter-trigger-wireframe>
        <velt-activity-log-header-filter-content-wireframe></velt-activity-log-header-filter-content-wireframe>
    </velt-activity-log-header-filter-wireframe>
</velt-wireframe>

Filter Trigger

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter.Trigger>
        <VeltActivityLogWireframe.Header.Filter.Trigger.Icon />
        <VeltActivityLogWireframe.Header.Filter.Trigger.Label />
    </VeltActivityLogWireframe.Header.Filter.Trigger>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-trigger-wireframe>
        <velt-activity-log-header-filter-trigger-icon-wireframe></velt-activity-log-header-filter-trigger-icon-wireframe>
        <velt-activity-log-header-filter-trigger-label-wireframe></velt-activity-log-header-filter-trigger-label-wireframe>
    </velt-activity-log-header-filter-trigger-wireframe>
</velt-wireframe>

Filter Trigger Icon

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter.Trigger.Icon />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-trigger-icon-wireframe></velt-activity-log-header-filter-trigger-icon-wireframe>
</velt-wireframe>

Filter Trigger Label

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter.Trigger.Label />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-trigger-label-wireframe></velt-activity-log-header-filter-trigger-label-wireframe>
</velt-wireframe>

Filter Content

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter.Content>
        <VeltActivityLogWireframe.Header.Filter.Content.Item />
    </VeltActivityLogWireframe.Header.Filter.Content>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-content-wireframe>
        <velt-activity-log-header-filter-content-item-wireframe></velt-activity-log-header-filter-content-item-wireframe>
    </velt-activity-log-header-filter-content-wireframe>
</velt-wireframe>

Filter Content Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter.Content.Item>
        <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
        <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
    </VeltActivityLogWireframe.Header.Filter.Content.Item>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-content-item-wireframe>
        <velt-activity-log-header-filter-content-item-icon-wireframe></velt-activity-log-header-filter-content-item-icon-wireframe>
        <velt-activity-log-header-filter-content-item-label-wireframe></velt-activity-log-header-filter-content-item-label-wireframe>
    </velt-activity-log-header-filter-content-item-wireframe>
</velt-wireframe>

Filter Content Item Icon

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-content-item-icon-wireframe></velt-activity-log-header-filter-content-item-icon-wireframe>
</velt-wireframe>

Filter Content Item Label

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-header-filter-content-item-label-wireframe></velt-activity-log-header-filter-content-item-label-wireframe>
</velt-wireframe>

Loading

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Loading />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-loading-wireframe></velt-activity-log-loading-wireframe>
</velt-wireframe>

Empty

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.Empty />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-empty-wireframe></velt-activity-log-empty-wireframe>
</velt-wireframe>

List

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List>
        <VeltActivityLogWireframe.List.DateGroup />
        <VeltActivityLogWireframe.List.Item />
        <VeltActivityLogWireframe.List.ShowMore />
    </VeltActivityLogWireframe.List>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-wireframe>
        <velt-activity-log-list-date-group-wireframe></velt-activity-log-list-date-group-wireframe>
        <velt-activity-log-list-item-wireframe></velt-activity-log-list-item-wireframe>
        <velt-activity-log-list-show-more-wireframe></velt-activity-log-list-show-more-wireframe>
    </velt-activity-log-list-wireframe>
</velt-wireframe>

DateGroup

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.DateGroup>
        <VeltActivityLogWireframe.List.DateGroup.Label />
    </VeltActivityLogWireframe.List.DateGroup>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-date-group-wireframe>
        <velt-activity-log-list-date-group-label-wireframe></velt-activity-log-list-date-group-label-wireframe>
    </velt-activity-log-list-date-group-wireframe>
</velt-wireframe>

DateGroup Label

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.DateGroup.Label />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-date-group-label-wireframe></velt-activity-log-list-date-group-label-wireframe>
</velt-wireframe>

Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item>
        <VeltActivityLogWireframe.List.Item.Icon />
        <VeltActivityLogWireframe.List.Item.Avatar />
        <VeltActivityLogWireframe.List.Item.Time />
        <VeltActivityLogWireframe.List.Item.Content />
    </VeltActivityLogWireframe.List.Item>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-wireframe>
        <velt-activity-log-list-item-icon-wireframe></velt-activity-log-list-item-icon-wireframe>
        <velt-activity-log-list-item-avatar-wireframe></velt-activity-log-list-item-avatar-wireframe>
        <velt-activity-log-list-item-time-wireframe></velt-activity-log-list-item-time-wireframe>
        <velt-activity-log-list-item-content-wireframe></velt-activity-log-list-item-content-wireframe>
    </velt-activity-log-list-item-wireframe>
</velt-wireframe>

Item Icon

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Icon />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-icon-wireframe></velt-activity-log-list-item-icon-wireframe>
</velt-wireframe>

Item Avatar

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Avatar />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-avatar-wireframe></velt-activity-log-list-item-avatar-wireframe>
</velt-wireframe>

Item Time

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Time />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-time-wireframe></velt-activity-log-list-item-time-wireframe>
</velt-wireframe>

Item Content

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Content>
        <VeltActivityLogWireframe.List.Item.Content.User />
        <VeltActivityLogWireframe.List.Item.Content.Action />
        <VeltActivityLogWireframe.List.Item.Content.Target />
        <VeltActivityLogWireframe.List.Item.Content.Detail />
    </VeltActivityLogWireframe.List.Item.Content>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-content-wireframe>
        <velt-activity-log-list-item-content-user-wireframe></velt-activity-log-list-item-content-user-wireframe>
        <velt-activity-log-list-item-content-action-wireframe></velt-activity-log-list-item-content-action-wireframe>
        <velt-activity-log-list-item-content-target-wireframe></velt-activity-log-list-item-content-target-wireframe>
        <velt-activity-log-list-item-content-detail-wireframe></velt-activity-log-list-item-content-detail-wireframe>
    </velt-activity-log-list-item-content-wireframe>
</velt-wireframe>

Item Content User

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Content.User />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-content-user-wireframe></velt-activity-log-list-item-content-user-wireframe>
</velt-wireframe>

Item Content Action

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Content.Action />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-content-action-wireframe></velt-activity-log-list-item-content-action-wireframe>
</velt-wireframe>

Item Content Target

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Content.Target />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-content-target-wireframe></velt-activity-log-list-item-content-target-wireframe>
</velt-wireframe>

Item Content Detail

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.Item.Content.Detail />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-item-content-detail-wireframe></velt-activity-log-list-item-content-detail-wireframe>
</velt-wireframe>

ShowMore

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltActivityLogWireframe.List.ShowMore />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-activity-log-list-show-more-wireframe></velt-activity-log-list-show-more-wireframe>
</velt-wireframe>

Concepts

Async Collaboration

Realtime Collaboration

Activity Logs Wireframes

Overview

Header

Title

CloseButton

Filter

Filter Trigger

Filter Trigger Icon

Filter Trigger Label

Filter Content

Filter Content Item

Filter Content Item Icon

Filter Content Item Label

Loading

Empty

List

DateGroup

DateGroup Label

Item

Item Icon

Item Avatar

Item Time

Item Content

Item Content User

Item Content Action

Item Content Target

Item Content Detail

ShowMore

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​Header

​Title

​CloseButton

​Filter

​Filter Trigger

​Filter Trigger Icon

​Filter Trigger Label

​Filter Content

​Filter Content Item

​Filter Content Item Icon

​Filter Content Item Label

​Loading

​Empty

​List

​DateGroup

​DateGroup Label

​Item

​Item Icon

​Item Avatar

​Item Time

​Item Content

​Item Content User

​Item Content Action

​Item Content Target

​Item Content Detail

​ShowMore

Overview

Header

Title

CloseButton

Filter

Filter Trigger

Filter Trigger Icon

Filter Trigger Label

Filter Content

Filter Content Item

Filter Content Item Icon

Filter Content Item Label

Loading

Empty

List

DateGroup

DateGroup Label

Item

Item Icon

Item Avatar

Item Time

Item Content

Item Content User

Item Content Action

Item Content Target

Item Content Detail

ShowMore