Skip to Content

Master Detail

DemosDocumentation

Demos

Master detail expanded

Skip to content

Master 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 - 10of 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

Master detail collapsed

Skip to content

Master 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 - 10of 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

Master detail content body padding

Skip to content

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 - 10of 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

Master detail card view expanded

Skip to content

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 - 10of 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

Master detail card simple list expanded on mobile

Skip to content

Master 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

Master detail card data list expanded on mobile

Skip to content

Master 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 - 10of 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

Master 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 - 10of 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.