<commit_before>---
layout: docs
title: Group
description: ""
---

## About

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

### HTML

```html
<div class="group">
  <ul>
    <li>...</li>
    <li>...</li>
    <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;
--container-xxs: 100%;<commit_msg>Group sizes documentation<commit_after>---
layout: docs
title: Group
description: ""
---

## About

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

<div class="group">
  <ul>
    <li>
      <div class="space space-m background-primary"></div>
    </li>
    <li>
      <div class="space space-m background-light"></div>
    </li>
    <li>
      <div class="space space-m background-primary"></div>
    </li>
  </ul>
</div>

### HTML

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

## Sizes

### Group XXL

<div class="group group-xxl">
  <ul>
    <li>
      <div class="space space-xxl background-primary"></div>
    </li>
    <li>
      <div class="space space-xxl background-primary"></div>
    </li>
    <li>
      <div class="space space-xxl background-primary"></div>
    </li>
  </ul>
</div>

### Group XL

<div class="group group-xl">
  <ul>
    <li>
      <div class="space space-xl background-primary"></div>
    </li>
    <li>
      <div class="space space-xl background-primary"></div>
    </li>
    <li>
      <div class="space space-xl background-primary"></div>
    </li>
  </ul>
</div>

### Group L

<div class="group group-l">
  <ul>
    <li>
      <div class="space space-l background-primary"></div>
    </li>
    <li>
      <div class="space space-l background-primary"></div>
    </li>
    <li>
      <div class="space space-l background-primary"></div>
    </li>
  </ul>
</div>

### Group M

<div class="group group-m">
  <ul>
    <li>
      <div class="space space-m background-primary"></div>
    </li>
    <li>
      <div class="space space-m background-primary"></div>
    </li>
    <li>
      <div class="space space-m background-primary"></div>
    </li>
  </ul>
</div>

### Group S

<div class="group group-s">
  <ul>
    <li>
      <div class="space space-s background-primary"></div>
    </li>
    <li>
      <div class="space space-s background-primary"></div>
    </li>
    <li>
      <div class="space space-s background-primary"></div>
    </li>
  </ul>
</div>

### Group XS

<div class="group group-xs">
  <ul>
    <li>
      <div class="space space-xs background-primary"></div>
    </li>
    <li>
      <div class="space space-xs background-primary"></div>
    </li>
    <li>
      <div class="space space-xs background-primary"></div>
    </li>
  </ul>
</div>

### Group XXS

<div class="group group-xxs">
  <ul>
    <li>
      <div class="space space-xxs background-primary"></div>
    </li>
    <li>
      <div class="space space-xxs background-primary"></div>
    </li>
    <li>
      <div class="space space-xxs background-primary"></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;
{'fraction_non_alphanumeric': 0.23382716049382715, 'fraction_numerical': 0.012592592592592593, 'mean_word_length': 2.453537936913896, 'pattern_counts': {'":': 0, '<': 205, '<?xml version=': 0, '>': 205, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '872369', 'n_tokens_mistral': 1640, 'n_tokens_neox': 1594, 'n_words': 368}