Table

A table is used to display large data sets that can be easily laid out in a simple grid with column headers. Related design guidelines: Lists and tables

Examples Documentation CSS Variables

Examples

Basic

This is the table caption
Repositories	Branches	Pull requests	Workspaces	Last commit
Repository 1	10	25	5	2 days ago
Repository 2	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago

Accessibility

Attribute	Applied to	Outcome
`role="grid"`	`.pf-c-table`	Identifies the element that serves as the grid widget container. Required
`aria-label`	`.pf-c-table`	Provides an accessible name for the table when a descriptive `<caption>` or `<h>` is not available. Required in the absence of `<caption>` or `<h>`**
`data-label="[td description]"`	`<td>`	This attribute replaces table header in mobile viewport. It is rendered by `::before` pseudo element.

Usage

Class	Applied to	Outcome
`.pf-c-table`	`<table>`	Initiates a table element. Required
`.pf-c-table__caption`	`<caption>`	Initiates a table caption.
`.pf-m-height-auto`	`<tr>`	Modifies a `<tr>` to have `height: auto`, which undoes the `height` declaration currently on `<tr>` elements.
`.pf-m-center`	`<th>`, `<td>`	Modifies cell to center its contents.

Sortable

			Workspaces	Last commit
Repository 1	10	25	5	2 days ago
Repository 2	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago

Sortable with headers that wrap

			This is a really long table header.	This is a really long table header.
Repository 1	10	25	5	2 days ago

Accessibility

Attribute	Applied to	Outcome
`aria-sort=[ascending or descending]`	`.pf-c-table__sort`	Indicates if columns in a table are sorted in ascending or descending order. For each table, authors SHOULD apply aria-sort to only one header at a time. Required

Usage

Class	Applied to	Outcome
`.pf-c-table__sort`	`<th>`	Initiates a sort table cell. Required for sortable table columns
`.pf-c-table__sort-text`	`.pf-c-table__sort > button > span`	Initiates the text wrapper inside of a sortable table cell. Required for sortable table columns
`.pf-c-table__sort-indicator`	`.pf-c-table__sort > button > span`	Initiates a sort indicator. Required for sortable table columns
`.pf-m-selected`	`.pf-c-table__sort`	Modifies for sort selected state. Required for sortable table columns
`.pf-m-wrap`	`.pf-c-table__sort`	Modifies the sortable table header to wrap.
`.fa-arrows-alt-v`	`.pf-c-table__sort > button > span > .fas`	Initiates icon within unsorted, sortable table header. Required for sortable table columns
`.fa-long-arrow-alt-up`	`.pf-c-table__sort > button > span > .fas`	Initiates icon within ascending sorted and selected, sortable table header. Required for sortable table columns
`.fa-long-arrow-alt-down`	`.pf-c-table__sort > button > span > .fas`	Initiates icon within descending sorted and selected, sortable table header. Required for sortable table columns

With checkboxes and actions

Repositories	Branches	Pull requests	Workspaces	Last commit
Node 1	10	25	5	2 days ago
Node 2 siemur/test-space	10	25	5	2 days ago
Node 3 siemur/test-space	10	25	5	2 days ago
Node 4 siemur/test-space	10	25	5	2 days ago

When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a <th>, rather than a <td>. In this example, 'Node 1' and 'Node 2 siemur/test-space' are <th>s.

When header cells are empty or they contain interactive elements, <th> should be replaced with <td>.

Thead accessibility

Attribute	Applied to	Outcome
`aria-label="[descriptive text]"`	`.pf-c-table__check input[type="checkbox"]`	Provides an accessible name for the checkbox. Required

Tbody accessibility

Attribute	Applied to	Outcome
`aria-labelledby="[row_header_id]"` or `aria-label="[descriptive text]`	`.pf-c-table__check input[type="checkbox"]`	Provides an accessible name for the checkbox. Required
`id`	row header `<th>` > `*`	Provides an accessible description for the checkbox. Required if using `aria-labelledby` for `.pf-c-table__check input[type="checkbox"]`

