Tesserae

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

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

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

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

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

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

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);
        }
    }
}