Components

Brand

The product's mark and name, linking home, at the head of a header or a sidebar. The mark is an image's address or anything you draw.

Drawn and behaving as Flux UI's brand does, measured against its live docs.

Brand

An image and a name, one link.

BrandExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BrandExample : Component
{
    protected override Component? Render() =>
        Ui.Brand.Href("#").Logo("/img/rask-mark.svg").Name("Acme Inc.");
}

Live result

Acme Inc.

Logo slot

A mark you draw, in a box LogoClass dresses: here an icon on a cyan circle.

BrandLogoSlotExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BrandLogoSlotExample : Component
{
    protected override Component? Render() =>
        Ui.Brand.Href("#").Name("Launchpad")
            .Logo(Ui.Icon.Name(Ui.IconName.RocketLaunch).Micro)
            .LogoClass("rounded-full bg-cyan-500 text-white");
}

Live result

Launchpad

Logo only

No Name: the mark alone, and Alt says what it is.

BrandLogoOnlyExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BrandLogoOnlyExample : Component
{
    protected override Component? Render() =>
        Ui.Brand.Href("#").Logo("/img/rask-mark.svg").Alt("Acme Inc.");
}

Live result

In a header

At the start of a header, before a navbar and a profile.

BrandHeaderExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BrandHeaderExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex min-h-14 items-center rounded-lg border border-zinc-100 bg-zinc-50 px-4 dark:border-white/5 dark:bg-zinc-800")[
            Ui.Brand.Href("#").Name("Acme Inc.")
                .Logo(I.Class("font-serif font-bold")["A"])
                .LogoClass("bg-zinc-800 text-white dark:bg-white dark:text-zinc-800"),
            Ui.Navbar.Class("max-sm:hidden")[
                Ui.NavbarItem.Key("home").Href("#").Current(true)["Home"],
                Ui.NavbarItem.Key("inbox").Href("#").Badge("12")["Inbox"]
            ],
            Div.Class("flex-1"),
            Ui.Profile.Circle().Chevron(false).Avatar("/img/avatars/amber.svg")
        ];
}

Live result

Acme Inc.

Behaviour

An image, or a mark of your own

Logo takes either: .Logo("/logo.png") draws the image, and .Logo(Ui.Icon.Name(Ui.IconName.RocketLaunch).Micro) draws what it is handed, in a box LogoClass dresses with a fill, an ink and a shape. That is Flux's logo prop and its logo slot in one step. An image's Alt is empty unless set, because the name beside it already says it; a brand with no Name should say it with Alt.

It goes home

Href is / when unset. Like every kit component that goes somewhere, a generated route navigates inside the app under its path base, and a string is an ordinary link written as given.

The space after it

A kit component brings no outer margin, with this exception, part of the brand's shape rather than its placement: it carries me-4, the gap Flux puts between a brand and the navbar after it. In a sidebar the brand is Ui.SidebarBrand, a part of the sidebar layout, which also takes a LogoDark.

Reference

`Ui.Brand`

flux:brand

The product's mark and name, one link home.

Step	Takes	What it does
`.Name(…)`	`string`	The product's name, beside the mark. Leave it out for the mark alone.
`.Logo(…)`	an image's address, or a component	The mark: a string is an image's address, anything else is drawn as it is.
`.Alt(…)`	`string`	The image's alternative text. Empty when unset: the name beside it says it.
`.Href(…)`	a route, or a URL string	Where it goes. Home (/) when unset.
`.LogoClass(…)`	`string`	Classes for the box around a drawn mark: its fill, its ink, its shape.