Data Display - Noundry UI Showcase

Card

Content containers with header, body, and footer sections. Use cards to group related content.

Basic Card

A simple card with title and description

This is the main content area of the card. You can put any content here.

Card with Footer

This card has a footer with action buttons and a hover effect.

Custom Header

Active

This card has a completely custom header section.

View Code

<!-- Basic Card -->
<noundry-card title="Card Title" description="Card description">
    <noundry-card-body>
        Main card content
    </noundry-card-body>
</noundry-card>

<!-- Card with All Sections -->
<noundry-card title="Full Card" hoverable="true">
    <noundry-card-header>
        Custom header content
    </noundry-card-header>
    <noundry-card-body>
        Main card content
    </noundry-card-body>
    <noundry-card-footer>
        <noundry-button>Action</noundry-button>
    </noundry-card-footer>
</noundry-card>

Card Properties

Property	Type	Default	Description
`title`	string	null	Card title
`description`	string	null	Card description
`hoverable`	bool	false	Hover effect
`bordered`	bool	true	Show border

Table

Basic data tables with sorting and styling. Use for simple data display without server-side features.

Product	Category	Price	Stock	Status
MacBook Pro	Electronics	$2,499.00	15	In Stock
iPhone 15 Pro	Electronics	$1,199.00	42	In Stock
AirPods Pro	Electronics	$249.00	0	Out of Stock
Magic Keyboard	Accessories	$299.00	5	Low Stock
Studio Display	Electronics	$1,599.00	8	In Stock

View Code

<noundry-table hoverable="true" striped="true">
    <noundry-table-head>
        <noundry-table-row>
            <noundry-table-header sortable="true">Name</noundry-table-header>
            <noundry-table-header sortable="true">Email</noundry-table-header>
            <noundry-table-header>Status</noundry-table-header>
        </noundry-table-row>
    </noundry-table-head>
    <noundry-table-body>
        @foreach (var item in Model.Items)
        {
            <noundry-table-row>
                <noundry-table-cell>@item.Name</noundry-table-cell>
                <noundry-table-cell>@item.Email</noundry-table-cell>
                <noundry-table-cell>
                    <noundry-badge variant="success">Active</noundry-badge>
                </noundry-table-cell>
            </noundry-table-row>
        }
    </noundry-table-body>
</noundry-table>

Table Properties

Property	Type	Default	Description
`hoverable`	bool	false	Row hover effect
`striped`	bool	false	Striped row styling

Pagination

Page navigation controls. Use with data tables or any paginated content.

Standard Pagination

Page 3 of 10

First Previous

1 2 3 4 5 …

Next Last

Without First/Last Buttons

Page 5 of 15

Page 2 of 8

First Previous

1 2 3 4 …

Next Last

View Code

<noundry-pagination current-page="1"
                    total-pages="10"
                    show-first-last="true"
                    show-page-info="true" />

<!-- With Item Count -->
<noundry-pagination current-page="1"
                    total-pages="10"
                    total-items="100"
                    page-size="10"
                    max-visible-pages="5" />

Pagination Properties

Property	Type	Default	Description
`current-page`	int	1	Current page number
`total-pages`	int	1	Total pages
`total-items`	int	0	Total item count
`page-size`	int	10	Items per page
`show-first-last`	bool	true	Show first/last buttons
`show-page-info`	bool	true	Show "Page X of Y"
`max-visible-pages`	int	5	Max visible page numbers

Copy to Clipboard

Text copy functionality with visual feedback. Perfect for code snippets, API keys, and commands.

Install Command

dotnet add package Noundry.UI

API Key

sk-proj-abc123xyz789

Without Text Display

View Code

<noundry-copy-to-clipboard text="npm install noundry-ui"
                           success-text="Copied!"
                           button-text="Copy" />

<!-- Without text display -->
<noundry-copy-to-clipboard text="secret-value"
                           show-text="false"
                           button-text="Copy Secret" />

Copy to Clipboard Properties

Property	Type	Default	Description
`text`	string	required	Text to copy
`button-text`	string	"Copy"	Button text
`success-text`	string	"Copied!"	Success message
`show-text`	bool	true	Display text value

Skeleton

Loading state placeholders. Use skeletons to show content structure while data is loading.

Basic Skeletons

Avatar Skeleton

Text Block

Card Skeletons

View Code

<!-- Basic skeleton -->
<noundry-skeleton variant="text" height="h-6" width="w-3/4" />

<!-- Avatar skeleton -->
<noundry-skeleton-avatar size="lg" />

<!-- Text skeleton -->
<noundry-skeleton-text lines="3" variable-width="true" />

<!-- Card skeleton -->
<noundry-skeleton-card show-image="true" show-avatar="true" text-lines="3" />

<!-- Custom container -->
<noundry-skeleton-container loading="@Model.IsLoading">
    <noundry-skeleton variant="avatar" />
    <noundry-skeleton variant="text" width="w-1/2" />
</noundry-skeleton-container>

Skeleton Properties

Property	Type	Default	Description
`variant`	string	"text"	Type: text, circle, avatar, rectangle
`width`	string	"w-full"	Width class
`height`	string	"h-4"	Height class
`size`	string	"md"	Size for avatar: sm, md, lg, xl
`animation`	string	"pulse"	Animation: pulse, wave, none

Image Gallery

Image gallery with lightbox viewer. Click images to open in full-screen lightbox with navigation.

Beautiful mountain landscape

Dense forest view

Serene nature scene

Majestic waterfall

Beautiful mountain landscape

Dense forest view

Serene nature scene

Majestic waterfall

View Code

<noundry-image-gallery columns="4" gap="4">
    <noundry-image-gallery-item
        src="/images/photo1.jpg"
        alt="Photo 1"
        caption="Beautiful sunset" />
    <noundry-image-gallery-item
        src="/images/photo2.jpg"
        alt="Photo 2" />
</noundry-image-gallery>

Image Gallery Properties

Property	Type	Default	Description
`columns`	int	3	Grid columns
`gap`	string	"4"	Gap between items
`show-lightbox`	bool	true	Enable lightbox
`show-captions`	bool	true	Show image captions

Image Gallery Item Properties

Property	Type	Default	Description
`src`	string	required	Image URL
`alt`	string	required	Alt text
`caption`	string	null	Image caption

Data Display Components

Card

Basic Card

Card with Footer

Custom Header

Card Properties

Table

Table Properties

Pagination

Standard Pagination

Without First/Last Buttons

Simple (Without Page Info)

Pagination Properties

Copy to Clipboard

Install Command

API Key

Without Text Display

Copy to Clipboard Properties

Skeleton

Basic Skeletons

Avatar Skeleton

Text Block

Card Skeletons

Skeleton Properties

Image Gallery

Image Gallery Properties

Image Gallery Item Properties

Looking for Advanced Data Grids?