Novices Performing Miracles
    Have ideas to improve npm?Join in the discussion! »


    0.0.8 • Public • Published

    Hydrogen's blockquote component



    You can install this component as a standalone package using npm install @hydrogen-design-system/component-blockquote --save-dev

    This component can also be installed as a part of Hydrogen in its entirety. Learn more.


    For standard usage, please see Hydrogen's documentation.


    Hydrogen's properties are built using Gulp, Sass, Autoprefixer, CSSnano, and Babel.

    Hydrogen components require Cash to work properly. Cash is a lightweight jQuery alternative and will eventually be phased out of Hydrogen in favour of vanilla JavaScript.

    This component module contains the following in the dist folder:

    • the component's code that is imported by @hydrogen-design-system/system
    • a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

    This component currently supports the following markup and/or frameworks:

    • HTML

    Please ensure that work on this component updates all supported markup where possible.

    The code for this component can be found in:

    • src/markup/
    • src/scripts/
    • src/styles/

    You will need:


    _VERSION is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have _VERSION appended (e.g. data-h2-accordion_VERSION) in the following places:

    • src/markup
    • src/scripts
    • src/styles/instance.scss

    It is also important to use _VERSION when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in src/scripts that follow a function myNewFunctionName_VERSION () {} pattern.

    Important commands

    • npm install
      • installs all development dependencies
    • npm run dev
      • builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
    • npm run build
      • runs the build command to process all files for production
      • this will automatically build the system and instanced versions of the component
    • npm publish
      • builds the component
      • publishes it to the public package repository


    npm i @hydrogen-design-system/component-blockquote

    DownloadsWeekly Downloads






    Unpacked Size

    243 kB

    Total Files


    Last publish


    • avatar