@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="16:9 Ratio" Code="@_codeAspectRatio">
    <Container MaxWidth="sm" Center="false">
        <AspectRatio Ratio="16.0/9.0" Class="rounded-md overflow-hidden bg-muted">
            <Flex Align="center" Justify="center" Class="h-full w-full">
                <Lumeo.Text Size="sm" Color="muted">16 / 9</Lumeo.Text>
            </Flex>
        </AspectRatio>
    </Container>
</PatternCard>
</Stack>

@code {
    private string _codeAspectRatio = @"<AspectRatio Ratio=""16.0/9.0"" Class=""rounded-md overflow-hidden bg-muted"">
    <div class=""flex h-full w-full items-center justify-center text-sm text-muted-foreground"">
        16 / 9
    </div>
</AspectRatio>";
}
