-
Include
@mindful-web/marko-web-leadersas a project/website dependency. -
Include the Browser plugin.
// your-site/browser/index.js
import Leaders from '@mindful-web/marko-web-leaders/browser';
Leaders(Browser);
export default Browser;- Include the styles.
// your-site/server/styles/index.scss
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,600,700&display=swap");
@import "@mindful-web/marko-web-leaders/scss/leaders";- Include the dropdown portal component in your template or document root. Include immediately after the opening
<body>tag! << Don't forget this step >>
<!-- your-site/server/components/document.marko -->
<marko-web-document ...input>
<@head>
<!-- ... head components here -->
</@head>
<@above-container>
<marko-web-leaders-dropdown-portal />
<!-- ... other components here -->
<${input.aboveContainer} />
</@above-container>
</marko-web-document>- Include the
<marko-web-leaders>component where you'd like it displayed.
<!-- your-site/server/templates/index.marko -->
<marko-web-leaders props={
sectionAlias: "leaders",
open: null,
expanded: false,
headerImgSrc: "https://img.packworld.com/files/base/pmmi/all/leaders/pw.png",
headerImgAlt: "Leaders in Packaging 2019",
columns: 1,
offsetTop: 105,
mediaQueries: [
{ prop: "open", value: "right", query: "(min-width: 1490px)" },
{ prop: "columns", value: 2, query: "(min-width: 700px)" },
{ prop: "displayCallout", value: false, query: "(max-width: 660px)" },
],
}/>