Main Element
Provides a responsive container for the native HTML main element
PortfoLitO
About
Getting Started
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Usage
The <page-main /> element wraps the native HTML <main /> element, and is intended to be a direct child of the <body /> element of a page. It acts as a responsive container for your supplied content, and does not provide any content of its own.
Experience
Senior Software Developer
Corporation C
Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et. Enim pulvinar senserit feugiat viris vim tale. Oratio feugiat graeco mea vim fabulas definiebas varius discere. Idque platonem gubergren noster interesset.
Software Developer
Corporation B
Gubergren ius mutat inceptos habitant habemus reque. Consectetur vidisse ubique dolores natum iusto rhoncus assueverit cursus fusce. Perpetua pellentesque ornatus imperdiet lacus vitae facilis deserunt. Curae ligula ridens dolorem discere. Verterem in maluisset quod quaestio convallis. Wisi convallis melius laudem veniam montes. Mi diam his augue quaerendum legere. Liber vehicula moderatius veritus nunc.
<body>
<page-header>PortfoLitO</page-header>
<page-main>
<!-- Your Content -->
</page-main>
</body>CSS Parts
| Name | Description |
|---|---|
container | Responsive container element |
content | Wrapper for main page content |
CSS Variables
| Name | Description | Type | Default |
|---|---|---|---|
--container-bgColor | Background color of the outer container part |
|
|
--container-fgColor | Background color of the inner content part |
| - |
--container-fgColor-sm | Background color of the content part for small containers |
| - |
Slots
| Name | Description | Type |
|---|---|---|
| none | Content to be wrapped in the HTML main element |
|
hero | Content to place above all other content |
|