Skip to Content
Patternfly Logo

Primary-detail

DemosDocumentation

Demos

Primary detail expanded

Skip to content
Avatar image

Primary-detail expanded

Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5

1 - 10of 37
1 - 10 of  37
  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago
  • patternfly-unified-design-kit

  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago

The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.

Title
Title

Primary detail collapsed

Skip to content
Avatar image

Primary-detail collapsed

Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5

1 - 10of 37
1 - 10 of  37
  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago
  • patternfly-unified-design-kit

  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago

Primary detail content body padding

Skip to content
Avatar image

Padded content example

Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5

1 - 10of 37
1 - 10 of  37
  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago
  • patternfly-unified-design-kit

  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago

Patternfly-elements

PatternFly elements

The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.

Title
Title

Primary detail card view expanded

Skip to content
Avatar image

Main title

Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5

1 - 10of 37
1 - 10 of  37

Patternfly

PatternFly elements

The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.

Title
Title

Primary detail card simple list expanded on mobile

Skip to content
Avatar image

Primary-detail, in card, simple list

Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5

Section title

Section title

Patternfly-elements

The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.

Title
Title

Primary detail card data list expanded on mobile

Skip to content
Avatar image

Primary-detail, in card, data list

Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5

1 - 10of 37
1 - 10 of  37

Patternfly-elements

The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.

Title
Title

Inline modifier

Skip to content
Avatar image

Primary-detail expanded, with data-list and .pf-m-inline modifier demo

Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5

1 - 10of 37
1 - 10 of  37
  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago
  • patternfly-unified-design-kit

  • patternfly

    Working repo for PatternFly 4 https://pf4.patternfly.org/
    10
    4
    5
    Updated 2 days ago
  • patternfly-elements

    PatternFly elements
    5
    9
    2
    11
    4
    1
    Updated 2 days ago

The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.

Title
Title

Documentation

This demo implements the drawer in context of the page component.