In a basic compass layout, content can be passed to the following props to populate areas of the page:
header: content rendered in the top of the page. This will typically be a CompassHeader component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile.sidebarStart: content rendered in the left side or start side of the pagemain: content rendered in the center of the page. This will typically consist of a CompassMainHeader or CompassHero, along with a CompassContent filled with one or more CompassPanel components.sidebarEnd: content rendered in the right side or end side of the pagefooter: content rendered in the bottom of the page
The background image of the Compass and CompassHero may be customized by using their respective backgroundSrcLight and backgroundSrcDark props. The CompassHero also allows customization of a color gradient across its container by using the gradientLight and gradientDark props.
