Skip to main contentSkip to site searchSkip to component search
Honeycomb

group-item

The group item helpers allow you to customize how individual items from a flex group component (Group, ButtonGroup and TagGroup) behave.

These are intended to be used on outlying group items, and for fine tuning flex-box item properties.

More group item helpers may be added in the future.

Grow: flex1

This modifier makes the item grow to fill all available space to it. It translates to flex: 1 in CSS.

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

<Group>
  <Box small>
    Group item
  </Box>
  <Box small>
    Group item
  </Box>
  <Box appearance="success" small extraClasses={groupItemHelpers().flex1}>
    Your special group item
  </Box>
</Group>

Shrink: flex0

This modifier makes the item shrink as much as possible, depending on the content inside of it. It translates to flex: 0 in CSS.

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

<Group align="stretch">
  <Box small>
    A very long group item that will overpower the size of other group items if the group item does not shrink.
  </Box>
  <Box small>
    A very long group item that will overpower the size of other group items if the group item does not shrink.
  </Box>
  <Box appearance="success" small extraClasses={groupItemHelpers().flex0}>
    Your special group item
  </Box>
</Group>

No shrink: noShrink

When a group item is being squeezed by other chunky siblings it might be useful to tell it not to shrink. E.g.: to preserve the size of an image. It translates to flex-shrink: 0 in CSS.

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

<Group>
  <Box small>
    Group item box box box box box box box box box box box box box box box box box box box box box box box
  </Box>
  <Box small>
    Group item box box box box box box box box box box box box box box box box box box box box box box box
  </Box>
  <Box appearance="success" small extraClasses={groupItemHelpers().noShrink}>
    Your special group item
  </Box>
</Group>

Align self: alignSelf

  • alignSelfStart
  • alignSelfCenter
  • alignSelfEnd
  • alignSelfBaseline
  • alignSelfStretch

The align self modifiers allow you to change the alignment of an item in a group that has a different alignment.

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

<Group align="stretch">
  <Box small>
    Group item <br /> box <br /> box <br /> box
  </Box>
  <Box small>
    Group item <br /> box
  </Box>
  <Box appearance="success" small extraClasses={groupItemHelpers().alignSelfStart}>
    Your special group item
  </Box>
</Group>

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

<Group align="stretch">
  <Box small>
    Group item <br /> box <br /> box <br /> box
  </Box>
  <Box small>
    Group item <br /> box
  </Box>
  <Box appearance="success" small extraClasses={groupItemHelpers().alignSelfCenter}>
    Your special group item
  </Box>
</Group>

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

<Group align="stretch">
  <Box small>
    Group item <br /> box <br /> box <br /> box
  </Box>
  <Box small>
    Group item <br /> box
  </Box>
  <Box appearance="success" small extraClasses={groupItemHelpers().alignSelfEnd}>
    Your special group item
  </Box>
</Group>

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

<Group align="center">
  <Box small>
    Group item <br /> box <br /> box <br /> box
  </Box>
  <Box small>
    Group item <br /> box
  </Box>
  <Box appearance="success" small extraClasses={groupItemHelpers().alignSelfStretch}>
    Your special group item
  </Box>
</Group>