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.

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.
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.
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)	Sets the title of the component.
SetTitle(IComponent)	Sets the title of the component.

SetTitle(string)

public Card SetTitle(string title)

Sets the title of the component.

Parameters

title string

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.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Card

card-sample.cs

using H5.Core;
using Tesserae;
using static H5.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 H5.Core;
using Tesserae;
using static H5.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 H5.Core;
using Tesserae;
using static H5.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 H5.Core;
using Tesserae;
using static H5.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 H5.Core;
using Tesserae;
using static H5.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 H5.Core;
using Tesserae;
using static H5.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);
        }
    }
}

Card

Description

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)

Parameters

SetTitle(IComponent)

Parameters

Card.SetContent

Card.SetFooter

Card.Compact

Card.BackgroundColor

Card.Border

Card.NoPadding

Card.HoverColor

Card.Render

Samples

Basic Card

Card with Header

Card with Header and Footer

Compact Card

Hover Card

Custom Background

See also