Usage

Class	Applied to	Outcome
`.pf-c-table__check`	`<th>`, `<td>`	Initiates a check table cell.
`.pf-c-table__action`	`<th>`, `<td>`	Initiates an action table cell.
`.pf-c-table__inline-edit-action`	`<th>`, `<td>`	Initiates an inline edit action table cell.

Expandable


	Node 1 siemur/test-space	10	25	Link 1
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Node 2 siemur/test-space	10	25	Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Node 3 siemur/test-space	10	25	Link 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Node 4 siemur/test-space	10	25	Link 4
Expandable row content has no padding.

Note: To apply padding to .pf-c-table__expandable-row, wrap the content in .pf-c-table__expandable-row-content. For no padding add .pf-m-no-padding to .pf-c-table__expandable-row > <td>

Accessibility

Attribute	Applied to	Outcome
`hidden`	`.pf-c-table__expandable-row`	Indicates that the expandable content is hidden. Required
`aria-expanded="true"`	`.pf-c-table__toggle` > `.pf-c-button`	Indicates that the row is visible. Required
`aria-label="[descriptive text]"`	`.pf-c-table__toggle` > `.pf-c-button`	Provides an accessible name for toggle button. Required
`aria-labelledby="[title_cell_id] [button_id]"`	`.pf-c-table__toggle` > `.pf-c-button`	Provides an accessible description for toggle button. Required
`id="[button_id]"`	`.pf-c-table__toggle` > `.pf-c-button`	Provides a reference for toggle button description. Required
`aria-controls="[id of element the button controls]"`	`.pf-c-table__toggle` > `.pf-c-button`	Identifies the expanded content controlled by the toggle button. Required

Usage

Class	Applied to	Outcome
`.pf-c-table__toggle-icon`	`<span>`	Initiates the table toggle icon wrapper.
`.pf-c-table__expandable-row`	`<tr>`	Initiates an expandable row.
`.pf-c-table__expandable-row-content`	`.pf-c-table__expandable-row` > `<td>` > `<div>`	Initiates an expandable row content wrapper.
`.pf-m-expanded`	`.pf-c-table__toggle` > `.pf-c-button`, `.pf-c-table__expandable-row`	Modifies for expanded state.
`.pf-m-no-padding`	`.pf-c-table__expandable-row` > `<td>`	Modifies the expandable row to have no padding.

With compound expansion

Workspaces

Last commit

siemur/test-space

20 minutes

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

siemur/test-space

1 day ago

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

siemur/test-space

2 days ago

Open in Github

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

	Date	Status
Item one	May 9, 2018	Active
Item two	May 9, 2018	Warning
Item three	May 9, 2018	Active
Item four	May 9, 2018	Active
Item five	May 9, 2018	Active

Accessibility

Attribute	Applied to	Outcome
`hidden`	`.pf-c-table__expandable-row`	Indicates that the expandable content is hidden. Required
`aria-expanded="true"`	`.pf-c-table__compound-expansion-toggle` > `.pf-c-button`	Indicates that the row is visible. Required
`aria-controls="[id of element the button controls]"`	`.pf-c-table__compound-expansion-toggle` > `.pf-c-button`	Identifies the expanded content controlled by the toggle button. Required

Usage

Class	Applied to	Outcome
`.pf-m-expanded`	`<tbody>`, `.pf-c-table__compound-expansion-toggle` > `.pf-c-button`	Modifies a tbody with a row and an expandable row.
`.pf-c-table__compound-expansion-toggle`	`<td>`	Modifies a `<td>` on active/focus.

Compact

Contributor	Position	Location	Last seen	Numbers	Icons
Sam Jones	CSS guru	Not too sure	May 9, 2018	0556		Action link
Amy Miller	Visual design	Raleigh	May 9, 2018	9492		Action link
Steve Wilson	Visual design lead	Westford	May 9, 2018	9929		Action link
Emma Jackson	Interaction design	Westford	May 9, 2018	2217		Action link

Usage

