Default Theme

DocumentCard

Overview

A document card (DocumentCard) represents a file, and contains additional metadata or actions. This offers people a richer view into a file than the typical grid view.

Usage

Default Style

this is a title a long title a really long title very long indeed this is a title a long title a really long title very long indeed

Albert Einstein Created a few minutes ago

<Stack Style="width:100%;" Tokens="@(new StackTokens() { ChildrenGap = new [] {20d}})">
    <DocumentCard Type="DocumentCardType.Normal" OnClickHref="http://bing.com">
        <DocumentCardPreview PreviewImages="@defaultImages?.Take(1).ToArray()"></DocumentCardPreview>
        <DocumentCardTitle Title="this is a title a long title a really long title very long indeed this is a title a long title a really long title very long indeed" ShouldTruncate="true"></DocumentCardTitle>
        <DocumentCardActivity Activity="Created a few minutes ago" People="@persons?.Take(1).ToArray()"></DocumentCardActivity>
    </DocumentCard>
</Stack>

Compact Style

My Heading

Albert Einstein Test activity

My Heading

Albert Einstein +1 Test activity

View and share files

Albert Einstein Created a few minutes ago

View and share files

Albert Einstein Created a few minutes ago

<Stack Style="width:100%;" Tokens="@(new StackTokens() { ChildrenGap = new [] {20d}})">
    <DocumentCard Type="DocumentCardType.Compact" OnClickHref="http://bing.com">
        <DocumentCardPreview PreviewImages="@images?.Take(1).ToArray()"></DocumentCardPreview>
        <DocumentCardDetails>
            <DocumentCardTitle ShouldTruncate="false" Title="My Heading"></DocumentCardTitle>
            <DocumentCardActivity Activity="Test activity" People="@persons?.Take(1).ToArray()"></DocumentCardActivity>
        </DocumentCardDetails>
    </DocumentCard>
    <DocumentCard Type="DocumentCardType.Compact" OnClickHref="http://bing.com">
        <DocumentCardPreview PreviewImages="@images"></DocumentCardPreview>
        <DocumentCardDetails>
            <DocumentCardTitle ShouldTruncate="false" Title="My Heading"></DocumentCardTitle>
            <DocumentCardActivity Activity="Test activity" People="@persons"></DocumentCardActivity>
        </DocumentCardDetails>
    </DocumentCard>
    <DocumentCard Type="DocumentCardType.Compact" OnClickHref="http://bing.com">
        <DocumentCardPreview PreviewImages="@previewImagesUsingIcon"></DocumentCardPreview>
        <DocumentCardDetails>
            <DocumentCardTitle ShouldTruncate="false" Title="View and share files"></DocumentCardTitle>
            <DocumentCardActivity Activity="Created a few minutes ago" People="@persons?.Take(1).ToArray()"></DocumentCardActivity>
        </DocumentCardDetails>
    </DocumentCard>
    <DocumentCard Type="DocumentCardType.Compact" OnClickHref="http://bing.com">
        <DocumentCardPreview PreviewImages="@previewOutlookUsingIcon"></DocumentCardPreview>
        <DocumentCardDetails>
            <DocumentCardTitle ShouldTruncate="false" Title="View and share files"></DocumentCardTitle>
            <DocumentCardActivity Activity="Created a few minutes ago" People="@persons?.Take(1).ToArray()"></DocumentCardActivity>
        </DocumentCardDetails>
    </DocumentCard>
</Stack>

Commands

Github

this is a title

Albert Einstein Created a few minutes ago

342

<Stack Style="width:100%;margin-bottom:50px;" Tokens="@(new StackTokens() { ChildrenGap = new [] {20d}})">
    <DocumentCard Type="DocumentCardType.Normal">
        <DocumentCardPreview PreviewImages="@images"></DocumentCardPreview>
        <DocumentCardLocation Location="Github" LocationHref="https://www.github.com"></DocumentCardLocation>
        <DocumentCardTitle Title="this is a title" ShouldTruncate="false"></DocumentCardTitle>
        <DocumentCardActivity Activity="Created a few minutes ago" People="@persons?.Take(1).ToArray()"></DocumentCardActivity>
        <DocumentCardActions Actions="@actions" Views="342"></DocumentCardActions>
    </DocumentCard>
</Stack>