@base-cms/marko-web-leaders NPM

BaseCMS Marko Wrapper for the Leaders Program

Installation

Include @base-cms/marko-web-leaders as a project/website dependency.
Include the Browser plugin.

// your-site/browser/index.js
import Leaders from '@base-cms/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 "../../node_modules/@base-cms/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)" },
  ],
}/>

@base-cms/leaders-program graphql graphql-tag

@everything-registry/sub-chunk-113 @zalastax/nolb-_bas

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago