Middle align horizontal stack

[jhanley87]

Hey all using the in horizontal to layout a name with Avatar, is there an easy way to align both to the middle? at the moment it looks like its aligning to the top.

code I am using at the moment

<Stack orientation={"horizontal"} spacing={"space30"}>
              <Avatar
                name="customer avatar"
                size={"sizeIcon110"}
                src="https://ui-avatars.com/api/?name=John+Doe"
              ></Avatar>
              <Heading
                variant="heading10"
                as="h1"
              >John Doe</Heading>
</Stack>

[SiTaggart]

Hey

Adding marginBottom="space0" to the heading component should do the trick for you.

Let us know.

[TheSisb]

You may also want to consider our Media Object component for this UI.

[jhanley87]

These both worked, thankyou... amazing :-)