Page heading layout

Start your layout with this default template of, PageHeadingLayout nested in PageWidthLayout, to achieve standard outer spacing and title style.

If you're using actions, be sure to stay limited to a small number of items (ie, 2-3).

Page title

Your page contents here

import { colorsBlue, layout } from '@pluralsight/ps-design-system-core'
import Button from '@pluralsight/ps-design-system-button'
import { PageHeadingLayout, PageWidthLayout } from '@pluralsight/ps-design-system-layout'
import { Heading, P } from '@pluralsight/ps-design-system-text'
import Theme from '@pluralsight/ps-design-system-theme'
import React from 'react'
const Example: React.FC = props => {
return (
<React.Fragment>
<PageWidthLayout>
<PageHeadingLayout
actions={[
<Button key="btn-1" appearance={Button.appearances.stroke}>
Button
</Button>,
<Button key="btn-2">Button</Button>
]}
heading={
<Heading size={Heading.sizes.large}>
<h2>Page title</h2>
</Heading>
}
>
<div className="outline">
<P>Your page contents here</P>
</div>
</PageHeadingLayout>
</PageWidthLayout>
<style jsx>{`
.outline {
border: 2px dashed ${colorsPink[6]};
min-height: 150px;
padding: ${layout.spacingSmall} 0;
}
`}</style>
</React.Fragment>
)
}
export default Example

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-layout
  • Import
    import { PageHeadingLayout } from '@pluralsight/ps-design-system-layout
Name
Type
Description
Default
actions
React.ReactNode[]
actionable elements to place in the top-right
heading
Required
React.ReactNode
heading element to display as page title