guide screenshot
Within our documentation we have a number of screenshots. An example page containing quite a few screenshots is the ns-landmark
There are two types of screenshot, one as an example and another as an annotated image to assist the content guidance.
Using Firefox, set the browser to 1280px wide.
(I find it's easiest to do this using the developer toolbar pinned to the side.)
Once you have configured your desired content within the Knobs, launch the iframe 
to open the developer tools in the new tab to set the screen width.
Using the firefox screenshot tool, take a screenshot of the full width component.
The ns-landmark fills the full width:
To screenshot a list of components, display them in ns-panel and screenshot the entire panel.
There maybe a combination of components that is required that is not possible to create using Storybook. The exact same technique can be used to screenshot any ns-panel within a prototype, or an HTML page mockup saved locally.
This is ready to be embedded into one of our docs.
Happy screenshotting 👩🏽💻