group

Group vs Grid•
Special groups•
Default group•
Vertical orientation•
Align options•
Justify options•
Gap options•
Wrap items•
Groups within groups•
Group item helpers

Props

Prop name	Type	Default	Description
`Elem`	`ElementType<any> \| undefined`	`div`	The HTML element to use for the group (e.g., 'div', 'section', 'article').
`children`	`ReactNode`		The content of the group.
`extraClasses`	`string \| undefined`		Additional CSS classes to apply to the group.
`innerRef`	`Ref<HTMLDivElement> \| undefined`		React ref to the underlying HTML element.
`orientation`	`"horizontal" \| "vertical" \| undefined`	`horizontal`	Orientation of the group.
`wrap`	`boolean \| undefined`	`false`	Whether the group items should wrap onto multiple lines if necessary.
`align`	`"center" \| "start" \| "end" \| "baseline" \| "stretch" \| undefined`	`start`	Alignment of items along the cross axis.
`justify`	`"center" \| "start" \| "end" \| "between" \| "around" \| "evenly" \| undefined`	`start`	Justification of items along the main axis.
`gap`	`0 \| 2 \| 1 \| 3 \| 4 \| undefined`	`2`	Gap size between items.

You can use the Group as a generic flex-box layout container for direct children.

It is useful when you want to manage spacing and distribution of sibling elements in one place, with props that control orientation, alignment, justification, gap, and wrapping behavior.

Group vs Grid

Use Group when you need a generic flex-box container to align and distribute direct children mostly in one dimension (row or column).

Use Grid when you need page or area layout based on a fixed 12-column structure, where components are positioned and sized according to column spans and breakpoints.

Special groups

There are two more specialized group components with extra behavior for specific contexts:

ButtonGroup: Has responsive behavior for buttons working out of the box
TagGroup: Has special styles for combined tags

Default group

The default behavior of a group is:

Horizontal layout;
Items aligned and justified at the start;
A gap of spacing-2 between direct children;
No wrapping;

import { Group, ImageBox } from '@flixbus/honeycomb-react';

<Group>
  <ImageBox
    title="Image box title"
    text="Placeholder text for the image box content."
    href="/#"
    img={{
      src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
      alt: 'Placeholder',
    }}
  />
  <ImageBox
    title="Image box title"
    text="Placeholder text for the image box content."
    href="/#"
    img={{
      src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
      alt: 'Placeholder',
    }}
  />
  <ImageBox
    title="Image box title"
    text="Placeholder text for the image box content."
    href="/#"
    img={{
      src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
      alt: 'Placeholder',
    }}
  />
</Group>
import { Group, ImageBox } from '@flixbus/honeycomb-react';

<Group>
  <ImageBox
    title="Image box title"
    text="Placeholder text for the image box content."
    href="/#"
    img={{
      src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
      alt: 'Placeholder',
    }}
  />
  <ImageBox
    title="Image box title"
    text="Placeholder text for the image box content."
    href="/#"
    img={{
      src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
      alt: 'Placeholder',
    }}
  />
  <ImageBox
    title="Image box title"
    text="Placeholder text for the image box content."
    href="/#"
    img={{
      src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
      alt: 'Placeholder',
    }}
  />
</Group>

Vertical orientation

Use orientation="vertical" to stack items top-to-bottom.

import { Group, Box } from '@flixbus/honeycomb-react';

<Group orientation="vertical">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>
import { Group, Box } from '@flixbus/honeycomb-react';

<Group orientation="vertical">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>

Align options

The align prop controls how items are positioned on the cross axis (align-items).

import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

<Group align="center">
  <Box small extraClasses={groupItemHelpers().flex1}>Gengar is a Ghost/Poison Pokemon.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Lapras is a Water/Ice Pokemon that ferries people across water and is known for its gentle nature.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Magikarp looks underwhelming at first, but its evolution into Gyarados is one of the most dramatic power jumps in Pokemon, turning a splashy underdog into a fierce Water/Flying threat that many players remember from their first journey.</Box>
</Group>
import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

<Group align="center">
  <Box small extraClasses={groupItemHelpers().flex1}>Gengar is a Ghost/Poison Pokemon.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Lapras is a Water/Ice Pokemon that ferries people across water and is known for its gentle nature.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Magikarp looks underwhelming at first, but its evolution into Gyarados is one of the most dramatic power jumps in Pokemon, turning a splashy underdog into a fierce Water/Flying threat that many players remember from their first journey.</Box>
</Group>

import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

