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>