Skip to main contentSkip to site searchSkip to component search
Honeycomb

Group

The group is a generic flex-box container used to manage its direct children with modifiers that customize orientation, alignment, justification, gap, and wrapping behavior.

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

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

Group vs Grid

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

Use flix-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 that are similar to this but with special features depending on the context they are used:

  • button-group - Has responsive behavior for buttons working out of the box
  • tag-group - Has special styles for two-shaped tags

Modifiers

flix-group--vertical
Changes the group orientation from horizontal (default) to vertical.
flix-group--wrap
Allows items inside the group to wrap to the next line if there is not enough space.
flix-group--align-center
flix-group--align-end
flix-group--align-baseline
flix-group--align-stretch
Aligns items on the cross axis of the group (align-items rule).
flix-group--justify-center
flix-group--justify-end
flix-group--justify-between
flix-group--justify-around
flix-group--justify-evenly
Justifies items on the main axis of the group (justify-content rule).
flix-group--gap-0
flix-group--gap-1
flix-group--gap-3
flix-group--gap-4
Changes the gap between direct children. Default gap is spacing-2.

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;
<div class="flix-group">
  <a href="#" class="flix-img-box">
    <div class="flix-img-box__img-wrapper">
      <img src="https://styleguide.hive.flix.tech/img/img-placeholder-grey.png" alt="Placeholder" class="flix-img-box__img">
    </div>
    <div class="flix-img-box__content">
      <h3 class="flix-h3 flix-h3--section-header">Image box</h3>
      <p class="flix-text">Placeholder text for the image box content.</p>
    </div>
  </a>
  <a href="#" class="flix-img-box">
    <div class="flix-img-box__img-wrapper">
      <img src="https://styleguide.hive.flix.tech/img/img-placeholder-grey.png" alt="Placeholder" class="flix-img-box__img">
    </div>
    <div class="flix-img-box__content">
      <h3 class="flix-h3 flix-h3--section-header">Image box</h3>
      <p class="flix-text">Placeholder text for the image box content.</p>
    </div>
  </a>
  <a href="#" class="flix-img-box">
    <div class="flix-img-box__img-wrapper">
      <img src="https://styleguide.hive.flix.tech/img/img-placeholder-grey.png" alt="Placeholder" class="flix-img-box__img">
    </div>
    <div class="flix-img-box__content">
      <h3 class="flix-h3 flix-h3--section-header">Image box</h3>
      <p class="flix-text">Placeholder text for the image box content.</p>
    </div>
  </a>
</div>

Vertical orientation

Use the --vertical modifier to stack items top-to-bottom.

Item 1
Item 2
Item 3
<div class="flix-group flix-group--vertical">
	<div class="flix-box flix-box--small">Item 1</div>
	<div class="flix-box flix-box--small">Item 2</div>
	<div class="flix-box flix-box--small">Item 3</div>
</div>

Align options

The --align-{center|end|baseline|stretch} modifiers control how items are positioned on the cross axis (align-items).

Item 1
Item 2
Item 3 
<div class="flix-group flix-group--align-center">
  <div class="flix-box flix-box--small" style="padding-block: 10px">
    Item 1
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 20px">
    Item 2
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 30px">
    Item 3
  </div>
</div>
Item 1
Item 2
Item 3 
<div class="flix-group flix-group--align-end">
  <div class="flix-box flix-box--small" style="padding-block: 10px">
    Item 1
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 20px">
    Item 2
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 30px">
    Item 3
  </div>
</div>
Item 1
Item 2
Item 3 
<div class="flix-group flix-group--align-baseline">
  <div class="flix-box flix-box--small" style="padding-block: 10px">
    Item 1
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 20px">
    Item 2
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 30px">
    Item 3
  </div>
</div>
Item 1
Item 2
Item 3 
<div class="flix-group flix-group--align-stretch">
  <div class="flix-box flix-box--small" style="padding-block: 10px">
    Item 1
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 20px">
    Item 2
  </div>
  <div class="flix-box flix-box--small" style="padding-block: 30px">
    Item 3
  </div>
</div>

Justify options

The --justify-{center|end|between|around|evenly} modifiers control how items are distributed on the main axis (justify-content).

Item 1
Item 2
Item 3 
<div class="flix-group flix-group--justify-center">
  <div class="flix-box flix-box--small" >
    Item 1
  </div>
  <div class="flix-box flix-box--small" >
    Item 2
  </div>
  <div class="flix-box flix-box--small" >
    Item 3
  </div>
</div>
Item 1
Item 2
Item 3 
<div class="flix-group flix-group--justify-end">
  <div class="flix-box flix-box--small" >
    Item 1
  </div>
  <div class="flix-box flix-box--small" >
    Item 2
  </div>
  <div class="flix-box flix-box--small" >
    Item 3
  </div>
</div>
Item 1
Item 2
Item 3 
<div class="flix-group flix-group--justify-between">
  <div class="flix-box flix-box--small" >
    Item 1
  </div>
  <div class="flix-box flix-box--small" >
    Item 2
  </div>
  <div class="flix-box flix-box--small" >
    Item 3
  </div>
</div>
Item 1
Item 2
Item 3 
<div class="flix-group flix-group--justify-around">
  <div class="flix-box flix-box--small" >
    Item 1
  </div>
  <div class="flix-box flix-box--small" >
    Item 2
  </div>
  <div class="flix-box flix-box--small" >
    Item 3
  </div>
