Patterns

Common patterns for building interfaces.

Container (max-w-screen-xl)

Code

<Container class="bg-white">content</Container>

Container FullWidth (max-w-full)

Code

 <Container class="bg-white" isFullWidth>content</Container>

Header

Code

<Header>
    <div slot="logo" class="flex-shrink-0 flex items-center h-8">
            <div class="bg-gray">LOGO</div>
        </div>
    <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
</Header>