<Group align="end">
  <Box small extraClasses={groupItemHelpers().flex1}>Gengar is a Ghost/Poison Pokemon.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Lapras is a Water/Ice Pokemon that ferries people across water and is known for its gentle nature.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Magikarp looks underwhelming at first, but its evolution into Gyarados is one of the most dramatic power jumps in Pokemon, turning a splashy underdog into a fierce Water/Flying threat that many players remember from their first journey.</Box>
</Group>
import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

<Group align="end">
  <Box small extraClasses={groupItemHelpers().flex1}>Gengar is a Ghost/Poison Pokemon.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Lapras is a Water/Ice Pokemon that ferries people across water and is known for its gentle nature.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Magikarp looks underwhelming at first, but its evolution into Gyarados is one of the most dramatic power jumps in Pokemon, turning a splashy underdog into a fierce Water/Flying threat that many players remember from their first journey.</Box>
</Group>

import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

<Group align="stretch">
  <Box small extraClasses={groupItemHelpers().flex1}>Gengar is a Ghost/Poison Pokemon.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Lapras is a Water/Ice Pokemon that ferries people across water and is known for its gentle nature.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Magikarp looks underwhelming at first, but its evolution into Gyarados is one of the most dramatic power jumps in Pokemon, turning a splashy underdog into a fierce Water/Flying threat that many players remember from their first journey.</Box>
</Group>
import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

<Group align="stretch">
  <Box small extraClasses={groupItemHelpers().flex1}>Gengar is a Ghost/Poison Pokemon.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Lapras is a Water/Ice Pokemon that ferries people across water and is known for its gentle nature.</Box>
  <Box small extraClasses={groupItemHelpers().flex1}>Magikarp looks underwhelming at first, but its evolution into Gyarados is one of the most dramatic power jumps in Pokemon, turning a splashy underdog into a fierce Water/Flying threat that many players remember from their first journey.</Box>
</Group>

Justify options

The justify prop controls how items are distributed on the main axis (justify-content).

import { Group, Box } from '@flixbus/honeycomb-react';

<Group justify="center">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>
import { Group, Box } from '@flixbus/honeycomb-react';

<Group justify="center">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>

import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="end">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>
import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="end">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>

import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="between">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>
import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="between">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>

import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="around">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>
import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="around">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>

import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="evenly">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>
import { Group, Box } from '@flixbus/honeycomb-react';
<Group justify="evenly">
  <Box small>Item 1</Box>
  <Box small>Item 2</Box>
  <Box small>Item 3</Box>
</Group>

Gap options

You can control spacing between direct children with the gap prop.

This real life example uses gap={1} and applies the reset list helper class on a list element.

import { Group, Heading, resetHelpers } from '@flixbus/honeycomb-react';
import { Icon, IconFacebook, IconInsta, IconYoutube, IconLinkedin, IconX, IconTikTok } from '@flixbus/honeycomb-icons-react';

<>
  <Heading size={4}>Flix on:</Heading>
  <Group Elem="ul" gap={1} extraClasses={resetHelpers().list}>
    <li><Icon InlineIcon={IconFacebook} size="5" title="Facebook" /></li>
    <li><Icon InlineIcon={IconInsta} size="5" title="Instagram" /></li>
    <li><Icon InlineIcon={IconYoutube} size="5" title="YouTube" /></li>
    <li><Icon InlineIcon={IconLinkedin} size="5" title="LinkedIn" /></li>
    <li><Icon InlineIcon={IconX} size="5" title="X" /></li>
    <li><Icon InlineIcon={IconTikTok} size="5" title="TikTok" /></li>
  </Group>
</>
import { Group, Heading, resetHelpers } from '@flixbus/honeycomb-react';
import { Icon, IconFacebook, IconInsta, IconYoutube, IconLinkedin, IconX, IconTikTok } from '@flixbus/honeycomb-icons-react';

<>
  <Heading size={4}>Flix on:</Heading>
  <Group Elem="ul" gap={1} extraClasses={resetHelpers().list}>
    <li><Icon InlineIcon={IconFacebook} size="5" title="Facebook" /></li>
    <li><Icon InlineIcon={IconInsta} size="5" title="Instagram" /></li>
    <li><Icon InlineIcon={IconYoutube} size="5" title="YouTube" /></li>
    <li><Icon InlineIcon={IconLinkedin} size="5" title="LinkedIn" /></li>
    <li><Icon InlineIcon={IconX} size="5" title="X" /></li>
    <li><Icon InlineIcon={IconTikTok} size="5" title="TikTok" /></li>
  </Group>
</>

Wrap items

By default, group items do not wrap. Use the wrap prop if items should flow to the next line when there is not enough horizontal space.