Class	Applied to	Outcome
`.pf-m-compact`	`.pf-c-table`	Modifies for a compact table.

Compact with no borders

Contributor	Position	Location	Last seen	Numbers	Icons
Sam Jones	CSS guru	Not too sure	May 9, 2018	0556		Action link
Amy Miller	Visual design	Raleigh	May 9, 2018	9492		Action link
Steve Wilson	Visual design lead	Westford	May 9, 2018	9929		Action link
Emma Jackson	Interaction design	Westford	May 9, 2018	2217		Action link

Usage

Class	Applied to	Outcome
`.pf-m-no-border-rows`	`.pf-c-table.pf-m-compact`	Modifies to remove borders between rows. Note: Can not be used with `.pf-m-expandable`.

Compact expandable

	Repositories	Branches	Pull requests
	Node 1	10	25	Link
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Node 2	10	25	Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Node 3	10	25	Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Node 4	10	25	Link
This content has no padding.
	Node 5	10	25	Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage

Class	Applied to	Outcome
`.pf-m-expandable`	`.pf-c-table.pf-m-compact`	Indicates that the table has expandable rows. Note: Can not be used with `.pf-m-no-border-rows`.

With width modifiers

			Workspaces	Last commit
Node 1	10	25	5	2 days ago
Node 2 siemur/test-space	10	25	5	2 days ago
Node 3 siemur/test-space	10	25	5	2 days ago
Node 4 siemur/test-space	10	25	5	2 days ago

Usage

Class	Applied to	Outcome
`.pf-m-width-[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90]`	`<th>`, `<td>`	Percentage based modifier for `th` and `td` widths. Recommended for sortable title cell
`.pf-m-width-max`	`<th>`, `<td>`	Percentage based modifier for `th` and `td` maximum width.
`.pf-m-fit-content`	`<th>`, `<td>`	Percentage based modifier for `th` and `td` minimum width with no text wrapping.

With hidden/visible breakpoint modifiers

Repositories	Branches	Pull requests	Workspaces	Last commit
Visible only on md breakpoint	10	Hidden only on md breakpoint	5	Hidden on xs breakpoint
Repository 2	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago

Usage

Class	Applied to	Outcome
`.pf-m-hidden{-on-[breakpoint]}`	`.pf-c-table tr > *`	Hides a table cell at a given breakpoint, or hides it at all breakpoints with `.pf-m-hidden`. Note: Needs to apply to all cells in the column you want to hide.
`.pf-m-visible{-on-[breakpoint]}`	`.pf-c-table tr > *`	Shows a table cell at a given breakpoint.

With headers that wrap

This is the table caption
This is a really long table header that goes on for a long time.	This is a really long table header that goes on for a long time.	This is a really long table header that goes on for a long time.	This is a really long table header that goes on for a long time.	This is a really long table header that goes on for a long time.
Repository 1	10	25	5	2 days ago
Repository 2	10	25	5	2 days ago
Repository 3	10	25	5	2 days ago
Repository 4	10	25	5	2 days ago

Usage

Class	Applied to	Outcome
`.pf-m-wrap`	`<th>`, `<td>`	Modifies content to wrap.

Documentation

Overview

Because the table component is not used for layout and presents tabular data only, it requires the use of role="grid". Expandable table content (.pf-c-table__expandable-content) is placed within a singular <td> per expandable row, that can span multiple columns.

Role="grid"

Applying role="grid" to tables enhances accessible interaction while in table layout, however the responsive, css grid based layout can cause unexpected interactions. Therefore, for css grid layout, it is recommended that role="grid" be removed.

Sortable tables

Table columns may shift when expanding/collapsing. To address this, set .pf-m-fit-content, or assign a width .pf-m-width-[width] to the corresponding <th> defining the column or <td> within the column. Width values are [10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90] or max.

Table header cells

By default, all table header cells are set to white-space: nowrap. If a <th>'s content needs to wrap, apply .pf-m-wrap.

Implementation support

