Skip to Content
Patternfly Logo

Master Detail

DemosDocumentation

Demos

Master detail expanded

Skip to content
PatternFly logo
Avatar image

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

Node 2

siemur/test-space

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
PatternFly logo
Avatar image

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
PatternFly logo
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 - 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
PatternFly logo
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 - 10of 37
PatternFly logo

Patternfly

Provided by Red Hat
PatternFly is a community project that promotes design commonality and improves user experience.
Logo

ActiveMQ

Provided by Red Hat
The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.
Logo

Apache Spark

Provided by Red Hat
This documentation page covers the Apache Spark component for the Apache Camel.
Logo

Avro

Provided by Red Hat
This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.
Logo

Azure Services

Provided by Red Hat
The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.
Logo

Crypto

Provided by Red Hat
For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.
PatternFly logo

Patternfly

Provided by Red Hat
PatternFly is a community project that promotes design commonality and improves user experience.
PatternFly logo

Patternfly

Provided by Red Hat
PatternFly is a community project that promotes design commonality and improves user experience.
PatternFly logo

Patternfly

Provided by Red Hat
PatternFly is a community project that promotes design commonality and improves user experience.
PatternFly logo

Patternfly

Provided by Red Hat
PatternFly is a community project that promotes design commonality and improves user experience.

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
PatternFly logo
Avatar image

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
PatternFly logo
Avatar image

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
PatternFly logo
Avatar image

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

Node 2

siemur/test-space

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.

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2019 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines