Tesserae - Card

Card

Description

A card component with optional headers and footers

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Cards can contain different types of components. They can be used to show a list of items, a single item, or a mix of both.

Samples

Basic Card

card-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a basic card."));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Card with Header

card-header-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a card with a header."))
                .SetTitle(HStack().WS().AlignItemsCenter().Children(
                    TextBlock("Header").SemiBold(),
                    Tag("Sample Card").Primary().ML(8)));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Card with Header and Footer

card-footer-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a card with a header and a footer."))
                .SetTitle("Header")
                .SetFooter(Button("Action").Primary());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Compact Card

card-compact-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This is a compact card.")).SetTitle("Header").Compact();

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

card-hover-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This card has hover effect.")).HoverColor();

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

Custom Background

card-background-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var card = Card(TextBlock("This card has a custom background."))
                .BackgroundColor(Theme.Primary.Background);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(card);
        }
    }
}

API reference

class

Card

public sealed class Card : ComponentBase<Card, HTMLElement>, IHasBackgroundColor, IRoundedStyle

A bordered, shadowed surface used to group related content into a self-contained block.

Namespace: Tesserae
Inheritance: ComponentBase<Card, HTMLElement> → Card
Implements: IHasBackgroundColor, IRoundedStyle

Constructors

Name	Description
Card	Initializes a new instance of this class.

Constructor

Card

public Card(IComponent content, bool noAnimation = false)

Initializes a new instance of this class.

Properties

Name	Description
IsCompact	Gets or set whenever the card is rendered in a compact form
Background	Gets or sets the CSS background of the component.

Property

Card.IsCompact

public bool IsCompact { get ; set ; }

Gets or set whenever the card is rendered in a compact form

Property

Card.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Methods

Name	Description
EnsureLayout	Gets or set whenever the card is rendered in a compact form
OnClick	Registers a callback invoked when the click event fires.
SetTitle	Sets the title of the component, optionally with an icon drawn just before it - what the card is about, said in a glyph as well as in words. Pass `iconColor` to give the icon a color of its own; without one it takes the title's.
SetContent	Sets the content of the component.
SetFooter	Sets the footer of the component.
Compact	Renders the component in a compact form.
BackgroundColor	Sets the background colour of the card.
Border	Configures the component to border.
NoPadding	Removes / disables the padding on the component.
HoverColor	Enables or disables the hover colour overlay on the card.
AI	Marks the card as AI output: a purple-to-blue tint over whatever background it had, an accent border, and a soft shadow in the same hue. The tint is deliberately light - a card is a large surface, and the point is to say where the content came from, not to colour the page. The class goes on the card's outer container, because which element paints the background depends on whether the card has a header or a footer - see tss.ai.css.
Render	Renders the component's root HTML element.

Method

Card.EnsureLayout

private void EnsureLayout()

Gets or set whenever the card is rendered in a compact form

Method

Card.OnClick

Overload
OnClick(ComponentEventHandler<Card, MouseEvent>, bool)	Registers a callback invoked when the click event fires.
OnClick(Action)	Registers a callback invoked when the click event fires.

OnClick(ComponentEventHandler<Card, MouseEvent>, bool)

public override Card OnClick(ComponentEventHandler<Card, MouseEvent> onClick, bool clearPrevious = true)

Registers a callback invoked when the click event fires.

Parameters

onClick ComponentEventHandler<Card, MouseEvent>
clearPrevious bool

OnClick(Action)

public Card OnClick(Action action)

Registers a callback invoked when the click event fires.

Parameters

action Action

Method

Card.SetTitle

Overload
SetTitle(string, UIcons?, string, UIconsWeight)	Sets the title of the component, optionally with an icon drawn just before it - what the card is about, said in a glyph as well as in words. Pass `iconColor` to give the icon a color of its own; without one it takes the title's.
SetTitle(IComponent)	Sets the title of the component.

SetTitle(string, UIcons?, string, UIconsWeight)

public Card SetTitle(string title, UIcons? icon = null, string iconColor = null, UIconsWeight iconWeight = UIconsWeight.Regular)

Sets the title of the component, optionally with an icon drawn just before it - what the card is about, said in a glyph as well as in words. Pass iconColor to give the icon a color of its own; without one it takes the title's.

Parameters

title string
icon UIcons?
iconColor string
iconWeight UIconsWeight

SetTitle(IComponent)

public Card SetTitle(IComponent title)

Sets the title of the component.

Parameters

title IComponent

Method

Card.SetContent

public Card SetContent(IComponent content)

Sets the content of the component.

Method

Card.SetFooter

public Card SetFooter(IComponent footer)

Sets the footer of the component.

Method

Card.Compact

public Card Compact()

Renders the component in a compact form.

Method

Card.BackgroundColor

public Card BackgroundColor(string color)

Sets the background colour of the card.

Method

Card.Border

public Card Border(string color, UnitSize size = null)

Configures the component to border.

Method

Card.NoPadding

public Card NoPadding()

Removes / disables the padding on the component.

Method

Card.HoverColor

public Card HoverColor(bool enabled = true)

Enables or disables the hover colour overlay on the card.

Method

Card.AI

public Card AI(bool value = true)

Marks the card as AI output: a purple-to-blue tint over whatever background it had, an accent border, and a soft shadow in the same hue. The tint is deliberately light - a card is a large surface, and the point is to say where the content came from, not to colour the page. The class goes on the card's outer container, because which element paints the background depends on whether the card has a header or a footer - see tss.ai.css.

Method

Card.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Card

Description

Samples

Basic Card

Card with Header

Card with Header and Footer

Compact Card

Hover Card

Custom Background

API reference

Card

Constructors

Card

Properties

Card.IsCompact

Card.Background

Methods

Card.EnsureLayout

Card.OnClick

OnClick(ComponentEventHandler<Card, MouseEvent>, bool)

Parameters

OnClick(Action)

Parameters

Card.SetTitle

SetTitle(string, UIcons?, string, UIconsWeight)

Parameters

SetTitle(IComponent)

Parameters

Card.SetContent

Card.SetFooter

Card.Compact

Card.BackgroundColor

Card.Border

Card.NoPadding

Card.HoverColor

Card.AI

Card.Render

See also