Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

List

List

#
  1. ID
    Formateur
    Modifications
    Status
  2. 00337D-99
    example@site.com
    10/17/2022
    User
  3. 00337D-99
    example@site.com
    10/17/2022
    User
  4. 00337D-99
    example@site.com
    10/17/2022
    User
  5. 00337D-99
    example@site.com
    10/17/2022
    User
  6. 00337D-99
    example@site.com
    10/17/2022
    User
  7. 00337D-99
    example@site.com
    10/17/2022
    User 
<ol class="c-list">
    <div class="c-list__header">
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1">ID</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">Formateur</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">Modifications</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">Status</div>
                <div class="c-list__item--cell o-grid-col-bp3-3"></div>
            </div>
        </li>
    </div>
    <div class="c-list__body">
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
    </div>
</ol>
ol.c-list
    .c-list__header
        li.c-list__item.o-grid
            .mod-6.o-grid
                .c-list__item--cell.o-grid-col-bp3-1 ID
                .c-list__item--cell.o-grid-col-bp3-5 Formateur
            .mod-6.o-grid
                .c-list__item--cell.o-grid-col-bp3-2 Modifications
                .c-list__item--cell.o-grid-col-bp3-1 Status
                .c-list__item--cell.o-grid-col-bp3-3
    .c-list__body
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit

List pajamas

#
  1. ID
    Formateur
    Modifications
    Status
  2. 00337D-99
    example@site.com
    10/17/2022
    User
  3. 00337D-99
    example@site.com
    10/17/2022
    User
  4. 00337D-99
    example@site.com
    10/17/2022
    User
  5. 00337D-99
    example@site.com
    10/17/2022
    User
  6. 00337D-99
    example@site.com
    10/17/2022
    User
  7. 00337D-99
    example@site.com
    10/17/2022
    User 
<ol class="c-list c-list--pajamas">
    <div class="c-list__header">
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1">ID</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">Formateur</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">Modifications</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">Status</div>
                <div class="c-list__item--cell o-grid-col-bp3-3"></div>
            </div>
        </li>
    </div>
    <div class="c-list__body">
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
    </div>
</ol>
ol.c-list.c-list--pajamas
    .c-list__header
        li.c-list__item.o-grid
            .mod-6.o-grid
                .c-list__item--cell.o-grid-col-bp3-1 ID
                .c-list__item--cell.o-grid-col-bp3-5 Formateur
            .mod-6.o-grid
                .c-list__item--cell.o-grid-col-bp3-2 Modifications
                .c-list__item--cell.o-grid-col-bp3-1 Status
                .c-list__item--cell.o-grid-col-bp3-3
    .c-list__body
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit

List scattered

#
  1. ID
    Formateur
    Modifications
    Status
  2. 00337D-99
    example@site.com
    10/17/2022
    User
  3. 00337D-99
    example@site.com
    10/17/2022
    User
  4. 00337D-99
    example@site.com
    10/17/2022
    User
  5. 00337D-99
    example@site.com
    10/17/2022
    User
  6. 00337D-99
    example@site.com
    10/17/2022
    User
  7. 00337D-99
    example@site.com
    10/17/2022
    User 
<ol class="c-list c-list--scattered">
    <div class="c-list__header">
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1">ID</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">Formateur</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">Modifications</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">Status</div>
                <div class="c-list__item--cell o-grid-col-bp3-3"></div>
            </div>
        </li>
    </div>
    <div class="c-list__body">
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
        <li class="c-list__item o-grid">
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-1 small">00337D-99</div>
                <div class="c-list__item--cell o-grid-col-bp3-5">example@site.com</div>
            </div>
            <div class="mod-6 o-grid">
                <div class="c-list__item--cell o-grid-col-bp3-2">10/17/2022</div>
                <div class="c-list__item--cell o-grid-col-bp3-1">
                    <span class="c-status-pill c-status-pill--pending">
                        <span class="c-status-pill__circle"></span>
                        <span class="c-status-pill__label">User</span>
                    </span>
                </div>
                <div class="c-list__item--cell align-right o-grid-col-bp3-3">
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-add  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Add more
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-delete  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Delete
                            </div>
                        </span>
                    </button>
                    <button class="c-button c-button--borderless c-button--icon" type="button">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-edit  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Edit
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </li>
    </div>
</ol>
ol.c-list.c-list--scattered
    .c-list__header
        li.c-list__item.o-grid
            .mod-6.o-grid
                .c-list__item--cell.o-grid-col-bp3-1 ID
                .c-list__item--cell.o-grid-col-bp3-5 Formateur
            .mod-6.o-grid
                .c-list__item--cell.o-grid-col-bp3-2 Modifications
                .c-list__item--cell.o-grid-col-bp3-1 Status
                .c-list__item--cell.o-grid-col-bp3-3
    .c-list__body
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit
            li.c-list__item.o-grid
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-1.small 00337D-99
                    .c-list__item--cell.o-grid-col-bp3-5 example@site.com
                .mod-6.o-grid
                    .c-list__item--cell.o-grid-col-bp3-2 10/17/2022
                    .c-list__item--cell.o-grid-col-bp3-1
                        +c-status-pill({skin: 'pending'}) User
                    .c-list__item--cell.align-right.o-grid-col-bp3-3
                        +c-button({ layout: 'icon-only', icon: 'add', skin: 'borderless'}) Add more
                        +c-button({ layout: 'icon-only', icon: 'delete', skin: 'borderless'}) Delete
                        +c-button({ layout: 'icon-only', icon: 'edit', skin: 'borderless'}) Edit