One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
One checkbox, positioned in the first or second cell of a non-expandable row.
One action button, positioned in the last cell of a non-expandable row.
Tabular data.
Compact presentation modifier (not compatible with expandable table).

Responsive layout modifiers

Class	Applied to	Outcome
`.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl`	`.pf-c-table`	Changes tabular layout to responsive, grid based layout at suffixed breakpoint.
`.pf-m-grid`	`.pf-c-table`	Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.

CSS Variables


	.pf-c-table	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-table	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-table	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--BackgroundColor	#fff
--pf-c-table--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-table	--pf-c-table--BorderColor	#d2d2d2
--pf-c-table--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table--BorderWidth	1px
--pf-c-table--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table-cell--FontWeight	400
--pf-c-table-cell--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-table	--pf-c-table-caption--FontSize	0.875rem
--pf-c-table-caption--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table-caption--Color	#6a6e73
--pf-c-table-caption--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-table	--pf-c-table-caption--PaddingTop	1rem
--pf-c-table-caption--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingRight	1.5rem
--pf-c-table-caption--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-caption--xl--PaddingRight	1rem
--pf-c-table-caption--xl--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingBottom	1rem
--pf-c-table-caption--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-caption--PaddingLeft	1.5rem
--pf-c-table-caption--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-caption--xl--PaddingLeft	1rem
--pf-c-table-caption--xl--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-thead--FontSize	0.875rem
--pf-c-table-thead--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table-thead--FontWeight	600
--pf-c-table-thead--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.pf-c-table	--pf-c-table-thead-cell--PaddingTop	1rem
--pf-c-table-thead-cell--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-thead-cell--PaddingBottom	1rem
--pf-c-table-thead-cell--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--hidden-visible--Display	table-cell
	.pf-c-table	--pf-c-table-tbody-cell--PaddingTop	1.5rem
--pf-c-table-tbody-cell--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-tbody-cell--PaddingBottom	1.5rem
--pf-c-table-tbody-cell--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-cell--PaddingTop	1rem
--pf-c-table-cell--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--PaddingRight	1rem
--pf-c-table-cell--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--PaddingBottom	1rem
--pf-c-table-cell--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--PaddingLeft	1rem
--pf-c-table-cell--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--FontSize	1rem
--pf-c-table-cell--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--first-last-child--PaddingLeft	1.5rem
--pf-c-table-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-cell--first-last-child--PaddingRight	1.5rem
--pf-c-table-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table-cell--first-last-child--xl--PaddingLeft	1rem
--pf-c-table-cell--first-last-child--xl--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table-cell--first-last-child--xl--PaddingRight	1rem
--pf-c-table-cell--first-last-child--xl--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table__toggle--c-button--MarginTop	calc(0.375rem * -1)
	.pf-c-table	--pf-c-table__toggle--c-button__toggle-icon--Transform	rotate(270deg)
	.pf-c-table	--pf-c-table__toggle--c-button__toggle-icon--Transition	.2s ease-in 0s
	.pf-c-table	--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Transform	rotate(360deg)
	.pf-c-table	--pf-c-table--m-compact__toggle--PaddingTop	0
	.pf-c-table	--pf-c-table--m-compact__toggle--PaddingBottom	0
	.pf-c-table	--pf-c-table__check--input--MarginTop	0.1875rem
	.pf-c-table	--pf-c-table__check--input--FontSize	1rem
--pf-c-table__check--input--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table	--pf-c-table__action--PaddingTop	0
	.pf-c-table	--pf-c-table__action--PaddingRight	0
	.pf-c-table	--pf-c-table__action--PaddingBottom	0
	.pf-c-table	--pf-c-table__action--PaddingLeft	0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingTop	0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingRight	0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingBottom	0
	.pf-c-table	--pf-c-table__inline-edit-action--PaddingLeft	0
	.pf-c-table	--pf-c-table__expandable-row--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-table	--pf-c-table__expandable-row--before--Width	3px
