Hero with Image

A split hero with text on one side and image placeholder on the other.

Button

Preview

Ship faster with ready-made components

Stop reinventing the wheel. Use our professionally designed components to build your next Blazor application in record time.

Code

<div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <div class="space-y-6">
        <BbTypographyH1 class="text-4xl sm:text-5xl font-bold tracking-tight">
            Ship faster with ready-made components
        </BbTypographyH1>
        <BbTypographyLead class="text-muted-foreground">
            Stop reinventing the wheel. Use our professionally designed components to build your next Blazor application in record time.
        </BbTypographyLead>
        <div class="flex flex-col sm:flex-row gap-4">
            <BbButton Size="ButtonSize.Large">
                Start Building
                <!-- icon SVG -->
            </BbButton>
            <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Large">
                Learn More
            </BbButton>
        </div>
    </div>
    <div class="bg-muted rounded-xl aspect-video flex items-center justify-center">
        <!-- icon SVG -->
    </div>
</div>