Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Table

Data tables.

Default table

#

Default table styling. The fact that this looks very bare is intentional; additional styling is added with modifier classes.

Data Data Data
Data Data Data
Data Data Data
Data Data Data 
<table class="c-table">
    <thead>
        <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
table.c-table
    thead
        tr
            th Data
            th Data
            th Data
    tbody
        tr
            td Data
            td Data
            td Data
        tr
            td Data
            td Data
            td Data
        tr
            td Data
            td Data
            td Data

Styled Table

#

A table with more styling.

Data Data Data
Data Data Data
Data Data Data
Data Data Data 
<table class="c-table c-table--styled">
    <thead>
        <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
table.c-table.c-table--styled
    thead
        tr
            th Data
            th Data
            th Data
    tbody
        tr
            td Data
            td Data
            td Data
        tr
            td Data
            td Data
            td Data
        tr
            td Data
            td Data
            td Data

Table with single action

#

A table with a single action.

Data Data Data
Data Data Data
Data Data Data
Data Data Data
Data Data Data 
<table class="c-table c-table--styled c-table--bordered">
    <thead>
        <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>
                <!-- Actions-->
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
table.c-table.c-table--styled.c-table--bordered
    thead
        tr
            th Data
            th Data
            th Data
            th
                // Actions
    tbody
        each item in [1, 2, 3, 4]
            tr
                td Data
                td Data
                td Data
                td
                    .c-button-toolbar
                        +c-button({skin: 'borderless', icon: 'chevron-right', layout: 'icon-only'}) Go to detail

Table with multiple action

#

A table with a multiple actions.

Data Data Data
Data Data Data
Data Data Data
Data Data Data
Data Data Data 
<table class="c-table c-table--styled c-table--bordered js-data-table">
    <thead>
        <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>
                <!-- Actions-->
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-0">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-0">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-1">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-1">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-2">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-2">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>
                <div class="c-button-toolbar">
                    <button class="c-button c-button--borderless c-button--icon" type="button" data-menu-placement="bottom-end" data-menu="dropdownMenu-3">
                        <span class="c-button__content">
                            <div class="o-svg-icon o-svg-icon-options-horizontal  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="#595959" />
                                    <path d="M6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14Z" fill="#595959" />
                                    <path d="M18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">More options
                            </div>
                        </span>
                    </button>
                    <ul class="c-menu" id="dropdownMenu-3">
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Edit</span>
                            </a>
                        </li>
                        <li class="c-menu__item">
                            <a class="c-menu__label" href="#">
                                <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>
                                <span>Delete</span>
                            </a>
                        </li>
                    </ul>
                    <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-chevron-right  ">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                </svg>
                            </div>
                            <div class="u-sr-accessible">Go to detail
                            </div>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
table.c-table.c-table--styled.c-table--bordered.js-data-table
    thead
        tr
            th Data
            th Data
            th Data
            th
                // Actions
    tbody
        each item, index in [1, 2, 3, 4]
            tr
                td Data
                td Data
                td Data
                td
                    .c-button-toolbar
                        +c-button({skin: 'borderless', icon: 'options-horizontal', layout: 'icon-only'})(data-menu-placement="bottom-end" data-menu="dropdownMenu-"+index) More options

                        ul.c-menu(id="dropdownMenu-"+index)
                            li.c-menu__item
                                a.c-menu__label(href="#")
                                    +icon('edit')
                                    span Edit
                            li.c-menu__item
                                a.c-menu__label(href="#")
                                    +icon('delete')
                                    span Delete
                        +c-button({skin: 'borderless', icon: 'chevron-right', layout: 'icon-only'}) Go to detail

Table (invisible)

#

Invisible table structure.

Data header Data point
Data header Data point
Data header Data point 
<table class="c-table c-table--invisible c-table--horizontal">
    <tr>
        <th scope="row">Data header</th>
        <td>Data point</td>
    </tr>
    <tr>
        <th scope="row">Data header</th>
        <td>Data point</td>
    </tr>
    <tr>
        <th scope="row">Data header</th>
        <td>
            <a href="#">Data point</a>
        </td>
    </tr>
</table>
table.c-table.c-table--invisible.c-table--horizontal
    tr
        th(scope="row") Data header
        td Data point
    tr
        th(scope="row") Data header
        td Data point
    tr
        th(scope="row") Data header
        td
            a(href="#") Data point