Nameplate and navigation for the Begin ecosystem.
Install via the GitHub repo, preferably with a version tag:
npm i [email protected]:beginner-corp/imprint.git#v<N.N.N>Reexport the element(s) from within your Enhance app:
// app/elements/begin-masthead.mjs
import { Masthead } from '@begin/imprint'
export default MastheadAll of the following need to be exposed as elements when using the Masthead:
| export name | element name |
|---|---|
| Masthead | begin-masthead |
| BeginLogo | masthead-begin-logo |
| DeployButton | masthead-deploy-button |
| ProductLink | masthead-product-link |
| SectionDropdown | masthead-section-dropdown |
| SectionLink | masthead-section-link |
| Slice | masthead-slice |
| Symbols | masthead-symbols |
All of the following need to be exposed as elements when using the Footer:
| export name | element name |
|---|---|
| BeginFooter | begin-footer |
| BeginLogo | masthead-begin-logo |
| MadeWith | footer-made-with |
The Masthead and Footer styling can be customized via the use of custom properties. Each comes with a default value baked in.
| Custom property | Application |
|---|---|
--accent |
Links and other colour accents |
--inline-padding |
Inline padding on masthead contents |
--muted |
Nav section headings |
--max-inline-size |
Maximum width of the masthead contents |
The Masthead also exposes several custom properties that can be used for layouts in your app:
--global-bar-height: The height of the global bar--product-bar-height: The product bar height--masthead-max-height: The height of the global bar + product bar
| Custom property | Application |
|---|---|
--accent |
Link colour, and basis for horizontal rule |
--color |
Text colour |
--background-color |
Background colour |
--inline-padding |
Inline padding on footer contents |
--max-inline-size |
Maximum width of the footer contents |
breakpoint: Minimum width (ideally inems) at which to switch from single column to multicolumn layoutproduct: Optional; name of the product the site is foractive: Optional; name of the global section that should show as active (usually'products')
breakpoint: Minimum width (ideally inems) at which to switch from single column to multicolumn layout