import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

const FlexyBox = ({children}) => <Box extraClasses={groupItemHelpers().flex1}>{children}</Box>;

<Group wrap>
  <FlexyBox>Lorem ipsum dolor sit amet</FlexyBox>
  <FlexyBox>Consectetur adipiscing elit</FlexyBox>
  <FlexyBox>Sed do eiusmod tempor incididunt</FlexyBox>
  <FlexyBox>Ut labore et dolore magna aliqua</FlexyBox>
  <FlexyBox>Ut enim ad minim veniam</FlexyBox>
  <FlexyBox>Quis nostrud exercitation ullamco</FlexyBox>
  <FlexyBox>Laboris nisi ut aliquip ex ea</FlexyBox>
  <FlexyBox>Commodo consequat duis aute irure</FlexyBox>
  <FlexyBox>Dolor in reprehenderit in voluptate</FlexyBox>
  <FlexyBox>Velit esse cillum dolore eu fugiat</FlexyBox>
</Group>
import { Group, Box, groupItemHelpers } from '@flixbus/honeycomb-react';

const FlexyBox = ({children}) => <Box extraClasses={groupItemHelpers().flex1}>{children}</Box>;

<Group wrap>
  <FlexyBox>Lorem ipsum dolor sit amet</FlexyBox>
  <FlexyBox>Consectetur adipiscing elit</FlexyBox>
  <FlexyBox>Sed do eiusmod tempor incididunt</FlexyBox>
  <FlexyBox>Ut labore et dolore magna aliqua</FlexyBox>
  <FlexyBox>Ut enim ad minim veniam</FlexyBox>
  <FlexyBox>Quis nostrud exercitation ullamco</FlexyBox>
  <FlexyBox>Laboris nisi ut aliquip ex ea</FlexyBox>
  <FlexyBox>Commodo consequat duis aute irure</FlexyBox>
  <FlexyBox>Dolor in reprehenderit in voluptate</FlexyBox>
  <FlexyBox>Velit esse cillum dolore eu fugiat</FlexyBox>
</Group>

Groups within groups

It is possible to mix and match groups to easily create entire sections of the page:

import { Group, Box, Heading, Text } from '@flixbus/honeycomb-react';
import { Icon, IconLocation, IconBus, IconDesktopPhone, IconGroup } from '@flixbus/honeycomb-icons-react';

<Box appearance="dimmed">
  <Group gap={4}>
    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconLocation} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Connecting you to the world</Heading>
        <Text small>
          Endless possibilities. Discover over 8,000 destinations across more than 40 countries.
        </Text>
      </div>
    </Group>

    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconBus} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Comfort on the go</Heading>
        <Text small>
          Kick back with free Wi-Fi, power outlets, and extra leg space. That's what modern buses are all about.
        </Text>
      </div>
    </Group>

    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconDesktopPhone} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Choose, book, travel</Heading>
        <Text small>
          From your screen to your seat in seconds. You do the booking, we'll take care of the rest.
        </Text>
      </div>
    </Group>

    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconGroup} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Go together</Heading>
        <Text small>
          Why adding another car on the road when you can choose collective travel instead?
        </Text>
      </div>
    </Group>
  </Group>
</Box>
import { Group, Box, Heading, Text } from '@flixbus/honeycomb-react';
import { Icon, IconLocation, IconBus, IconDesktopPhone, IconGroup } from '@flixbus/honeycomb-icons-react';

<Box appearance="dimmed">
  <Group gap={4}>
    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconLocation} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Connecting you to the world</Heading>
        <Text small>
          Endless possibilities. Discover over 8,000 destinations across more than 40 countries.
        </Text>
      </div>
    </Group>

    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconBus} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Comfort on the go</Heading>
        <Text small>
          Kick back with free Wi-Fi, power outlets, and extra leg space. That's what modern buses are all about.
        </Text>
      </div>
    </Group>

    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconDesktopPhone} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Choose, book, travel</Heading>
        <Text small>
          From your screen to your seat in seconds. You do the booking, we'll take care of the rest.
        </Text>
      </div>
    </Group>

    <Group orientation="vertical" align="center" extraClasses="flix-has-text-centered">
      <Icon appearance="secondary" InlineIcon={IconGroup} size="6" aria-hidden="true" />
      <div>
        <Heading size={4} flushSpace>Go together</Heading>
        <Text small>
          Why adding another car on the road when you can choose collective travel instead?
        </Text>
      </div>
    </Group>
  </Group>
</Box>

Group item helpers

When one child needs behavior different from the rest of the group, use group item helper classes.