---
layout: docs
title: Group
description: null
---

## Example

A generic `.group` class to provide spacing between like items. Can be used for `<nav>` or `<div>` wrapping and `<ul><li></li></ul>` structure.

<div class="group text-align-center">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-light">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Group Center

<div class="group group-m group-center text-align-center">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group group-m group-center">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Group Column

<div class="group group-m group-column">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group group-m group-column">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Group Nowrap

<div class="group group-m group-nowrap overflow-x-scroll">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">4</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">5</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">6</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">7</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">8</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">9</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">10</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group group-m group-nowrap">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Group Space Between

<div class="group group-m group-space-between text-align-center">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group group-m group-space-between">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Group Space Around

<div class="group group-m group-space-around text-align-center">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group group-m group-space-around">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Group Space Evenly

<div class="group group-m group-space-evenly text-align-center">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group group-m group-space-evenly">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Group Stretch

<div class="group group-m group-stretch text-align-center">
  <ul>
    <li class="background-primary color-white">1</li>
    <li class="background-light">2</li>
    <li class="background-primary color-white">3</li>
  </ul>
</div>

### HTML

```html
<div class="group group-m group-stretch">
  <ul>
    <li>...</li>
  </ul>
</div>
```

## Sizes

### Group XXL

<div class="group group-xxl">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### Group XL

<div class="group group-xl">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### Group L

<div class="group group-l">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### Group M

<div class="group group-m">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### Group S

<div class="group group-s">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### Group XS

<div class="group group-xs">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### Group XXS

<div class="group group-xxs">
  <ul>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">1</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">2</div>
    </li>
    <li>
      <div class="padding-xxs line-height-1 background-primary color-white">3</div>
    </li>
  </ul>
</div>

### HTML

```html
<div class="group group-xxl">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-xl">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-l">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-m">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-s">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-xs">
  <ul>
    <li>...</li>
  </ul>
</div>

<div class="group group-xxs">
  <ul>
    <li>...</li>
  </ul>
</div>
```

### CSS

```scss
--group-xxl-space: 0.875rem;
--group-xl-space: 0.75rem;
--group-l-space: 0.625rem;
--group-m-space: 0.5rem;
--group-s-space: 0.375rem;
--group-xs-space: 0.25rem;
--group-xxs-space: 0.125rem;
```