Using Grommet for HPE?See Page examples and guidance.
The Page component can be customized with any of the properties available in Box.
At its core, the Page component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.
Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.
PageContent
a container for content within a page
PageContent is a Box with the following properties preset. You can customize it using the properties available in Box.
- fill"horizontal"
fill: "horizontal" to specify that the background should ignore width restrictions and fill the width of the Page.string"neutral-1"
"url(//my.com/assets/img.png)"
object
{
color: "neutral-1",
dark: true,
opacity: true,
position: "bottom",
repeat: "no-repeat",
size: "cover",
image: "url(//my.com/assets/img.png)",
fill: "horizontal,
clip: "text",
rotate: 45
}
{ dark: "light-2", light: "dark-2" }"weak"
"medium"
"strong"
true
any CSS for background-position
"no-repeat"
"repeat"
"string"
"cover"
"contain"
"string"
"text"
"border-box"
"padding-box"
"content-box"
At its core, the PageContent component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.
Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.