Activity Logs Wireframes

The Activity Logs displays a chronological feed of user actions. Customize the layout using VeltActivityLogWireframe and its sub-components.

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

Overview

React / Next.js

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

Other Frameworks

<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>

Header

React / Next.js

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

Other Frameworks

<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

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

Other Frameworks

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

CloseButton

React / Next.js

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

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

Empty

React / Next.js

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

Other Frameworks

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

List

React / Next.js

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

<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>

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

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