BrandUI Card - PrimerBlazor

Product UI Brand UI Demo

Basic Card

Collaboration is the key to DevOps success

Everything you need to know about getting started with GitHub Actions.

Learn more

<PrimerBrandCard Href="https://github.com" CtaText="Learn more">
    <Heading>Collaboration is the key to DevOps success</Heading>
    <Description>Everything you need to know about getting started with GitHub Actions.</Description>
</PrimerBrandCard>

Minimal Variant

Collaboration is the key to DevOps success

Everything you need to know about getting started with GitHub Actions.

<PrimerBrandCard Href="https://github.com" Minimal>
    <Heading>Collaboration is the key to DevOps success</Heading>
    <Description>Everything you need to know about getting started with GitHub Actions.</Description>
</PrimerBrandCard>

With CTA Text

Collaboration is the key to DevOps success

Everything you need to know about getting started with GitHub Actions.

Discover how

<PrimerBrandCard Href="https://github.com" CtaText="Discover how">
    <Heading>Collaboration is the key to DevOps success</Heading>
    <Description>Everything you need to know about getting started with GitHub Actions.</Description>
</PrimerBrandCard>

With Border

Limited

Code search & code view

Enables you to rapidly search, navigate, and understand code.

<PrimerBrandCard Href="https://github.com" HasBorder>
    <Heading>Code search & code view</Heading>
    <Label>Limited</Label>
    <Description>Enables you to rapidly search, navigate, and understand code.</Description>
</PrimerBrandCard>

With Icon

Code search & code view

Enables you to rapidly search, navigate, and understand code.

<PrimerBrandCard Href="https://github.com">
    <Icon>
        <PrimerBrandIcon Icon="BrandIconName.Copilot16" Color="BrandIconColor.Purple" BgColor="BrandIconColor.Purple" />
    </Icon>
    <Heading>Code search & code view</Heading>
    <Description>Enables you to rapidly search, navigate, and understand code.</Description>
</PrimerBrandCard>

Icon and Label

Beta

Code search & code view

Enables you to rapidly search, navigate, and understand code.

<PrimerBrandCard Href="https://github.com">
    <Icon>
        <PrimerBrandIcon Icon="BrandIconName.Copilot16" Color="BrandIconColor.Green" BgColor="BrandIconColor.Green" />
    </Icon>
    <Label>Beta</Label>
    <Heading>Code search & code view</Heading>
    <Description>Enables you to rapidly search, navigate, and understand code.</Description>
</PrimerBrandCard>

With Image

Code search & code view

Enables you to rapidly search, navigate, and understand code.

<PrimerBrandCard Href="https://github.com">
    <Image>
        <img src="/images/placeholder.png" alt="placeholder" />
    </Image>
    <Heading>Code search & code view</Heading>
    <Description>Enables you to rapidly search, navigate, and understand code.</Description>
</PrimerBrandCard>

Image and Label

Beta

Code search & code view

Enables you to rapidly search, navigate, and understand code.

<PrimerBrandCard Href="https://github.com">
    <Image>
        <img src="/images/placeholder.png" alt="placeholder" />
    </Image>
    <Label>Beta</Label>
    <Heading>Code search & code view</Heading>
    <Description>Enables you to rapidly search, navigate, and understand code.</Description>
</PrimerBrandCard>

Torchlight Effect

Code search & code view

Enables you to rapidly search, navigate, and understand code.

<PrimerBrandCard Href="https://github.com" FullWidth HasBorder Skew AccentColor="var(--base-color-scale-lime-2)">
    <Icon>
        <PrimerBrandIcon Icon="BrandIconName.FileZip16" Color="BrandIconColor.Lime" BgColor="BrandIconColor.Lime" />
    </Icon>
    <Heading>Code search & code view</Heading>
    <Description>Enables you to rapidly search, navigate, and understand code.</Description>
</PrimerBrandCard>

Card Component Options

Available options for PrimerBrandCard

Name	Description	Default Value	CSS Class
Href	Target link URL	null	-
Target	Target of link	_self	-
Heading	Main heading text (RenderFragment)	null	Card__heading
Description	Description content (RenderFragment)	null	Card__description
Label	Label displayed above heading	null	Card__label
Icon	Icon above heading	null	Card__icon
Image	Image displayed above content	null	Card__image
CtaText	Call-to-action text	null	Card__action
Minimal	Use minimal visual style	false	Card--variant-minimal
HasBorder	Add border around card	false	Card--border
FullWidth	Use full width layout	false	Card--fullWidth
Skew	Apply skewed layout effect	false	Card--skew
AccentColor	Custom CSS accent color	null	inline style