</div>
Item 1
Item 2
Item 3 
<div class="flix-group flix-group--justify-evenly">
  <div class="flix-box flix-box--small" >
    Item 1
  </div>
  <div class="flix-box flix-box--small" >
    Item 2
  </div>
  <div class="flix-box flix-box--small" >
    Item 3
  </div>
</div>

Gap options

You can control spacing between direct children by using one of the available gap modifiers.

Item 1
Item 2
Item 3
<div class="flix-group flix-group--gap-0">
	<div class="flix-box flix-box--small">Item 1</div>
	<div class="flix-box flix-box--small">Item 2</div>
	<div class="flix-box flix-box--small">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="flix-group flix-group--gap-1">
	<div class="flix-box flix-box--small">Item 1</div>
	<div class="flix-box flix-box--small">Item 2</div>
	<div class="flix-box flix-box--small">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="flix-group flix-group--gap-3">
	<div class="flix-box flix-box--small">Item 1</div>
	<div class="flix-box flix-box--small">Item 2</div>
	<div class="flix-box flix-box--small">Item 3</div>
</div>
Item 1
Item 2
Item 3
<div class="flix-group flix-group--gap-4">
	<div class="flix-box flix-box--small">Item 1</div>
	<div class="flix-box flix-box--small">Item 2</div>
	<div class="flix-box flix-box--small">Item 3</div>
</div>

This real life example uses gap-1 and is applied on a list element with flix-reset-list helper.

Flix on:

<h4 class="flix-h4">Flix on:</h4>
<ul class="flix-group flix-group--gap-1 flix-reset-list">
  <li><flix-icon name="facebook" size="5" title="Facebook"></flix-icon></li>
  <li><flix-icon name="insta" size="5" title="Instagram"></flix-icon></li>
  <li><flix-icon name="youtube" size="5" title="YouTube"></flix-icon></li>
  <li><flix-icon name="linkedin" size="5" title="LinkedIn"></flix-icon></li>
  <li><flix-icon name="x" size="5" title="X"></flix-icon></li>
  <li><flix-icon name="tik-tok" size="5" title="TikTok"></flix-icon></li>
</ul>

Wrap items

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
<div class="flix-group flix-group--wrap">
	<div class="flix-box flix-box--small">Item 1</div>
	<div class="flix-box flix-box--small">Item 2</div>
	<div class="flix-box flix-box--small">Item 3</div>
	<div class="flix-box flix-box--small">Item 4</div>
	<div class="flix-box flix-box--small">Item 5</div>
	<div class="flix-box flix-box--small">Item 6</div>
	<div class="flix-box flix-box--small">Item 7</div>
	<div class="flix-box flix-box--small">Item 8</div>
	<div class="flix-box flix-box--small">Item 9</div>
	<div class="flix-box flix-box--small">Item 10</div>
  <div class="flix-box flix-box--small">Item 11</div>
	<div class="flix-box flix-box--small">Item 12</div>
	<div class="flix-box flix-box--small">Item 13</div>
	<div class="flix-box flix-box--small">Item 14</div>
	<div class="flix-box flix-box--small">Item 15</div>
</div>

Groups within groups

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

Connecting you to the world

Endless possibilities. Discover over 8,000 destinations across more than 40 countries.

Comfort on the go

Kick back with free Wi-Fi, power outlets, and extra leg space. That's what modern buses are all about.

Choose, book, travel

From your screen to your seat in seconds. You do the booking, we'll take care of the rest.

Go together

Why adding another car on the road when you can choose collective travel instead?

<div class="flix-box flix-box--dimmed" >
  <div class="flix-group flix-group--gap-4">
    <div class="flix-group flix-group--vertical flix-group--align-center flix-has-text-centered">
      <flix-icon color="secondary" name="location" size="6" aria-hidden="true"></flix-icon>
      <div>
        <h4 class="flix-h4 flix-h4--space-flush">Connecting you to the world</h4>
        <p class="flix-text flix-text--small">Endless possibilities. Discover over 8,000 destinations across more than 40 countries.</p>
      </div>
    </div>
    <div class="flix-group flix-group--vertical flix-group--align-center flix-has-text-centered">
      <flix-icon color="secondary" name="bus" size="6" aria-hidden="true"></flix-icon>
      <div>
        <h4 class="flix-h4 flix-h4--space-flush">Comfort on the go</h4>
        <p class="flix-text flix-text--small">Kick back with free Wi-Fi, power outlets, and extra leg space. That's what modern buses are all about.</p>
      </div>
    </div>
    <div class="flix-group flix-group--vertical flix-group--align-center flix-has-text-centered">
      <flix-icon color="secondary" name="location" size="6" aria-hidden="true"></flix-icon>
      <div>
        <h4 class="flix-h4 flix-h4--space-flush">Choose, book, travel</h4>
        <p class="flix-text flix-text--small">From your screen to your seat in seconds. You do the booking, we'll take care of the rest.</p>
      </div>
    </div>
    <div class="flix-group flix-group--vertical flix-group--align-center flix-has-text-centered">
      <flix-icon color="secondary" name="location" size="6" aria-hidden="true"></flix-icon>
      <div>
        <h4 class="flix-h4 flix-h4--space-flush">Go together</h4>
        <p class="flix-text flix-text--small">Why adding another car on the road when you can choose collective travel instead?</p>
      </div>
    </div>
  </div>
</div>

Group item helpers

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

  • flix-group-item--flex-1
  • flix-group-item--no-shrink
  • flix-group-item--align-self-{start|center|end|baseline|stretch}

See the group item helper documentation for full examples.

Related Components