Layout
Centric Layout
A utility layout class for centering and constraining content horizontally across all pages, ensuring a consistent, responsive experience.Usage
Apply the.centric-layout class to a wrapping element to center its children, set a maximum width, and apply responsive side paddings.Your brand
Contact details
+44 XXX XXX XXXX
hello@company-name.com
Location details
#201, Baker Street, London
Yen, ¥
Business hours
Today - 8:00 AM - 5:00 PM (CDT)
<Stack className="centric-layout items-stretch">
<Stack className="flex flex-col gap-4 items-stretch">
<Track
railStart={<SetmoreIcon />}
className="py-4 border-b border-secondary gap-1"
>
<Heading as="h2" className="text-heading-16">
Your brand
</Heading>
</Track>
<Box>
<Heading as="h3" className="text-heading-14">
Company Name
</Heading>
<Text className="text-body-12 text-secondary">Business services</Text>
<TextLink className="text-body-12 mt-2" href="#">
https://company-name.setmore.com
</TextLink>
</Box>
<Box>
<Heading as="h4" className="text-heading-12 mb-2">
Contact details
</Heading>
<Track className="gap-2 mb-1" railStart={<PhoneIcon size="16" />}>
<Text className="text-body-12">+44 XXX XXX XXXX</Text>
</Track>
<Track className="gap-2" railStart={<MailIcon size="16" />}>
<Text className="text-body-12">hello@company-name.com</Text>
</Track>
</Box>
<Box>
<Heading as="h4" className="text-heading-12 mb-2">
Location details
</Heading>
<Track className="gap-2 mb-1" railStart={<LocationIcon size="16" />}>
<Text className="text-body-12"> #201, Baker Street, London</Text>
</Track>
<Track className="gap-2" railStart={<MoneyIcon size="16" />}>
<Text className="text-body-12">Yen, ¥</Text>
</Track>
</Box>
<Box>
<Heading as="h4" className="text-heading-12 mb-2">
Business hours
</Heading>
<Track className="gap-2 mb-1" railStart={<ClockIcon size="16" />}>
<Text className="text-body-12">Today - 8:00 AM - 5:00 PM (CDT)</Text>
</Track>
</Box>
</Stack>
</Stack>