--pf-c-table__expandable-row--before--Width --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table	--pf-c-table__expandable-row--before--BackgroundColor	#06c
--pf-c-table__expandable-row--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__expandable-row--before--ZIndex	200
--pf-c-table__expandable-row--before--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-table	--pf-c-table__expandable-row--before--Top	calc(1px * -1)
--pf-c-table__expandable-row--before--Top calc(--pf-c-table--BorderWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__expandable-row--before--Bottom	calc(1px * -1)
--pf-c-table__expandable-row--before--Bottom calc(--pf-c-table--BorderWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-table	--pf-c-table__expandable-row--MaxHeight	28.125rem
	.pf-c-table	--pf-c-table__expandable-row-content--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row-content--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-table	--pf-c-table__expandable-row-content--PaddingTop	1.5rem
--pf-c-table__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__expandable-row-content--PaddingBottom	1.5rem
--pf-c-table__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__sort-indicator--MarginLeft	1rem
--pf-c-table__sort-indicator--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table__sort-indicator--Color	#d2d2d2
--pf-c-table__sort-indicator--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__sort-indicator--hover--Color	#151515
--pf-c-table__sort-indicator--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort--c-button--Color	#151515
--pf-c-table__sort--c-button--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-table	--pf-c-table__sort-indicator--LineHeight	1.5
--pf-c-table__sort-indicator--LineHeight --pf-c-button--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-table	--pf-c-table__icon-inline--MarginRight	0.5rem
--pf-c-table__icon-inline--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--nested--first-last-child--PaddingRight	4rem
--pf-c-table--nested--first-last-child--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table	--pf-c-table--nested--first-last-child--PaddingLeft	4rem
--pf-c-table--nested--first-last-child--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table	--pf-c-table--m-compact-th--PaddingTop	calc(0.5rem + 0.25rem)
--pf-c-table--m-compact-th--PaddingTop calc(--pf-global--spacer--sm + --pf-global--spacer--xs) calc($pf-global--spacer--sm + $pf-global--spacer--xs) calc(pf-size-prem(8px) + pf-size-prem(4px)) calc(0.5rem + 0.25rem)
	.pf-c-table	--pf-c-table--m-compact-th--PaddingBottom	0.5rem
--pf-c-table--m-compact-th--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingTop	0.5rem
--pf-c-table--m-compact-cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingRight	0.5rem
--pf-c-table--m-compact-cell--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingBottom	0.5rem
--pf-c-table--m-compact-cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--PaddingLeft	0.5rem
--pf-c-table--m-compact-cell--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--PaddingLeft	1.5rem
--pf-c-table--m-compact-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--PaddingRight	1.5rem
--pf-c-table--m-compact-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--xl--PaddingLeft	1rem
--pf-c-table--m-compact-cell--first-last-child--xl--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--m-compact-cell--first-last-child--xl--PaddingRight	1rem
--pf-c-table--m-compact-cell--first-last-child--xl--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table	--pf-c-table--m-compact--FontSize	0.875rem
--pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingTop	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingRight	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingBottom	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table--m-compact__expandable-row-content--PaddingLeft	1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderTop--BorderWidth	3px
--pf-c-table__compound-expansion-toggle--BorderTop--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderTop--BorderColor	#06c
--pf-c-table__compound-expansion-toggle--BorderTop--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderRight--BorderWidth	1px
--pf-c-table__compound-expansion-toggle--BorderRight--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidth	1px
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderRight--BorderColor	#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderRight--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderLeft--BorderColor	#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidth	1px
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-table	--pf-c-table__compound-expansion-toggle--BorderBottom--BorderColor	#fff
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-table	--pf-c-table__expandable-row--m-expanded--BorderBottomColor	#d2d2d2
--pf-c-table__expandable-row--m-expanded--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-table	--pf-c-table__sort--sorted--Color	#06c
--pf-c-table__sort--sorted--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-table tr > *	--pf-hidden-visible--visible--Visibility	visible
	.pf-c-table tr > *	--pf-hidden-visible--hidden--Display	none
	.pf-c-table tr > *	--pf-hidden-visible--hidden--Visibility	hidden
	.pf-c-table tr > *	--pf-hidden-visible--Display	table-cell
--pf-hidden-visible--Display --pf-hidden-visible--visible--Display --pf-c-table-cell--hidden-visible--Display table-cell
	.pf-c-table tr > *	--pf-hidden-visible--Visibility	visible
--pf-hidden-visible--Visibility --pf-hidden-visible--visible--Visibility visible
	.pf-c-table tr > *	--pf-hidden-visible--visible--Display	table-cell
--pf-hidden-visible--visible--Display --pf-c-table-cell--hidden-visible--Display table-cell
	.pf-c-table tr > .pf-m-hidden	--pf-hidden-visible--Display	none
--pf-hidden-visible--Display --pf-hidden-visible--hidden--Display none
	.pf-c-table tr > .pf-m-hidden	--pf-hidden-visible--Visibility	hidden
--pf-hidden-visible--Visibility --pf-hidden-visible--hidden--Visibility hidden
	.pf-c-table tr > *:first-child	--pf-c-table-cell--PaddingLeft	1.5rem
--pf-c-table-cell--PaddingLeft --pf-c-table-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table tr > *:last-child	--pf-c-table-cell--PaddingRight	1.5rem
--pf-c-table-cell--PaddingRight --pf-c-table-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table thead	--pf-c-table-cell--PaddingTop	1rem
--pf-c-table-cell--PaddingTop --pf-c-table-thead-cell--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table thead	--pf-c-table-cell--PaddingBottom	1rem
--pf-c-table-cell--PaddingBottom --pf-c-table-thead-cell--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-table thead	--pf-c-table-cell--FontSize	0.875rem
--pf-c-table-cell--FontSize --pf-c-table-thead--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table thead	--pf-c-table-cell--FontWeight	600
--pf-c-table-cell--FontWeight --pf-c-table-thead--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.pf-c-table tbody	--pf-c-table-cell--PaddingTop	1.5rem
--pf-c-table-cell--PaddingTop --pf-c-table-tbody-cell--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table tbody	--pf-c-table-cell--PaddingBottom	1.5rem
--pf-c-table-cell--PaddingBottom --pf-c-table-tbody-cell--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table .pf-c-table__toggle	--pf-c-table-cell--PaddingBottom	0
	.pf-c-table__toggle	--pf-c-table-cell--PaddingRight	0
	.pf-c-table__toggle	--pf-c-table-cell--PaddingLeft	0
	.pf-c-table__check	--pf-c-table-cell--FontSize	1rem
--pf-c-table-cell--FontSize --pf-c-table__check--input--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-table__action	--pf-c-table-cell--PaddingTop	0
	.pf-c-table__action	--pf-c-table-cell--PaddingRight	0
--pf-c-table-cell--PaddingRight --pf-c-table__action--PaddingRight 0
	.pf-c-table__action	--pf-c-table-cell--PaddingBottom	0
	.pf-c-table__action	--pf-c-table-cell--PaddingLeft	0
--pf-c-table-cell--PaddingLeft --pf-c-table__action--PaddingLeft 0
	.pf-c-table__inline-edit-action	--pf-c-table-cell--PaddingLeft	0
	.pf-c-table__inline-edit-action	--pf-c-table-cell--PaddingRight	0
	.pf-c-table__compound-expansion-toggle .pf-c-button	--pf-c-button--BorderRadius	0
	.pf-c-table__expandable-row	--pf-c-table-cell--PaddingTop	0
	.pf-c-table__expandable-row	--pf-c-table-cell--PaddingBottom	0
	.pf-c-table .pf-c-table tr > *:first-child	--pf-c-table-cell--PaddingLeft	4rem
--pf-c-table-cell--PaddingLeft --pf-c-table--nested--first-last-child--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table .pf-c-table tr > *:last-child	--pf-c-table-cell--PaddingRight	4rem
--pf-c-table-cell--PaddingRight --pf-c-table--nested--first-last-child--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table.pf-m-compact	--pf-c-table-cell--FontSize	0.875rem
--pf-c-table-cell--FontSize --pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table.pf-m-compact.pf-m-no-border-rows:not(.pf-m-expandable) tbody	--pf-c-table--BorderWidth	0
	.pf-c-table.pf-m-compact.pf-m-no-border-rows:not(.pf-m-expandable) tbody	--pf-c-table--BorderColor	transparent
	.pf-c-table.pf-m-compact tr	--pf-c-table-cell--PaddingLeft	0.5rem
--pf-c-table-cell--PaddingLeft --pf-c-table--m-compact-cell--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr	--pf-c-table-cell--PaddingRight	0.5rem
--pf-c-table-cell--PaddingRight --pf-c-table--m-compact-cell--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table-cell--FontSize	0.875rem
--pf-c-table-cell--FontSize --pf-c-table--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table-cell--PaddingTop	0.5rem
--pf-c-table-cell--PaddingTop --pf-c-table--m-compact-cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)	--pf-c-table-cell--PaddingBottom	0.5rem
--pf-c-table-cell--PaddingBottom --pf-c-table--m-compact-cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:first-child	--pf-c-table-cell--PaddingLeft	1.5rem
--pf-c-table-cell--PaddingLeft --pf-c-table--m-compact-cell--first-last-child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child	--pf-c-table-cell--PaddingRight	1.5rem
--pf-c-table-cell--PaddingRight --pf-c-table--m-compact-cell--first-last-child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table.pf-m-compact thead	--pf-c-table--m-compact-cell--PaddingTop	calc(0.5rem + 0.25rem)
--pf-c-table--m-compact-cell--PaddingTop --pf-c-table--m-compact-th--PaddingTop calc(--pf-global--spacer--sm + --pf-global--spacer--xs) calc($pf-global--spacer--sm + $pf-global--spacer--xs) calc(pf-size-prem(8px) + pf-size-prem(4px)) calc(0.5rem + 0.25rem)
	.pf-c-table.pf-m-compact thead	--pf-c-table--m-compact-cell--PaddingBottom	0.5rem
--pf-c-table--m-compact-cell--PaddingBottom --pf-c-table--m-compact-th--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table-cell--PaddingTop	0
--pf-c-table-cell--PaddingTop --pf-c-table__action--PaddingTop 0
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table-cell--PaddingBottom	0
--pf-c-table-cell--PaddingBottom --pf-c-table__action--PaddingBottom 0
	.pf-c-table.pf-m-compact .pf-c-table__action	--pf-c-table-cell--PaddingLeft	0
--pf-c-table-cell--PaddingLeft --pf-c-table__action--PaddingLeft 0
	.pf-c-table.pf-m-compact .pf-c-table__toggle	--pf-c-table-cell--PaddingTop	0
--pf-c-table-cell--PaddingTop --pf-c-table--m-compact__toggle--PaddingTop 0
	.pf-c-table.pf-m-compact .pf-c-table__toggle	--pf-c-table-cell--PaddingBottom	0
--pf-c-table-cell--PaddingBottom --pf-c-table--m-compact__toggle--PaddingBottom 0
	.pf-c-table .pf-c-table.pf-m-compact tr > *:first-child	--pf-c-table-cell--PaddingLeft	4rem
--pf-c-table-cell--PaddingLeft --pf-c-table--nested--first-last-child--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table .pf-c-table.pf-m-compact tr > *:last-child	--pf-c-table-cell--PaddingRight	4rem
--pf-c-table-cell--PaddingRight --pf-c-table--nested--first-last-child--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-table.pf-m-compact .pf-c-table__expandable-row-content	--pf-c-table__expandable-row-content--PaddingTop	1.5rem
--pf-c-table__expandable-row-content--PaddingTop --pf-c-table--m-compact__expandable-row-content--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-table.pf-m-compact .pf-c-table__expandable-row-content	--pf-c-table__expandable-row-content--PaddingBottom	1.5rem
--pf-c-table__expandable-row-content--PaddingBottom --pf-c-table--m-compact__expandable-row-content--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem