From 5fc91828a6ca2d2044ce80dfbe9dddec8962d589 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Tue, 15 Oct 2024 16:03:01 -0400 Subject: [PATCH 1/2] docs(page): Mention need for drop shadow with sticky page headers. --- .../content/design-guidelines/components/page/page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md index 0f46757078..4ec2d6bd08 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md @@ -16,7 +16,7 @@ The basic layout of a page differs depending on whether your application uses ve **3. Breadcrumb (optional):** When breadcrumbs are included, they should be the topmost element in the header section. When breadcrumbs are included on a page, the top padding is reduced from 24px to 16px. See the [breadcrumb design guidelines](/components/breadcrumb/design-guidelines) for more information about breadcrumb usage. -**4. Page header:** All pages should have a header section. The height of the header will vary to fit the content. We recommend keeping information in the header area brief to consume as little space as possible. The page header should contain the page title to help orient the user and an optional description to describe the contents of the page. You may optionally apply the `pf-m-sticky-top` modifier to the header section to create a sticky page header and prevent its content from scrolling off the page. +**4. Page header:** All pages should have a header section. The height of the header will vary to fit the content. We recommend keeping information in the header area brief to consume as little space as possible. The page header should contain the page title to help orient the user and an optional description to describe the contents of the page. You may optionally apply the `pf-m-sticky-top` modifier to the header section to create a sticky page header and prevent its content from scrolling off the page. A sticky page header should have a drop shadow. **5. Body section:** Your main page content goes here. The body section can have a light gray `--pf-v6-global--BackgroundColor--200` or white background depending on the content it will contain. The default padding all around the page body should be 24px in all directions. From b299b2f4a3528984d662e647487714ccf334c736 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Wed, 16 Oct 2024 09:38:40 -0400 Subject: [PATCH 2/2] Add to sticky footer. --- .../content/design-guidelines/components/page/page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md index 4ec2d6bd08..cc598706c8 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md @@ -20,7 +20,7 @@ The basic layout of a page differs depending on whether your application uses ve **5. Body section:** Your main page content goes here. The body section can have a light gray `--pf-v6-global--BackgroundColor--200` or white background depending on the content it will contain. The default padding all around the page body should be 24px in all directions. -**6. Footer section (optional):** You can optionally define a footer section for a page. You may optionally apply the `pf-m-sticky-bottom` modifier to the footer section to create a sticky page footer and prevent its content from scrolling off the page. +**6. Footer section (optional):** You can optionally define a footer section for a page. You may optionally apply the `pf-m-sticky-bottom` modifier to the footer section to create a sticky page footer and prevent its content from scrolling off the page. A sticky page footer should have a drop shadow. ### Page with horizontal navigation