Page heading layout

  • Install
    npm install @pluralsight/ps-design-system-layout
  • Import
    import { PageHeadingLayout } from '@pluralsight/ps-design-system-layout

Example

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).

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

Props

Name
Type
Description
Default
actionsReact.ReactNode[]actionable elements to place in the top-right
heading
Required
React.ReactNodeheading element to display as page title