diff --git a/lib/components/Button/SplitButton.d.ts b/lib/components/Button/SplitButton.d.ts
new file mode 100644
index 00000000..43243a7d
--- /dev/null
+++ b/lib/components/Button/SplitButton.d.ts
@@ -0,0 +1,2 @@
+declare const WrappedSplitButton: any;
+export default WrappedSplitButton;
diff --git a/lib/components/Button/SplitButton.js b/lib/components/Button/SplitButton.js
new file mode 100644
index 00000000..81f2ad19
--- /dev/null
+++ b/lib/components/Button/SplitButton.js
@@ -0,0 +1,194 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
+
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+
+var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _Theme = _interopRequireDefault(require("../Theme/Theme"));
+
+var _typeUtil = require("../../util/typeUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var SplitButton = function SplitButton(props) {
+  var name = props.name,
+      options = props.options,
+      selectedOption = props.selectedOption,
+      selectedOptionDisplayCallback = props.selectedOptionDisplayCallback,
+      onClick = props.onClick,
+      onChange = props.onChange,
+      buttonGroupProps = props.buttonGroupProps,
+      buttonMenuProps = props.buttonMenuProps,
+      buttonProps = props.buttonProps;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(selectedOption),
+      _useState4 = _slicedToArray(_useState3, 2),
+      stateSelectedOption = _useState4[0],
+      setStateSelectedOption = _useState4[1];
+
+  var anchorRef = (0, _react.useRef)(null);
+  var appliedButtonGroupProps = {
+    variant: 'outlined',
+    color: 'primary'
+  };
+
+  if ((0, _typeUtil.exists)(buttonGroupProps)) {
+    appliedButtonGroupProps = buttonGroupProps;
+  }
+
+  var appliedButtonProps = {
+    color: 'primary',
+    size: 'small'
+  };
+
+  if ((0, _typeUtil.exists)(buttonProps)) {
+    appliedButtonProps = buttonProps;
+  }
+
+  var appliedButtonMenuProps = {
+    color: 'primary',
+    size: 'small'
+  };
+
+  if ((0, _typeUtil.exists)(buttonMenuProps)) {
+    appliedButtonMenuProps = buttonMenuProps;
+  }
+
+  (0, _react.useEffect)(function () {
+    if (selectedOption === stateSelectedOption) return;
+    setStateSelectedOption(selectedOption);
+  }, [selectedOption, stateSelectedOption]);
+
+  var handleClick = function handleClick() {
+    onClick(stateSelectedOption);
+  };
+
+  var handleMenuItemClick = function handleMenuItemClick(event, index) {
+    setStateSelectedOption(options[index]);
+    onChange(options[index]);
+    setOpen(false);
+  };
+
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+  };
+
+  var handleClose = function handleClose(event) {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  var renderSelectedOption = function renderSelectedOption() {
+    if ((0, _typeUtil.exists)(selectedOptionDisplayCallback)) {
+      // eslint-disable-next-line max-len
+      return selectedOptionDisplayCallback(stateSelectedOption);
+    }
+
+    return stateSelectedOption;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    direction: "column",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, _extends({
+    "aria-label": "".concat(name, "-split-button")
+  }, appliedButtonGroupProps, {
+    ref: anchorRef
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, appliedButtonProps, {
+    onClick: handleClick
+  }), renderSelectedOption()), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    "aria-controls": open ? "".concat(name, "-split-button-menu") : undefined,
+    "aria-expanded": open ? 'true' : undefined,
+    "aria-label": "".concat(name, "-split-button-select"),
+    "aria-haspopup": "menu"
+  }, appliedButtonMenuProps, {
+    onClick: handleToggle
+  }), /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null))), /*#__PURE__*/_react.default.createElement(_Popper.default, {
+    transition: true,
+    anchorEl: anchorRef.current,
+    open: open,
+    role: undefined
+  }, function (_ref) {
+    var TransitionProps = _ref.TransitionProps,
+        placement = _ref.placement;
+    return /*#__PURE__*/_react.default.createElement(_Grow.default, _extends({}, TransitionProps, {
+      style: {
+        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+      }
+    }), /*#__PURE__*/_react.default.createElement(_Paper.default, null, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
+      onClickAway: handleClose
+    }, /*#__PURE__*/_react.default.createElement(_MenuList.default, {
+      id: "".concat(name, "-split-button-menu")
+    }, options.map(function (option, index) {
+      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+        key: option,
+        selected: option === stateSelectedOption,
+        onClick: function onClick(event) {
+          return handleMenuItemClick(event, index);
+        }
+      }, option);
+    })))));
+  })));
+};
+
+var WrappedSplitButton = _Theme.default.getWrappedComponent(SplitButton);
+
+var _default = WrappedSplitButton;
+exports.default = _default;
\ No newline at end of file
diff --git a/lib/components/Button/index.d.ts b/lib/components/Button/index.d.ts
new file mode 100644
index 00000000..3220a80f
--- /dev/null
+++ b/lib/components/Button/index.d.ts
@@ -0,0 +1 @@
+export { default } from "./SplitButton";
diff --git a/lib/components/Button/index.js b/lib/components/Button/index.js
new file mode 100644
index 00000000..451c5e72
--- /dev/null
+++ b/lib/components/Button/index.js
@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SplitButton.default;
+  }
+});
+
+var _SplitButton = _interopRequireDefault(require("./SplitButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
\ No newline at end of file
diff --git a/lib/components/Button/package.json b/lib/components/Button/package.json
new file mode 100644
index 00000000..7ae51b6e
--- /dev/null
+++ b/lib/components/Button/package.json
@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "name": "neon-buttons",
+  "main": "./SplitButton.tsx",
+  "module": "./SplitButton.tsx"
+}
diff --git a/lib/components/Documents/DocumentList.d.ts b/lib/components/Documents/DocumentList.d.ts
new file mode 100644
index 00000000..9e3f1fb1
--- /dev/null
+++ b/lib/components/Documents/DocumentList.d.ts
@@ -0,0 +1,11 @@
+import { DocumentListItemModel } from './DocumentListItem';
+import { Nullable } from '../../types/core';
+export interface DocumentListProps {
+    documents: DocumentListItemModel[];
+    makeDownloadableLink: Nullable<boolean>;
+    enableDownloadButton: Nullable<boolean>;
+    fetchVariants: Nullable<boolean>;
+    enableVariantChips: Nullable<boolean>;
+}
+declare const WrappedDocumentList: any;
+export default WrappedDocumentList;
diff --git a/lib/components/Documents/DocumentList.js b/lib/components/Documents/DocumentList.js
new file mode 100644
index 00000000..b9dc8470
--- /dev/null
+++ b/lib/components/Documents/DocumentList.js
@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _List = _interopRequireDefault(require("@material-ui/core/List"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _DocumentListItem = _interopRequireDefault(require("./DocumentListItem"));
+
+var _Theme = _interopRequireDefault(require("../Theme/Theme"));
+
+var _WarningCard = _interopRequireDefault(require("../Card/WarningCard"));
+
+var _typeUtil = require("../../util/typeUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = (0, _styles.makeStyles)(function (muiTheme) {
+  return (// eslint-disable-next-line implicit-arrow-linebreak
+    (0, _styles.createStyles)({
+      list: {
+        paddingTop: muiTheme.spacing(0)
+      }
+    })
+  );
+});
+
+var DocumentList = function DocumentList(props) {
+  var classes = useStyles(_Theme.default);
+  var documents = props.documents,
+      makeDownloadableLink = props.makeDownloadableLink,
+      enableDownloadButton = props.enableDownloadButton,
+      fetchVariants = props.fetchVariants,
+      enableVariantChips = props.enableVariantChips;
+
+  if (!(0, _typeUtil.existsNonEmpty)(documents)) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.container
+    }, /*#__PURE__*/_react.default.createElement(_WarningCard.default, {
+      title: "No Documents",
+      message: "No documents available to display"
+    }));
+  }
+
+  var renderDocuments = function renderDocuments() {
+    return documents.map(function (document, index) {
+      return /*#__PURE__*/_react.default.createElement(_DocumentListItem.default, {
+        key: document.name,
+        id: index,
+        document: document,
+        makeDownloadableLink: makeDownloadableLink === true,
+        enableDownloadButton: enableDownloadButton,
+        fetchVariants: fetchVariants,
+        enableVariantChips: enableVariantChips
+      });
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_List.default, {
+    dense: true,
+    className: classes.list
+  }, renderDocuments()));
+};
+
+var WrappedDocumentList = _Theme.default.getWrappedComponent(DocumentList);
+
+var _default = WrappedDocumentList;
+exports.default = _default;
\ No newline at end of file
diff --git a/lib/components/Documents/DocumentListItem.d.ts b/lib/components/Documents/DocumentListItem.d.ts
new file mode 100644
index 00000000..11c07fd7
--- /dev/null
+++ b/lib/components/Documents/DocumentListItem.d.ts
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Nullable, Undef } from '../../types/core';
+import { NeonDocument } from '../../types/neonApi';
+export interface DocumentListItemModel extends NeonDocument {
+    variants: NeonDocument[];
+}
+export interface DocumentListItemProps {
+    id: number;
+    document: DocumentListItemModel;
+    makeDownloadableLink: boolean;
+    enableDownloadButton: Nullable<boolean>;
+    fetchVariants: Nullable<boolean>;
+    enableVariantChips: Nullable<boolean>;
+    containerComponent: Undef<React.ElementType<React.HTMLAttributes<HTMLDivElement>>>;
+}
+declare const WrappedDocumentListItem: any;
+export default WrappedDocumentListItem;
diff --git a/lib/components/Documents/DocumentListItem.js b/lib/components/Documents/DocumentListItem.js
new file mode 100644
index 00000000..28be846b
--- /dev/null
+++ b/lib/components/Documents/DocumentListItem.js
@@ -0,0 +1,672 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rxjs = require("rxjs");
+
+var _operators = require("rxjs/operators");
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+
+var _ListItemSecondaryAction = _interopRequireDefault(require("@material-ui/core/ListItemSecondaryAction"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _SaveAlt = _interopRequireDefault(require("@material-ui/icons/SaveAlt"));
+
+var _NeonApi = _interopRequireDefault(require("../NeonApi"));
+
+var _SplitButton = _interopRequireDefault(require("../Button/SplitButton"));
+
+var _Theme = _interopRequireDefault(require("../Theme/Theme"));
+
+var _WarningCard = _interopRequireDefault(require("../Card/WarningCard"));
+
+var _DocumentParser = _interopRequireDefault(require("../../parser/DocumentParser"));
+
+var _DocumentService = _interopRequireDefault(require("../../service/DocumentService"));
+
+var _typeUtil = require("../../util/typeUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var COMPONENT_XS_UPPER = 480;
+var COMPONENT_SM_UPPER = 805;
+var useStyles = (0, _styles.makeStyles)(function (muiTheme) {
+  return (0, _styles.createStyles)({
+    listItemContainer: {
+      display: 'flex'
+    },
+    listItem: {
+      display: 'flex',
+      wordBreak: 'break-word',
+      paddingLeft: muiTheme.spacing(1),
+      '& p': {
+        marginTop: muiTheme.spacing(0.5),
+        '& > span > span': {
+          whiteSpace: 'nowrap'
+        }
+      }
+    },
+    listItemSecondarySpacer: {
+      margin: muiTheme.spacing(0, 2),
+      color: muiTheme.palette.grey[200]
+    },
+    listItemIcon: {
+      minWidth: muiTheme.spacing(4),
+      marginRight: muiTheme.spacing(1)
+    },
+    fileTypeChip: {
+      marginRight: '5px',
+      '&:last-child': {
+        marginRight: '0px'
+      }
+    },
+    fileTypeChipSelected: {
+      marginRight: '5px',
+      fontWeight: 500
+    },
+    variantFetchingLabel: {
+      lineHeight: '24px'
+    },
+    variantFetchingProgress: {
+      marginRight: '36px',
+      marginLeft: '36px'
+    },
+    downloadErrorContainer: {
+      marginTop: muiTheme.spacing(2)
+    }
+  });
+});
+var useListItemSecondaryActionStyles = (0, _styles.makeStyles)(function (muiTheme) {
+  return (// eslint-disable-next-line implicit-arrow-linebreak
+    (0, _styles.createStyles)({
+      root: {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'unset',
+        transform: 'unset',
+        top: 'unset',
+        right: 'unset',
+        whiteSpace: 'nowrap'
+      }
+    })
+  );
+});
+var ActionTypes;
+
+(function (ActionTypes) {
+  ActionTypes["FETCH_VARIANTS_STARTED"] = "FETCH_VARIANTS_STARTED";
+  ActionTypes["FETCH_VARIANTS_FAILED"] = "FETCH_VARIANTS_FAILED";
+  ActionTypes["FETCH_VARIANTS_SUCCEEDED"] = "FETCH_VARIANTS_SUCCEEDED";
+  ActionTypes["SET_SELECTED_VARIANT"] = "SET_SELECTED_VARIANT";
+  ActionTypes["DOWNLOAD_IDLE"] = "DOWNLOAD_IDLE";
+  ActionTypes["DOWNLOAD_STARTED"] = "DOWNLOAD_STARTED";
+  ActionTypes["DOWNLOAD_FAILED"] = "DOWNLOAD_FAILED";
+})(ActionTypes || (ActionTypes = {}));
+
+var ActionCreator = {
+  fetchVariantsStarted: function fetchVariantsStarted() {
+    return {
+      type: ActionTypes.FETCH_VARIANTS_STARTED
+    };
+  },
+  fetchVariantsFailed: function fetchVariantsFailed(error) {
+    return {
+      type: ActionTypes.FETCH_VARIANTS_FAILED,
+      error: error
+    };
+  },
+  fetchVariantsSucceeded: function fetchVariantsSucceeded(variants) {
+    return {
+      type: ActionTypes.FETCH_VARIANTS_SUCCEEDED,
+      variants: variants
+    };
+  },
+  setSelectedVariant: function setSelectedVariant(variant) {
+    return {
+      type: ActionTypes.SET_SELECTED_VARIANT,
+      variant: variant
+    };
+  },
+  downloadIdle: function downloadIdle() {
+    return {
+      type: ActionTypes.DOWNLOAD_IDLE
+    };
+  },
+  downloadStarted: function downloadStarted() {
+    return {
+      type: ActionTypes.DOWNLOAD_STARTED
+    };
+  },
+  downloadFailed: function downloadFailed() {
+    return {
+      type: ActionTypes.DOWNLOAD_FAILED
+    };
+  }
+};
+var FetchStatus;
+
+(function (FetchStatus) {
+  FetchStatus["AWAITING_CALL"] = "AWAITING_CALL";
+  FetchStatus["FETCHING"] = "FETCHING";
+  FetchStatus["ERROR"] = "ERROR";
+  FetchStatus["SUCCESS"] = "SUCCESS";
+  FetchStatus["IDLE"] = "IDLE";
+})(FetchStatus || (FetchStatus = {}));
+
+var DEFAULT_STATE = {
+  fetchVariants: {
+    status: FetchStatus.IDLE,
+    error: null
+  },
+  variants: [],
+  selectedVariant: null,
+  downloadStatus: FetchStatus.IDLE
+};
+
+var documentListItemReducer = function documentListItemReducer(state, action) {
+  var newState = _extends({}, state);
+
+  var fetchVariantFailedAction;
+  var fetchVariantSucceededAction;
+  var setSelectedVariantAction;
+
+  switch (action.type) {
+    case ActionTypes.FETCH_VARIANTS_STARTED:
+      newState.fetchVariants.status = FetchStatus.FETCHING;
+      return newState;
+
+    case ActionTypes.FETCH_VARIANTS_FAILED:
+      fetchVariantFailedAction = action;
+      newState.fetchVariants.status = FetchStatus.ERROR;
+      newState.fetchVariants.error = fetchVariantFailedAction.error;
+      return newState;
+
+    case ActionTypes.FETCH_VARIANTS_SUCCEEDED:
+      fetchVariantSucceededAction = action;
+      newState.fetchVariants.status = FetchStatus.SUCCESS;
+      newState.variants = fetchVariantSucceededAction.variants;
+
+      if (!(0, _typeUtil.exists)(newState.selectedVariant) && (0, _typeUtil.existsNonEmpty)(newState.variants)) {
+        // eslint-disable-next-line prefer-destructuring
+        newState.selectedVariant = newState.variants[0];
+      }
+
+      return newState;
+
+    case ActionTypes.SET_SELECTED_VARIANT:
+      setSelectedVariantAction = action;
+      newState.selectedVariant = setSelectedVariantAction.variant;
+      return newState;
+
+    case ActionTypes.DOWNLOAD_IDLE:
+      newState.downloadStatus = FetchStatus.IDLE;
+      return newState;
+
+    case ActionTypes.DOWNLOAD_STARTED:
+      newState.downloadStatus = FetchStatus.FETCHING;
+      return newState;
+
+    case ActionTypes.DOWNLOAD_FAILED:
+      newState.downloadStatus = FetchStatus.ERROR;
+      return newState;
+
+    default:
+      return newState;
+  }
+};
+
+var DocumentListItem = function DocumentListItem(props) {
+  var id = props.id,
+      document = props.document,
+      makeDownloadableLink = props.makeDownloadableLink,
+      enableDownloadButton = props.enableDownloadButton,
+      fetchVariants = props.fetchVariants,
+      enableVariantChips = props.enableVariantChips,
+      containerComponent = props.containerComponent;
+  var classes = useStyles(_Theme.default);
+  var listItemSecondaryActionClasses = useListItemSecondaryActionStyles(_Theme.default);
+  var containerRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      componentWidth = _useState2[0],
+      setComponentWidth = _useState2[1];
+
+  var atComponentXs = false;
+  var atComponentSm = false;
+
+  if (componentWidth > 0) {
+    atComponentXs = componentWidth <= COMPONENT_XS_UPPER;
+    atComponentSm = componentWidth >= COMPONENT_XS_UPPER && componentWidth < COMPONENT_SM_UPPER;
+  }
+
+  var _useReducer = (0, _react.useReducer)(documentListItemReducer, (0, _cloneDeep.default)(DEFAULT_STATE)),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var fetchVariantStatus = state.fetchVariants.status,
+      stateVariants = state.variants,
+      stateSelectedVariant = state.selectedVariant,
+      downloadStatus = state.downloadStatus;
+  var hasDocument = (0, _typeUtil.exists)(document);
+  var hasProvidedVariants = hasDocument && (0, _typeUtil.existsNonEmpty)(document.variants);
+
+  var isQsg = _DocumentService.default.isQuickStartGuide(document);
+
+  var appliedFetchVariants = !hasProvidedVariants && fetchVariants === true;
+  var requireVariantFetch = isQsg && appliedFetchVariants && fetchVariantStatus === FetchStatus.IDLE;
+  (0, _react.useEffect)(function () {
+    if (!hasDocument || !requireVariantFetch) {
+      return;
+    }
+
+    var qsgParsedName = _DocumentService.default.parseQuickStartGuideName(document.name);
+
+    if (!(0, _typeUtil.exists)(qsgParsedName)) {
+      return;
+    }
+
+    var coercedParsedName = qsgParsedName;
+
+    var variantObs = _NeonApi.default.getQuickStartGuideDetailObservable(coercedParsedName.matchedName, coercedParsedName.matchedVersion).pipe((0, _operators.map)(function (response) {
+      if (!(0, _typeUtil.exists)(response) || !(0, _typeUtil.exists)(response.data)) {
+        dispatch(ActionCreator.fetchVariantsFailed('Failed to fetch variants'));
+        return (0, _rxjs.of)(false);
+      }
+
+      var qsgResponse = _DocumentParser.default.parseQuickStartGuideVersionResponse(response);
+
+      if (!(0, _typeUtil.exists)(qsgResponse)) {
+        dispatch(ActionCreator.fetchVariantsFailed('Failed to fetch variants'));
+        return (0, _rxjs.of)(false);
+      }
+
+      var coercedQsgDocumentResponse = qsgResponse;
+      var qsgDocuments = coercedQsgDocumentResponse.documents;
+
+      var variantDocuments = _DocumentService.default.transformQuickStartGuideDocuments(qsgDocuments);
+
+      if (!(0, _typeUtil.existsNonEmpty)(variantDocuments)) {
+        dispatch(ActionCreator.fetchVariantsFailed('Failed to fetch variants'));
+        return (0, _rxjs.of)(false);
+      }
+
+      dispatch(ActionCreator.fetchVariantsSucceeded(variantDocuments));
+      return (0, _rxjs.of)(true);
+    }), (0, _operators.catchError)(function (error) {
+      dispatch(ActionCreator.fetchVariantsFailed(error));
+      return (0, _rxjs.of)(false);
+    }));
+
+    dispatch(ActionCreator.fetchVariantsStarted());
+    variantObs.subscribe();
+  }, [hasDocument, requireVariantFetch, document]);
+  var handleSelectedVariantChanged = (0, _react.useCallback)(function (selectedVariantCb) {
+    dispatch(ActionCreator.setSelectedVariant(selectedVariantCb));
+  }, [dispatch]);
+  var handleDownloadIdle = (0, _react.useCallback)(function () {
+    dispatch(ActionCreator.downloadIdle());
+  }, [dispatch]);
+  var handleDownloadStarted = (0, _react.useCallback)(function () {
+    dispatch(ActionCreator.downloadStarted());
+  }, [dispatch]);
+  var handleDownloadFailed = (0, _react.useCallback)(function () {
+    dispatch(ActionCreator.downloadFailed());
+  }, [dispatch]);
+  var handleResizeCb = (0, _react.useCallback)(function () {
+    var container = containerRef.current;
+
+    if (!container) {
+      return;
+    }
+
+    if (container.clientWidth === componentWidth) {
+      return;
+    }
+
+    setComponentWidth(container.clientWidth);
+  }, [containerRef, componentWidth, setComponentWidth]);
+  (0, _react.useLayoutEffect)(function () {
+    var element = containerRef.current;
+
+    if (!element) {
+      return function () {};
+    }
+
+    handleResizeCb();
+
+    if (typeof ResizeObserver !== 'function') {
+      window.addEventListener('resize', handleResizeCb);
+      return function () {
+        window.removeEventListener('resize', handleResizeCb);
+      };
+    }
+
+    var resizeObserver = new ResizeObserver(handleResizeCb);
+    resizeObserver.observe(element);
+    return function () {
+      if (!resizeObserver) {
+        return;
+      }
+
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    };
+  }, [containerRef, handleResizeCb]);
+
+  if (!hasDocument) {
+    return null;
+  }
+
+  var isFetchingVariants = fetchVariantStatus === FetchStatus.FETCHING;
+  var appliedDocument = (0, _typeUtil.exists)(stateSelectedVariant) ? stateSelectedVariant : document;
+  var appliedVariants = appliedFetchVariants ? stateVariants : document.variants;
+  var hasAppliedVariants = (0, _typeUtil.existsNonEmpty)(appliedVariants);
+  var isDownloading = downloadStatus === FetchStatus.FETCHING;
+  var isDownloadError = downloadStatus === FetchStatus.ERROR;
+
+  var documentType = _DocumentService.default.resolveDocumentType(appliedDocument);
+
+  var typeTitle = documentType.title,
+      TypeIcon = documentType.Icon;
+  var typeTitleString = typeTitle(appliedDocument.type);
+  var primary = (0, _typeUtil.isStringNonEmpty)(appliedDocument.description) ? appliedDocument.description : /*#__PURE__*/_react.default.createElement("i", null, "No description");
+
+  var spacer = /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.listItemSecondarySpacer
+  }, "|");
+
+  var renderTypes = function renderTypes() {
+    if (!(enableVariantChips === true)) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        title: "file type: ".concat(typeTitleString)
+      }, typeTitleString);
+    }
+
+    if (isFetchingVariants) {
+      return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        variant: "caption",
+        className: classes.variantFetchingLabel
+      }, "Determining variants...");
+    }
+
+    if (!hasAppliedVariants) {
+      return /*#__PURE__*/_react.default.createElement(_Chip.default, {
+        key: appliedDocument.name,
+        variant: undefined,
+        className: classes.fileTypeChipSelected,
+        style: {
+          marginRight: '0px'
+        },
+        component: "span",
+        size: "small",
+        label: typeTitleString
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, appliedVariants.map(function (variant, index) {
+      var variantTypeTitleString = _DocumentService.default.getDocumentTypeTitle(variant);
+
+      var isSelected = appliedDocument.name === variant.name;
+      var isLast = index === appliedVariants.length - 1;
+      return /*#__PURE__*/_react.default.createElement(_Chip.default, {
+        key: variant.name,
+        variant: isSelected ? undefined : 'outlined',
+        className: isSelected ? classes.fileTypeChipSelected : classes.fileTypeChip,
+        style: {
+          marginRight: isLast ? '0px' : undefined
+        },
+        component: "span",
+        size: "small",
+        label: variantTypeTitleString,
+        disabled: isDownloading || isDownloadError,
+        onClick: function onClick(event) {
+          handleSelectedVariantChanged(variant);
+        }
+      });
+    }));
+  };
+
+  var renderSecondaryItem = function renderSecondaryItem() {
+    var sizeDisplay = /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", null, "n/a"));
+
+    if (appliedDocument.size) {
+      sizeDisplay = /*#__PURE__*/_react.default.createElement("span", {
+        title: "file size: ".concat(_DocumentService.default.formatBytes(appliedDocument.size))
+      }, _DocumentService.default.formatBytes(appliedDocument.size));
+    }
+
+    var fileNumber = /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        whiteSpace: 'break-spaces'
+      },
+      title: "file number: ".concat(appliedDocument.name)
+    }, appliedDocument.name);
+
+    if (atComponentSm || atComponentXs) {
+      if (hasAppliedVariants) {
+        return /*#__PURE__*/_react.default.createElement("span", null, fileNumber, /*#__PURE__*/_react.default.createElement("span", {
+          style: {
+            height: '5px',
+            display: 'block'
+          }
+        }), renderTypes(), /*#__PURE__*/_react.default.createElement("span", {
+          style: {
+            height: '5px',
+            display: 'block'
+          }
+        }), sizeDisplay);
+      }
+
+      return /*#__PURE__*/_react.default.createElement("span", null, fileNumber, /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          height: '5px',
+          display: 'block'
+        }
+      }), renderTypes(), spacer, sizeDisplay);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", null, renderTypes(), spacer, sizeDisplay, spacer, fileNumber);
+  };
+
+  var renderAction = function renderAction() {
+    if (!(enableDownloadButton === true)) return null;
+
+    if (isFetchingVariants) {
+      return /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, {
+        classes: listItemSecondaryActionClasses
+      }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+        size: 36,
+        className: classes.variantFetchingProgress
+      }));
+    }
+
+    if (atComponentXs) {
+      return /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, {
+        classes: listItemSecondaryActionClasses
+      }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+        placement: "top",
+        title: "Download ".concat(appliedDocument.name)
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+        color: "primary",
+        disabled: isDownloading || isDownloadError,
+        onClick: function onClick() {
+          handleDownloadStarted();
+
+          _DocumentService.default.downloadDocument(appliedDocument, function (downloadDoc) {
+            return handleDownloadIdle();
+          }, function (downloadDoc) {
+            return handleDownloadFailed();
+          });
+        }
+      }, isDownloading ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+        size: 18
+      }) : /*#__PURE__*/_react.default.createElement(_SaveAlt.default, {
+        fontSize: "small"
+      })))));
+    }
+
+    var button = !hasAppliedVariants ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+      variant: "outlined",
+      disabled: isDownloading || isDownloadError,
+      startIcon: isDownloading ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+        size: 18
+      }) : /*#__PURE__*/_react.default.createElement(_SaveAlt.default, {
+        fontSize: "small"
+      }),
+      onClick: function onClick() {
+        handleDownloadStarted();
+
+        _DocumentService.default.downloadDocument(appliedDocument, function (downloadDoc) {
+          return handleDownloadIdle();
+        }, function (downloadDoc) {
+          return handleDownloadFailed();
+        });
+      }
+    }, "Download") : /*#__PURE__*/_react.default.createElement(_SplitButton.default, {
+      name: "".concat(appliedDocument.name, "-document-list-item-download-split-button"),
+      selectedOption: "".concat(typeTitleString),
+      selectedOptionDisplayCallback: function selectedOptionDisplayCallback(selectedOption) {
+        return "Download ".concat(selectedOption);
+      },
+      options: appliedVariants.map(function (variant) {
+        return _DocumentService.default.getDocumentTypeTitle(variant);
+      }),
+      onClick: function onClick(option) {
+        var nextSelectedVariant = _DocumentService.default.findFirstByDocumentTypeTitle(appliedVariants, option);
+
+        if ((0, _typeUtil.exists)(nextSelectedVariant)) {
+          var coercedDownloadVariant = nextSelectedVariant;
+          handleDownloadStarted();
+
+          _DocumentService.default.downloadDocument(coercedDownloadVariant, function (downloadDoc) {
+            return handleDownloadIdle();
+          }, function (downloadDoc) {
+            return handleDownloadFailed();
+          });
+        }
+      },
+      onChange: function onChange(option) {
+        var nextSelectedVariant = _DocumentService.default.findFirstByDocumentTypeTitle(appliedVariants, option);
+
+        if ((0, _typeUtil.exists)(nextSelectedVariant)) {
+          handleSelectedVariantChanged(nextSelectedVariant);
+        }
+      },
+      buttonGroupProps: {
+        size: 'small',
+        variant: 'outlined',
+        color: 'primary'
+      },
+      buttonMenuProps: {
+        size: 'small',
+        color: 'primary',
+        disabled: isDownloading || isDownloadError
+      },
+      buttonProps: {
+        size: 'small',
+        color: 'primary',
+        disabled: isDownloading || isDownloadError,
+        startIcon: isDownloading ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+          size: 18
+        }) : /*#__PURE__*/_react.default.createElement(_SaveAlt.default, {
+          fontSize: "small"
+        })
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, {
+      classes: listItemSecondaryActionClasses
+    }, button);
+  };
+
+  var renderDownloadError = function renderDownloadError() {
+    if (!isDownloadError) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.downloadErrorContainer
+    }, /*#__PURE__*/_react.default.createElement(_WarningCard.default, {
+      title: "Document download is currently unavailable for \"".concat(appliedDocument.name, ".\""),
+      onActionClick: function onActionClick() {
+        return handleDownloadIdle();
+      }
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    ref: containerRef,
+    key: id,
+    className: classes.listItem,
+    component: "div",
+    ContainerComponent: containerComponent,
+    ContainerProps: {
+      className: classes.listItemContainer
+    },
+    title: makeDownloadableLink ? "Click to download ".concat(document.name) : undefined // @ts-ignore
+    ,
+    button: makeDownloadableLink,
+    onClick: !makeDownloadableLink ? undefined : function () {
+      handleDownloadStarted();
+
+      _DocumentService.default.downloadDocument(appliedDocument, function (downloadDoc) {
+        return handleDownloadIdle();
+      }, function (downloadDoc) {
+        return handleDownloadFailed();
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
+    className: classes.listItemIcon
+  }, /*#__PURE__*/_react.default.createElement(TypeIcon, null)), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: primary,
+    secondary: renderSecondaryItem()
+  }), renderAction()), renderDownloadError());
+};
+
+var WrappedDocumentListItem = _Theme.default.getWrappedComponent(DocumentListItem);
+
+var _default = WrappedDocumentListItem;
+exports.default = _default;
\ No newline at end of file
diff --git a/lib/components/Documents/DocumentSelect.d.ts b/lib/components/Documents/DocumentSelect.d.ts
new file mode 100644
index 00000000..586621ff
--- /dev/null
+++ b/lib/components/Documents/DocumentSelect.d.ts
@@ -0,0 +1,6 @@
+import { NeonDocument } from '../../types/neonApi';
+export interface DocumentSelectProps {
+    documents: NeonDocument[];
+}
+declare const WrappedDocumentSelect: any;
+export default WrappedDocumentSelect;
diff --git a/lib/components/Documents/DocumentSelect.js b/lib/components/Documents/DocumentSelect.js
new file mode 100644
index 00000000..a6f86a88
--- /dev/null
+++ b/lib/components/Documents/DocumentSelect.js
@@ -0,0 +1,168 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _DocumentListItem = _interopRequireDefault(require("./DocumentListItem"));
+
+var _DocumentService = _interopRequireDefault(require("../../service/DocumentService"));
+
+var _DocumentViewer = _interopRequireDefault(require("./DocumentViewer"));
+
+var _NeonEnvironment = _interopRequireDefault(require("../NeonEnvironment"));
+
+var _Theme = _interopRequireDefault(require("../Theme/Theme"));
+
+var _WarningCard = _interopRequireDefault(require("../Card/WarningCard"));
+
+var _typeUtil = require("../../util/typeUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useStyles = (0, _styles.makeStyles)(function (muiTheme) {
+  return (// eslint-disable-next-line implicit-arrow-linebreak
+    (0, _styles.createStyles)({
+      container: {
+        width: '100%'
+      },
+      selectContainer: {
+        width: '100%',
+        padding: muiTheme.spacing(3, 0)
+      },
+      selectFormControl: {
+        width: '100%'
+      }
+    })
+  );
+});
+
+var DocumentSelect = function DocumentSelect(props) {
+  var classes = useStyles(_Theme.default);
+  var documents = props.documents;
+  var hasDocuments = (0, _typeUtil.existsNonEmpty)(documents);
+  var initialValue = '';
+
+  if (hasDocuments) {
+    initialValue = documents[0].name;
+  }
+
+  var _useState = (0, _react.useState)(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedDoc = _useState2[0],
+      setSelectedDoc = _useState2[1];
+
+  if (!hasDocuments) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.container
+    }, /*#__PURE__*/_react.default.createElement(_WarningCard.default, {
+      title: "No Documents",
+      message: "No documents available to display"
+    }));
+  }
+
+  var renderSelectedDocument = function renderSelectedDocument() {
+    var matchedDoc = documents.find(function (doc) {
+      return (0, _typeUtil.exists)(doc) && (0, _typeUtil.isStringNonEmpty)(doc.name) && doc.name.localeCompare(selectedDoc) === 0;
+    });
+
+    if (!(0, _typeUtil.exists)(matchedDoc)) {
+      return /*#__PURE__*/_react.default.createElement(_WarningCard.default, {
+        title: "Document Not Found",
+        message: "Document could not be found"
+      });
+    }
+
+    var coercedMatchedDoc = matchedDoc;
+    var fullUrlPath = _DocumentService.default.isQuickStartGuide(coercedMatchedDoc) ? "".concat(_NeonEnvironment.default.getFullApiPath('quickStartGuides')) : "".concat(_NeonEnvironment.default.getFullApiPath('documents'));
+    return /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
+      document: coercedMatchedDoc,
+      width: 600,
+      fullUrlPath: fullUrlPath
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    spacing: 3
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    variant: "outlined",
+    className: classes.selectFormControl
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+    htmlFor: "document-select-input"
+  }, "Select Document to View"), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    fullWidth: true,
+    id: "document-select",
+    inputProps: {
+      name: 'Select Document to View',
+      id: 'document-select-input'
+    },
+    label: "Select Document to View",
+    "aria-labelledby": "document-select-label",
+    value: selectedDoc,
+    onChange: function onChange(event) {
+      var nextDoc = documents.find(function (doc) {
+        return doc.name.localeCompare(event.target.value) === 0;
+      });
+
+      if ((0, _typeUtil.exists)(nextDoc)) {
+        setSelectedDoc(nextDoc.name);
+      }
+    }
+  }, documents.map(function (doc, index) {
+    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: doc.name,
+      value: doc.name
+    }, /*#__PURE__*/_react.default.createElement(_DocumentListItem.default, {
+      id: index,
+      document: doc,
+      makeDownloadableLink: false
+    }));
+  })))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: 12
+  }, renderSelectedDocument())));
+};
+
+var WrappedDocumentSelect = _Theme.default.getWrappedComponent(DocumentSelect);
+
+var _default = WrappedDocumentSelect;
+exports.default = _default;
\ No newline at end of file
diff --git a/lib/components/Documents/DocumentTabs.d.ts b/lib/components/Documents/DocumentTabs.d.ts
new file mode 100644
index 00000000..6283d64e
--- /dev/null
+++ b/lib/components/Documents/DocumentTabs.d.ts
@@ -0,0 +1,6 @@
+import { NeonDocument } from '../../types/neonApi';
+export interface DocumentTabsProps {
+    documents: NeonDocument[];
+}
+declare const WrappedDocumentTabs: any;
+export default WrappedDocumentTabs;
diff --git a/lib/components/Documents/DocumentTabs.js b/lib/components/Documents/DocumentTabs.js
new file mode 100644
index 00000000..fcd68d3f
--- /dev/null
+++ b/lib/components/Documents/DocumentTabs.js
@@ -0,0 +1,205 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
+
+var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _DocumentListItem = _interopRequireDefault(require("./DocumentListItem"));
+
+var _DocumentService = _interopRequireDefault(require("../../service/DocumentService"));
+
+var _DocumentViewer = _interopRequireDefault(require("./DocumentViewer"));
+
+var _NeonEnvironment = _interopRequireDefault(require("../NeonEnvironment"));
+
+var _Theme = _interopRequireDefault(require("../Theme/Theme"));
+
+var _WarningCard = _interopRequireDefault(require("../Card/WarningCard"));
+
+var _typeUtil = require("../../util/typeUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useStyles = (0, _styles.makeStyles)(function (muiTheme) {
+  return (// eslint-disable-next-line implicit-arrow-linebreak
+    (0, _styles.createStyles)({
+      container: {
+        width: '100%',
+        display: 'flex',
+        margin: muiTheme.spacing(0, -0.5, -0.5, -0.5),
+        flexDirection: 'column'
+      },
+      tabPanels: {
+        width: '100%',
+        backgroundColor: '#fff'
+      },
+      tabContentContainer: {
+        width: '100%',
+        padding: muiTheme.spacing(3, 3, 3, 3)
+      }
+    })
+  );
+});
+var useTabsStyles = (0, _styles.makeStyles)(function (muiTheme) {
+  return (// eslint-disable-next-line implicit-arrow-linebreak
+    (0, _styles.createStyles)({
+      scroller: {
+        backgroundColor: muiTheme.palette.grey[200]
+      },
+      scrollButtons: {
+        '&.Mui-disabled': {
+          opacity: 0.6
+        }
+      }
+    })
+  );
+});
+var useTabStyles = (0, _styles.makeStyles)(function (muiTheme) {
+  return (// eslint-disable-next-line implicit-arrow-linebreak
+    (0, _styles.createStyles)({
+      root: {
+        textTransform: 'none',
+        opacity: 1,
+        maxWidth: 464
+      },
+      wrapper: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& svg': {
+          margin: "".concat(muiTheme.spacing(0, 1, 0, 0), " !important")
+        }
+      },
+      selected: {
+        borderBottom: 'none'
+      }
+    })
+  );
+});
+
+var DocumentTabs = function DocumentTabs(props) {
+  var classes = useStyles(_Theme.default);
+  var tabClasses = useTabStyles(_Theme.default);
+  var tabsClasses = useTabsStyles(_Theme.default);
+  var documents = props.documents;
+  var initialTabIdx = 0;
+
+  var _useState = (0, _react.useState)(initialTabIdx),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedTab = _useState2[0],
+      setSelectedTab = _useState2[1];
+
+  if (!(0, _typeUtil.existsNonEmpty)(documents)) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.container
+    }, /*#__PURE__*/_react.default.createElement(_WarningCard.default, {
+      title: "No Documents",
+      message: "No documents available to display"
+    }));
+  }
+
+  var docTabs = documents.map(function (doc, index) {
+    return {
+      document: doc,
+      index: index
+    };
+  });
+
+  var renderTabs = function renderTabs() {
+    return /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+      orientation: "horizontal",
+      scrollButtons: "on",
+      variant: "scrollable",
+      value: selectedTab,
+      "aria-label": "Document Tabs",
+      classes: tabsClasses,
+      onChange: function onChange(event, newTab) {
+        setSelectedTab(newTab);
+      },
+      TabIndicatorProps: {
+        style: {
+          display: 'none'
+        }
+      }
+    }, docTabs.map(function (docTab) {
+      return /*#__PURE__*/_react.default.createElement(_Tab.default, {
+        key: docTab.index,
+        value: docTab.index,
+        label: /*#__PURE__*/_react.default.createElement(_DocumentListItem.default, {
+          id: docTab.index,
+          document: docTab.document,
+          makeDownloadableLink: false
+        }),
+        "aria-label": docTab.document.name,
+        classes: tabClasses,
+        id: "document-tabs-tab-".concat(docTab.index),
+        "aria-controls": "document-tabs-tabpanel-".concat(docTab.index)
+      });
+    }));
+  };
+
+  var renderTabContent = function renderTabContent(documentTab) {
+    var document = documentTab.document,
+        index = documentTab.index;
+    var fullUrlPath = _DocumentService.default.isQuickStartGuide(document) ? "".concat(_NeonEnvironment.default.getFullApiPath('quickStartGuides')) : "".concat(_NeonEnvironment.default.getFullApiPath('documents'));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      role: "tabpanel",
+      id: "document-tabs-tabpanel-".concat(index),
+      "aria-labelledby": "document-tabs-tab-".concat(index),
+      style: {
+        display: selectedTab === index ? 'block' : 'none'
+      },
+      className: classes.tabContentContainer
+    }, /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
+      document: document,
+      width: 600,
+      fullUrlPath: fullUrlPath
+    }));
+  };
+
+  var renderTabPanels = function renderTabPanels() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.tabPanels
+    }, docTabs.map(function (docTab) {
+      return renderTabContent(docTab);
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, renderTabs(), renderTabPanels());
+};
+
+var WrappedDocumentTabs = _Theme.default.getWrappedComponent(DocumentTabs);
+
+var _default = WrappedDocumentTabs;
+exports.default = _default;
\ No newline at end of file
diff --git a/lib/components/DocumentViewer/DocumentViewer.d.ts b/lib/components/Documents/DocumentViewer.d.ts
similarity index 90%
rename from lib/components/DocumentViewer/DocumentViewer.d.ts
rename to lib/components/Documents/DocumentViewer.d.ts
index 41667356..158dcb96 100644
--- a/lib/components/DocumentViewer/DocumentViewer.d.ts
+++ b/lib/components/Documents/DocumentViewer.d.ts
@@ -3,6 +3,7 @@ import { NeonDocument } from '../../types/neonApi';
 export interface DocumentViewerProps {
     document: NeonDocument;
     width: number;
+    fullUrlPath?: string;
 }
 declare const DocumentViewer: React.FC<DocumentViewerProps>;
 export default DocumentViewer;
diff --git a/lib/components/DocumentViewer/DocumentViewer.js b/lib/components/Documents/DocumentViewer.js
similarity index 76%
rename from lib/components/DocumentViewer/DocumentViewer.js
rename to lib/components/Documents/DocumentViewer.js
index f7aeaee4..f1091d39 100644
--- a/lib/components/DocumentViewer/DocumentViewer.js
+++ b/lib/components/Documents/DocumentViewer.js
@@ -11,10 +11,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styles = require("@material-ui/core/styles");
 
+var _DocumentService = _interopRequireDefault(require("../../service/DocumentService"));
+
+var _ErrorCard = _interopRequireDefault(require("../Card/ErrorCard"));
+
 var _NeonEnvironment = _interopRequireDefault(require("../NeonEnvironment"));
 
 var _Theme = _interopRequireDefault(require("../Theme/Theme"));
 
+var _typeUtil = require("../../util/typeUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,8 +43,10 @@ var useStyles = (0, _styles.makeStyles)(function (muiTheme) {
   return (// eslint-disable-next-line implicit-arrow-linebreak
     (0, _styles.createStyles)({
       container: {
-        width: '100%',
-        margin: muiTheme.spacing(3, 3, 3, 3)
+        width: '100%'
+      },
+      iframe: {
+        border: 'none'
       }
     })
   );
@@ -47,7 +55,7 @@ var useStyles = (0, _styles.makeStyles)(function (muiTheme) {
 var noop = function noop() {};
 
 var breakpoints = [0, 675, 900, 1200];
-var ratios = ['8:11', '3:4', '3:4', '3:4'];
+var ratios = ['8:11', '3:4', '4:4', '4:3'];
 
 var calcAutoHeight = function calcAutoHeight(width) {
   var breakIdx = breakpoints.reduce(function (acc, breakpoint, idx) {
@@ -66,9 +74,12 @@ var calcAutoHeight = function calcAutoHeight(width) {
 var DocumentViewer = function DocumentViewer(props) {
   var classes = useStyles(_Theme.default);
   var document = props.document,
-      width = props.width;
+      width = props.width,
+      fullUrlPath = props.fullUrlPath;
+  var appliedUrlPath = (0, _typeUtil.isStringNonEmpty)(fullUrlPath) ? fullUrlPath : _NeonEnvironment.default.getFullApiPath('documents');
+  var dataUrl = "".concat(appliedUrlPath, "/").concat(document.name, "?inline=true&fallback=html");
   var containerRef = (0, _react.useRef)();
-  var embedRef = (0, _react.useRef)();
+  var iframeRef = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(width),
       _useState2 = _slicedToArray(_useState, 2),
@@ -77,15 +88,15 @@ var DocumentViewer = function DocumentViewer(props) {
 
   var handleResizeCb = (0, _react.useCallback)(function () {
     var container = containerRef.current;
-    var embed = embedRef.current; // Do nothing if either container or viz references fail ot point to a DOM node
+    var iframeElement = iframeRef.current; // Do nothing if either container or viz references fail ot point to a DOM node
 
-    if (!container || !embed) {
+    if (!container || !iframeElement) {
       return;
     } // Do nothing if either refs have no offset parent
     // (meaning they're hidden from rendering anyway)
 
 
-    if (container.offsetParent === null || embed.offsetParent === null) {
+    if (container.offsetParent === null || iframeElement.offsetParent === null) {
       return;
     } // Do nothing if container and viz have the same width
     // (resize event fired but no actual resize necessary)
@@ -97,11 +108,11 @@ var DocumentViewer = function DocumentViewer(props) {
 
     var newWidth = container.clientWidth;
     setViewerWidth(newWidth);
-    embed.setAttribute('width', "".concat(newWidth));
-    embed.setAttribute('height', "".concat(calcAutoHeight(newWidth)));
-  }, [containerRef, embedRef, viewerWidth, setViewerWidth]);
+    iframeElement.setAttribute('width', "".concat(newWidth));
+    iframeElement.setAttribute('height', "".concat(calcAutoHeight(newWidth)));
+  }, [containerRef, iframeRef, viewerWidth, setViewerWidth]);
   (0, _react.useLayoutEffect)(function () {
-    var element = embedRef.current;
+    var element = iframeRef.current;
 
     if (!element) {
       return noop;
@@ -132,18 +143,31 @@ var DocumentViewer = function DocumentViewer(props) {
       resizeObserver.disconnect();
       resizeObserver = null;
     };
-  }, [embedRef, handleResizeCb]);
+  }, [iframeRef, handleResizeCb]);
+
+  var renderObject = function renderObject() {
+    if (!_DocumentService.default.isViewerSupported(document)) {
+      return /*#__PURE__*/_react.default.createElement(_ErrorCard.default, {
+        title: "Document Error",
+        message: "This document type is not supported or could not be displayed"
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement("iframe", {
+      ref: iframeRef,
+      src: dataUrl,
+      "aria-label": document.description,
+      title: document.description,
+      width: viewerWidth,
+      height: calcAutoHeight(viewerWidth),
+      className: classes.iframe
+    });
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     className: classes.container
-  }, /*#__PURE__*/_react.default.createElement("embed", {
-    ref: embedRef,
-    type: document.type,
-    src: "".concat(_NeonEnvironment.default.getFullApiPath('documents'), "/").concat(document.name, "?inline=true"),
-    title: document.description,
-    width: viewerWidth,
-    height: calcAutoHeight(viewerWidth)
-  }));
+  }, renderObject());
 };
 
 var _default = DocumentViewer;
diff --git a/lib/components/DocumentViewer/index.d.ts b/lib/components/Documents/index.d.ts
similarity index 100%
rename from lib/components/DocumentViewer/index.d.ts
rename to lib/components/Documents/index.d.ts
diff --git a/lib/components/DocumentViewer/index.js b/lib/components/Documents/index.js
similarity index 100%
rename from lib/components/DocumentViewer/index.js
rename to lib/components/Documents/index.js
diff --git a/lib/components/DocumentViewer/package.json b/lib/components/Documents/package.json
similarity index 76%
rename from lib/components/DocumentViewer/package.json
rename to lib/components/Documents/package.json
index e6d1de5a..5e07b0f0 100644
--- a/lib/components/DocumentViewer/package.json
+++ b/lib/components/Documents/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "document-viewer",
+  "name": "documents",
   "main": "./DocumentViewer.tsx",
   "module": "./DocumentViewer.tsx"
 }
diff --git a/lib/components/NeonApi/NeonApi.d.ts b/lib/components/NeonApi/NeonApi.d.ts
index 54b90e28..083f1229 100644
--- a/lib/components/NeonApi/NeonApi.d.ts
+++ b/lib/components/NeonApi/NeonApi.d.ts
@@ -12,6 +12,7 @@ declare namespace NeonApi {
     function getApiTokenHeader(headers?: Object | undefined): Object;
     function getJsonObservable(url: string, headers?: Object | undefined, includeToken?: boolean): import("rxjs").Observable<any>;
     function postJsonObservable(url: string, body: any, headers?: Object | undefined, includeToken?: boolean): import("rxjs").Observable<import("rxjs/ajax").AjaxResponse> | import("rxjs").Observable<null>;
+    function headJsonObservable(url: string, headers?: Object | undefined, includeToken?: boolean): import("rxjs").Observable<import("rxjs/ajax").AjaxResponse> | import("rxjs").Observable<null>;
     function getJson(url: string, callback: any, errorCallback: any, cancellationSubject$: any, headers?: Object | undefined): import("rxjs").Subscription;
     function getProductsObservable(): import("rxjs").Observable<any>;
     function getProductObservable(productCode: string, release?: string): import("rxjs").Observable<any>;
@@ -27,4 +28,7 @@ declare namespace NeonApi {
     function getSiteLocationHierarchyObservable(siteCode: string): import("rxjs").Observable<any>;
     function getLocationObservable(location: string): import("rxjs").Observable<any>;
     function getArcgisAssetObservable(feature: string, siteCode: string): import("rxjs").Observable<any>;
+    function headDocumentObservable(name: string): import("rxjs").Observable<import("rxjs/ajax").AjaxResponse> | import("rxjs").Observable<null>;
+    function getQuickStartGuideDetailObservable(name: string, version: string): import("rxjs").Observable<any>;
+    function headQuickStartGuideObservable(name: string): import("rxjs").Observable<import("rxjs/ajax").AjaxResponse> | import("rxjs").Observable<null>;
 }
diff --git a/lib/components/NeonApi/NeonApi.js b/lib/components/NeonApi/NeonApi.js
index 3e788497..7d1d048f 100644
--- a/lib/components/NeonApi/NeonApi.js
+++ b/lib/components/NeonApi/NeonApi.js
@@ -120,6 +120,59 @@ var _getJsonObservable = function getJsonObservable(url) {
   var request = getJsonAjaxRequest(url, headers, includeToken, withCredentials);
   return mapResponse((0, _ajax.ajax)(request));
 };
+/**
+ * Gets the RxJS HEAD AjaxRequest
+ * @param {string} url The URL to make the API request to
+ * @param {Object|undefined} headers The headers to add to the request
+ * @param {boolean} includeToken Option to include the API token in the request
+ * @param {boolean} withCredentials Option to include credentials with a CORS request
+ * @return The RxJS HEAD AjaxRequest
+ */
+
+
+var headJsonAjaxRequest = function headJsonAjaxRequest(url) {
+  var headers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+  var includeToken = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var withCredentials = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+  var appliedHeaders = headers || {};
+
+  if (includeToken) {
+    appliedHeaders = _getApiTokenHeader(appliedHeaders);
+  }
+
+  var appliedWithCredentials = getAppliedWithCredentials(withCredentials);
+  return {
+    url: url,
+    method: 'HEAD',
+    responseType: 'json',
+    crossDomain: true,
+    withCredentials: appliedWithCredentials,
+    headers: _extends({}, appliedHeaders)
+  };
+};
+/**
+ * Gets the RxJS observable for making an API request to the specified URL
+ * with optional headers.
+ * @param {string} url The URL to make the API request to
+ * @param {Object|undefined} headers The headers to add to the request
+ * @param {boolean} includeToken Option to include the API token in the request
+ * @param {boolean} withCredentials Option to include credentials with a CORS request
+ * @return The RxJS Ajax Observable
+ */
+
+
+var _headJsonObservable = function headJsonObservable(url) {
+  var headers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+  var includeToken = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var withCredentials = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+
+  if (typeof url !== 'string' || !url.length) {
+    return (0, _rxjs.of)(null);
+  }
+
+  var request = headJsonAjaxRequest(url, headers, includeToken, withCredentials);
+  return (0, _ajax.ajax)(request);
+};
 /**
  * Gets the RxJS observable for making a POST API request to the specified URL
  * with body and optional headers.
@@ -205,6 +258,20 @@ var NeonApi = {
     return _postJsonObservable(url, body, headers, includeToken);
   },
 
+  /**
+   * Gets the RxJS observable for making a HEAD API request to the specified URL
+   * with optional headers.
+   * @param {string} url The URL to make the API request to
+   * @param {Object|undefined} headers The headers to add to the request
+   * @param {boolean} includeToken Option to include the API token in the request
+   * @return The RxJS Ajax Observable
+   */
+  headJsonObservable: function headJsonObservable(url) {
+    var headers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    var includeToken = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    return _headJsonObservable(url, headers, includeToken);
+  },
+
   /**
    * Convenience method for utiliizing the rxUtil => getJson function.
    * This will automatically add the API token header to the request.
@@ -336,6 +403,34 @@ var NeonApi = {
    */
   getArcgisAssetObservable: function getArcgisAssetObservable(feature, siteCode) {
     return _getJsonObservable("".concat(_NeonEnvironment.default.getFullApiPath('arcgisAssets'), "/").concat(feature, "/").concat(siteCode), undefined, true, false);
+  },
+
+  /**
+   * Gets the RxJS Observable for the document HEAD endpoint for a given name
+   * @param {string} name The document name
+   * @return The RxJS Ajax Observable
+   */
+  headDocumentObservable: function headDocumentObservable(name) {
+    return _headJsonObservable("".concat(_NeonEnvironment.default.getFullApiPath('documents'), "/").concat(name));
+  },
+
+  /**
+   * Gets the RxJS Observable for the quick start guides endpoint for a given name
+   * @param {string} name The quick start guide name
+   * @param {string} version The quick start guide version
+   * @return The RxJS Ajax Observable
+   */
+  getQuickStartGuideDetailObservable: function getQuickStartGuideDetailObservable(name, version) {
+    return _getJsonObservable("".concat(_NeonEnvironment.default.getFullApiPath('quickStartGuides'), "/details/").concat(name, "/").concat(version));
+  },
+
+  /**
+   * Gets the RxJS Observable for the quick start guides HEAD endpoint for a given name
+   * @param {string} name The document name
+   * @return The RxJS Ajax Observable
+   */
+  headQuickStartGuideObservable: function headQuickStartGuideObservable(name) {
+    return _headJsonObservable("".concat(_NeonEnvironment.default.getFullApiPath('quickStartGuides'), "/").concat(name));
   }
 };
 Object.freeze(NeonApi);
diff --git a/lib/components/NeonEnvironment/NeonEnvironment.js b/lib/components/NeonEnvironment/NeonEnvironment.js
index 3730abde..f93b3b4c 100644
--- a/lib/components/NeonEnvironment/NeonEnvironment.js
+++ b/lib/components/NeonEnvironment/NeonEnvironment.js
@@ -80,6 +80,9 @@ var NeonEnvironment = {
     documents: function documents() {
       return '/documents';
     },
+    quickStartGuides: function quickStartGuides() {
+      return '/documents/quick-start-guides';
+    },
     products: function products() {
       return '/products';
     },
diff --git a/lib/parser/DocumentParser.d.ts b/lib/parser/DocumentParser.d.ts
new file mode 100644
index 00000000..ce7ea134
--- /dev/null
+++ b/lib/parser/DocumentParser.d.ts
@@ -0,0 +1,9 @@
+import { QuickStartGuideDocument, QuickStartGuideVersion } from '../types/neonApi';
+import { Nullable, UnknownRecord } from '../types/core';
+export interface IDocumentParser {
+    parseQuickStartGuideVersionResponse: (response: UnknownRecord) => Nullable<QuickStartGuideVersion>;
+    parseQuickStartGuideDocuments: (documents: UnknownRecord[]) => QuickStartGuideDocument[];
+    parseQuickStartGuideDocument: (document: UnknownRecord) => QuickStartGuideDocument;
+}
+declare const DocumentParser: IDocumentParser;
+export default DocumentParser;
diff --git a/lib/parser/DocumentParser.js b/lib/parser/DocumentParser.js
new file mode 100644
index 00000000..60adae73
--- /dev/null
+++ b/lib/parser/DocumentParser.js
@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _typeUtil = require("../util/typeUtil");
+
+var DocumentParser = {
+  parseQuickStartGuideVersionResponse: function parseQuickStartGuideVersionResponse(response) {
+    if (!(0, _typeUtil.exists)(response)) {
+      return null;
+    }
+
+    var data = (0, _typeUtil.resolveAny)(response, 'data');
+
+    if (!(0, _typeUtil.exists)(data)) {
+      return null;
+    }
+
+    return {
+      name: data.name,
+      version: data.version,
+      publishedDate: data.publishedDate,
+      documents: DocumentParser.parseQuickStartGuideDocuments(data.documents)
+    };
+  },
+  parseQuickStartGuideDocuments: function parseQuickStartGuideDocuments(documents) {
+    if (!Array.isArray(documents)) {
+      return [];
+    }
+
+    return documents.map(function (document) {
+      return DocumentParser.parseQuickStartGuideDocument(document);
+    });
+  },
+  parseQuickStartGuideDocument: function parseQuickStartGuideDocument(document) {
+    return {
+      name: document.name,
+      description: document.description,
+      type: document.type,
+      size: document.size,
+      md5: document.md5,
+      generationDate: document.generationDate,
+      url: document.url
+    };
+  }
+};
+Object.freeze(DocumentParser);
+var _default = DocumentParser;
+exports.default = _default;
\ No newline at end of file
diff --git a/lib/remoteAssets/drupal-header.html.d.ts b/lib/remoteAssets/drupal-header.html.d.ts
index 03daa7c6..9f348f44 100644
--- a/lib/remoteAssets/drupal-header.html.d.ts
+++ b/lib/remoteAssets/drupal-header.html.d.ts
@@ -1,2 +1,2 @@
-declare var _default: "\n<header class=\"header\" role=\"banner\">\n  <div class=\"header__inner l--offset-wide\">\n    <div class=\"header__logo\">\n      <a href=\"/\" title=\"Home\" rel=\"home\"     \n  \n  \n  \n  \n class=\"logo\"\n>\n      <img src=\"https://www.neonscience.org/themes/custom/neon/logo.png\" alt=\" logo\" class=\"logo__image\">\n  </a>    </div>\n    <input type=\"checkbox\" id=\"nav-trigger\" class=\"nav-trigger js-mobile-nav-trigger\" aria-label=\"Mobile Navigation Trigger\" value=\"expanded\" />\n    <label for=\"nav-trigger\">\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--expand\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"><path d=\"M0 0h20v2H0V0zm0 16h20v2H0v-2zm0-8h20v2H0V8z\"/></svg>\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--collapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path d=\"M1.636.222l14.142 14.142-1.414 1.414L.222 1.636 1.636.222zM.222 14.364L14.364.222l1.414 1.414L1.636 15.778.222 14.364z\"/></svg>\n\n    </label>\n    <div class=\"authContainer\">\n              <a href=\"/user/login\">Sign In</a>\n          </div>\n    <div class=\"header__site-navigation\">\n      <div class=\"header__menu-main\">\n        <nav role=\"navigation\" aria-labelledby=\"block-neon-main-menu-menu\" id=\"block-neon-main-menu\">\n            \n  <h2 class=\"visually-hidden\" id=\"block-neon-main-menu-menu\">Main navigation</h2>\n  \n\n        \n          <ul  class=\"menu menu--main\" data-depth=\"0\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about\" class=\"menu__link\" title=\"About Us\" data-drupal-link-system-path=\"node/8793\">About Us</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/overview\" class=\"menu__link\" data-drupal-link-system-path=\"node/10531\">Overview</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10532\">Spatial and Temporal Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/history\" class=\"menu__link\" data-drupal-link-system-path=\"node/19\">History</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/visionandmanagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10533\">Vision and Management</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/steac\" class=\"menu__link\" data-drupal-link-system-path=\"node/7563\">Advisory Committee: STEAC</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/twgs\" class=\"menu__link\" data-drupal-link-system-path=\"node/6273\">Technical Working Groups (TWGs)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/faq\" class=\"menu__link\" data-drupal-link-system-path=\"node/10545\">FAQ</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/contact-us\" class=\"menu__link\" data-drupal-link-system-path=\"node/24\">Contact Us</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/contact-us/field-offices\" class=\"menu__link\" data-drupal-link-system-path=\"node/7874\">Field Offices</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/user-accounts\" class=\"menu__link\" data-drupal-link-system-path=\"node/8563\">User Accounts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/staff\" class=\"menu__link\" data-drupal-link-system-path=\"node/8802\">Staff</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>About Us</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/1\">Data &amp; Samples</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data\" class=\"menu__link\" data-drupal-link-system-path=\"node/8858\">Data Portal</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/explore\" class=\"menu__link\">Explore Data Products</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/visualizations/data-availability\" class=\"menu__link\">Data Availability Charts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data/spatial-data-maps\" class=\"menu__link\" data-drupal-link-system-path=\"node/10547\">Spatial Data &amp; Maps</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-api\" class=\"menu__link\">API &amp; GraphQL</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/prototype-search\" class=\"menu__link\">Prototype Data</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/web/external-lab-ingest\" class=\"menu__link\">External Lab Data Ingest (restricted)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10295\">Samples &amp; Specimens</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples/find-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/8174\">Discover and Use NEON Samples</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/6223\">Sample Types</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-repositories\" class=\"menu__link\" data-drupal-link-system-path=\"node/10907\">Sample Repositories</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/sample-explorer\" class=\"menu__link\">Sample Explorer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/soil-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/5\">Megapit and Distributed Initial Characterization Soil Archives</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/10906\">Sample Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-quality\" class=\"menu__link\" data-drupal-link-system-path=\"node/10908\">Sample Quality</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/taxonomic-lists\" class=\"menu__link\">Taxonomic Lists</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection\" class=\"menu__link\" data-drupal-link-system-path=\"node/4776\">Collection Methods</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/protocols-standardized-methods\" class=\"menu__link\" data-drupal-link-system-path=\"node/9\">Protocols &amp; Standardized Methods</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/airborne-remote-sensing\" class=\"menu__link\" data-drupal-link-system-path=\"node/3821\">AIrborne Remote Sensing</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-box-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10550\">Flight Box Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-schedules-coverage\" class=\"menu__link\" data-drupal-link-system-path=\"node/7871\">Flight Schedules and Coverage</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/daily-flight-reports\" class=\"menu__link\" data-drupal-link-system-path=\"node/10542\">Daily Flight Reports</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/camera\" class=\"menu__link\" data-drupal-link-system-path=\"node/10554\">Camera</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/imaging-spectrometer\" class=\"menu__link\" data-drupal-link-system-path=\"node/10555\">Imaging Spectrometer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/lidar\" class=\"menu__link\" data-drupal-link-system-path=\"node/10551\">Lidar</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/automated-instruments\" class=\"menu__link\" data-drupal-link-system-path=\"node/7819\">Automated Instruments</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10897\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sensor-collection-frequency\" class=\"menu__link\" data-drupal-link-system-path=\"node/10901\">Sensor Collection Frequency</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/instrumented-collection-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10900\">Instrumented Collection Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/meteorology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7842\">Meteorology</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/phenocams\" class=\"menu__link\" data-drupal-link-system-path=\"node/7843\">Phenocams</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-sensors\" class=\"menu__link\" data-drupal-link-system-path=\"node/7841\">Soil Sensors</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/groundwater\" class=\"menu__link\" data-drupal-link-system-path=\"node/7839\">Ground Water</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/surface-water\" class=\"menu__link\" data-drupal-link-system-path=\"node/7840\">Surface Water</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observational-sampling\" class=\"menu__link\" data-drupal-link-system-path=\"node/7820\">Observational Sampling</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10893\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sampling-schedules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10889\">Sampling Schedules</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observation-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10535\">Observation Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3277\">Aquatic Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8113\">Aquatic Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/fish\" class=\"menu__link\" data-drupal-link-system-path=\"node/7916\">Fish</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/macroinvertebrates-zooplankton\" class=\"menu__link\" data-drupal-link-system-path=\"node/10538\">Macroinvertebrates &amp; Zooplankton</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/algae-aquatic-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8278\">Periphyton, Phytoplankton, and Aquatic Plants</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3278\">Terrestrial Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/birds\" class=\"menu__link\" data-drupal-link-system-path=\"node/8288\">Birds</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ground-beetles\" class=\"menu__link\" data-drupal-link-system-path=\"node/8614\">Ground Beetles</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/mosquitoes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8290\">Mosquitoes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/small-mammals\" class=\"menu__link\" data-drupal-link-system-path=\"node/8616\">Small Mammals</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8617\">Soil Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8679\">Terrestrial Plants</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ticks\" class=\"menu__link\" data-drupal-link-system-path=\"node/8615\">Ticks</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/hydrology-geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/10536\">Hydrology &amp; Geomorphology</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/discharge\" class=\"menu__link\" data-drupal-link-system-path=\"node/10537\">Discharge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7917\">Geomorphology</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/biogeochemistry\" class=\"menu__link\" data-drupal-link-system-path=\"node/7918\">Biogeochemistry</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/observation-types/dna-sequences\" class=\"menu__link\" data-drupal-link-system-path=\"node/7844\">DNA Sequences</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/pathogens\" class=\"menu__link\" data-drupal-link-system-path=\"node/7881\">Pathogens</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sediments\" class=\"menu__link\" data-drupal-link-system-path=\"node/10541\">Sediments</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/soils\" class=\"menu__link\" data-drupal-link-system-path=\"node/10549\">Soils</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soils/soil-descriptions\" class=\"menu__link\" data-drupal-link-system-path=\"node/11685\">Soil Descriptions</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-notifications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10951\">Data Notifications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11642\">Data Guidelines and Policies</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/citing\" class=\"menu__link\" data-drupal-link-system-path=\"node/11644\">Acknowledging and Citing NEON</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/publishing-research-outputs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11629\">Publishing Research Outputs</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/usage-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11643\">Usage Policies</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management\" class=\"menu__link\" data-drupal-link-system-path=\"node/10557\">Data Management</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-availability\" class=\"menu__link\" data-drupal-link-system-path=\"node/10298\">Data Availability</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-formats-conventions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10560\">Data Formats and Conventions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/8470\">Data Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-quality-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/10299\">Data Quality</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases\" class=\"menu__link\" data-drupal-link-system-path=\"node/10559\">Data Product Revisions and Releases</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2021\" class=\"menu__link\" data-drupal-link-system-path=\"node/11212\">Release 2021</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2022\" class=\"menu__link\" data-drupal-link-system-path=\"node/11956\">Release 2022</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/externally-hosted-data\" class=\"menu__link\" data-drupal-link-system-path=\"node/10552\">Externally Hosted Data</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Data &amp; Samples</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/11376\">Field Sites</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/about-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/6226\">About Field Sites and Domains</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/explore-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/10899\">Explore Field Sites</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/DP1.10111.001\" class=\"menu__link\">Site Management Data Product</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Field Sites</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact\" title=\"Impact\" class=\"menu__link\" data-drupal-link-system-path=\"node/8795\">Impact</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/observatory-blog\" class=\"menu__link\" data-drupal-link-system-path=\"node/8857\">Observatory Blog</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/case-studies\" class=\"menu__link\" data-drupal-link-system-path=\"node/10904\">Case Studies</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/spotlights\" class=\"menu__link\" data-drupal-link-system-path=\"node/10905\">Spotlights</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact/newsroom\" class=\"menu__link\" data-drupal-link-system-path=\"node/10890\">Newsroom</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/neon-news\" class=\"menu__link\" data-drupal-link-system-path=\"node/6042\">NEON in the News</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/newsletter-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/7826\">Newsletter Archive</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Impact</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6228\">Resources</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/getting-started-neon-data-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/11293\">Getting Started with NEON Data &amp; Resources</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/communication-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6316\">Documents and Communication Resources</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/communications-resources/outreach-materials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10949\">Outreach Materials</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/code-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/7076\">Code Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-guidelines\" class=\"menu__link\" data-drupal-link-system-path=\"node/8619\">Code Resources Guidelines</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-submission\" class=\"menu__link\" data-drupal-link-system-path=\"node/8631\">Code Resources Submission</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://github.com/neonscience\" class=\"menu__link\">NEON&#039;s GitHub Organization Homepage</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/6136\">Learning Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/science-videos\" class=\"menu__link\" data-drupal-link-system-path=\"node/5345\">Science Videos</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/tutorials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10896\">Tutorials</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/workshops-courses\" class=\"menu__link\" data-drupal-link-system-path=\"node/6529\">Workshops &amp; Courses</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/teaching-modules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10909\">Teaching Modules</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/faculty-mentoring-networks\" class=\"menu__link\" data-drupal-link-system-path=\"node/7463\">Faculty Mentoring Networks</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/data-education-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/7828\">Data Education Fellows</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/research-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/10764\">Research Support and Assignable Assets</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/field-site-coordination\" class=\"menu__link\" data-drupal-link-system-path=\"node/6\">Field Site Coordination</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/letters-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/8731\">Letters of Support</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/mobile-deployment-platforms\" class=\"menu__link\" data-drupal-link-system-path=\"node/7751\">Mobile Deployment Platforms</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/permits-permissions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10769\">Permits and Permissions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/aop-flight-campaigns\" class=\"menu__link\" data-drupal-link-system-path=\"node/7754\">AOP Flight Campaigns</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/assignable-assets-faqs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11535\">Assignable Assets FAQs</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/funding-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/11327\">Funding Opportunities </a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Resources</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved\" class=\"menu__link\" data-drupal-link-system-path=\"node/6753\">Get Involved</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/upcoming-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10737\">Upcoming Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/past-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10738\">Past Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/neon-ambassador-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/11625\">NEON Ambassador Program</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/collaborative-works\" class=\"menu__link\" data-drupal-link-system-path=\"node/12059\">Collaborative Works</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/efi-rcn-neon-ecological-forecasting-challenge\" class=\"menu__link\" data-drupal-link-system-path=\"node/11363\">EFI-NEON Ecological Forecasting Challenge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/ncar-neon-community-collaborations\" class=\"menu__link\" data-drupal-link-system-path=\"node/11843\">NCAR-NEON-Community Collaborations</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/engagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10556\">Community Engagement</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/6229\">Work Opportunities</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/careers\" class=\"menu__link\" data-drupal-link-system-path=\"node/5198\">Careers</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/seasonal-fieldwork\" class=\"menu__link\" data-drupal-link-system-path=\"node/6131\">Seasonal Fieldwork</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/postdoctoral-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/8729\">Postdoctoral Fellows</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships\" class=\"menu__link\" data-drupal-link-system-path=\"node/16\">Internships</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships/intern-alumni\" class=\"menu__link\" data-drupal-link-system-path=\"node/10553\">Intern Alumni</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/partners\" class=\"menu__link\" data-drupal-link-system-path=\"node/8094\">Partners</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Get Involved</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n      \n                      <li class=\"myAccount\">\n          <a href=\"/user/login\" title=\"My Account\" class=\"menu__link\">My Account</a>\n        </li>\n\n                <li class=\"siteSearch isDesktop\">\n          <a href=\"/search/site\" title=\"Search\" class=\"menu__link\">Search</a>\n        </li>\n                <li class=\"siteSearch isMobile\">\n          \n<div\n  class=\"search-form-mobile isMobile\"\n  id=\"block-searchform-mobile\"\n  role=\"search\"\n>\n  \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n</div>\n        </li>\n          </ul>\n  \n\n\n  </nav>\n\n      </div>\n    </div>\n  </div>\n  <div class=\"l--offset isDesktop header__search visually-hidden\">\n    <div class=\"header__search--inner\">\n        <h3 class=\"header__search--title\">Search</h3>\n        \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n        <div class=\"header__search-close\">\n          <button aria-label=\"Close Search\" class=\"button__search-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z\" fill=\"#0073CF\"/><path d=\"M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z\" fill=\"#0073CF\"/></svg>\n          </button>\n\n        </div>\n    </div>\n  </div>\n          <div id=\"header__authentication-ui\"></div>\n  </header>\n\n\n";
+declare var _default: "\n<header class=\"header\" role=\"banner\">\n  <div class=\"header__inner l--offset-wide\">\n    <div class=\"header__logo\">\n      <a href=\"/\" title=\"Home\" rel=\"home\"     \n  \n  \n  \n  \n class=\"logo\"\n>\n      <img src=\"https://www.neonscience.org/themes/custom/neon/logo.png\" alt=\" logo\" class=\"logo__image\">\n  </a>    </div>\n    <input type=\"checkbox\" id=\"nav-trigger\" class=\"nav-trigger js-mobile-nav-trigger\" aria-label=\"Mobile Navigation Trigger\" value=\"expanded\" />\n    <label for=\"nav-trigger\">\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--expand\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"><path d=\"M0 0h20v2H0V0zm0 16h20v2H0v-2zm0-8h20v2H0V8z\"/></svg>\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--collapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path d=\"M1.636.222l14.142 14.142-1.414 1.414L.222 1.636 1.636.222zM.222 14.364L14.364.222l1.414 1.414L1.636 15.778.222 14.364z\"/></svg>\n\n    </label>\n    <div class=\"authContainer\">\n              <a href=\"/user/login\">Sign In</a>\n          </div>\n    <div class=\"header__site-navigation\">\n      <div class=\"header__menu-main\">\n        <nav role=\"navigation\" aria-labelledby=\"block-neon-main-menu-menu\" id=\"block-neon-main-menu\">\n            \n  <h2 class=\"visually-hidden\" id=\"block-neon-main-menu-menu\">Main navigation</h2>\n  \n\n        \n          <ul  class=\"menu menu--main\" data-depth=\"0\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about\" class=\"menu__link\" title=\"About Us\" data-drupal-link-system-path=\"node/8793\">About Us</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/overview\" class=\"menu__link\" data-drupal-link-system-path=\"node/10531\">Overview</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10532\">Spatial and Temporal Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/history\" class=\"menu__link\" data-drupal-link-system-path=\"node/19\">History</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/visionandmanagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10533\">Vision and Management</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/steac\" class=\"menu__link\" data-drupal-link-system-path=\"node/7563\">Advisory Committee: STEAC</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/twgs\" class=\"menu__link\" data-drupal-link-system-path=\"node/6273\">Technical Working Groups (TWGs)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/faq\" class=\"menu__link\" data-drupal-link-system-path=\"node/10545\">FAQ</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/contact-us\" class=\"menu__link\" data-drupal-link-system-path=\"node/24\">Contact Us</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/contact-us/field-offices\" class=\"menu__link\" data-drupal-link-system-path=\"node/7874\">Field Offices</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/user-accounts\" class=\"menu__link\" data-drupal-link-system-path=\"node/8563\">User Accounts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/staff\" class=\"menu__link\" data-drupal-link-system-path=\"node/8802\">Staff</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>About Us</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/1\">Data &amp; Samples</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data\" class=\"menu__link\" data-drupal-link-system-path=\"node/8858\">Data Portal</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/explore\" class=\"menu__link\">Explore Data Products</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/visualizations/data-availability\" class=\"menu__link\">Data Availability Charts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data/spatial-data-maps\" class=\"menu__link\" data-drupal-link-system-path=\"node/10547\">Spatial Data &amp; Maps</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-api\" class=\"menu__link\">API &amp; GraphQL</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/prototype-search\" class=\"menu__link\">Prototype Data</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/web/external-lab-ingest\" class=\"menu__link\">External Lab Data Ingest (restricted)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10295\">Samples &amp; Specimens</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples/find-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/8174\">Discover and Use NEON Samples</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/6223\">Sample Types</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-repositories\" class=\"menu__link\" data-drupal-link-system-path=\"node/10907\">Sample Repositories</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/sample-explorer\" class=\"menu__link\">Sample Explorer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/soil-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/5\">Megapit and Distributed Initial Characterization Soil Archives</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/10906\">Sample Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-quality\" class=\"menu__link\" data-drupal-link-system-path=\"node/10908\">Sample Quality</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/taxonomic-lists\" class=\"menu__link\">Taxonomic Lists</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection\" class=\"menu__link\" data-drupal-link-system-path=\"node/4776\">Collection Methods</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/protocols-standardized-methods\" class=\"menu__link\" data-drupal-link-system-path=\"node/9\">Protocols &amp; Standardized Methods</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/airborne-remote-sensing\" class=\"menu__link\" data-drupal-link-system-path=\"node/3821\">AIrborne Remote Sensing</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-box-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10550\">Flight Box Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-schedules-coverage\" class=\"menu__link\" data-drupal-link-system-path=\"node/7871\">Flight Schedules and Coverage</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/daily-flight-reports\" class=\"menu__link\" data-drupal-link-system-path=\"node/10542\">Daily Flight Reports</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/camera\" class=\"menu__link\" data-drupal-link-system-path=\"node/10554\">Camera</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/imaging-spectrometer\" class=\"menu__link\" data-drupal-link-system-path=\"node/10555\">Imaging Spectrometer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/lidar\" class=\"menu__link\" data-drupal-link-system-path=\"node/10551\">Lidar</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/automated-instruments\" class=\"menu__link\" data-drupal-link-system-path=\"node/7819\">Automated Instruments</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10897\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sensor-collection-frequency\" class=\"menu__link\" data-drupal-link-system-path=\"node/10901\">Sensor Collection Frequency</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/instrumented-collection-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10900\">Instrumented Collection Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/meteorology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7842\">Meteorology</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/phenocams\" class=\"menu__link\" data-drupal-link-system-path=\"node/7843\">Phenocams</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-sensors\" class=\"menu__link\" data-drupal-link-system-path=\"node/7841\">Soil Sensors</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/groundwater\" class=\"menu__link\" data-drupal-link-system-path=\"node/7839\">Ground Water</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/surface-water\" class=\"menu__link\" data-drupal-link-system-path=\"node/7840\">Surface Water</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observational-sampling\" class=\"menu__link\" data-drupal-link-system-path=\"node/7820\">Observational Sampling</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10893\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sampling-schedules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10889\">Sampling Schedules</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observation-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10535\">Observation Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3277\">Aquatic Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8113\">Aquatic Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/fish\" class=\"menu__link\" data-drupal-link-system-path=\"node/7916\">Fish</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/macroinvertebrates-zooplankton\" class=\"menu__link\" data-drupal-link-system-path=\"node/10538\">Macroinvertebrates &amp; Zooplankton</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/algae-aquatic-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8278\">Periphyton, Phytoplankton, and Aquatic Plants</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3278\">Terrestrial Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/birds\" class=\"menu__link\" data-drupal-link-system-path=\"node/8288\">Birds</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ground-beetles\" class=\"menu__link\" data-drupal-link-system-path=\"node/8614\">Ground Beetles</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/mosquitoes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8290\">Mosquitoes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/small-mammals\" class=\"menu__link\" data-drupal-link-system-path=\"node/8616\">Small Mammals</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8617\">Soil Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8679\">Terrestrial Plants</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ticks\" class=\"menu__link\" data-drupal-link-system-path=\"node/8615\">Ticks</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/hydrology-geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/10536\">Hydrology &amp; Geomorphology</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/discharge\" class=\"menu__link\" data-drupal-link-system-path=\"node/10537\">Discharge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7917\">Geomorphology</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/biogeochemistry\" class=\"menu__link\" data-drupal-link-system-path=\"node/7918\">Biogeochemistry</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/observation-types/dna-sequences\" class=\"menu__link\" data-drupal-link-system-path=\"node/7844\">DNA Sequences</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/pathogens\" class=\"menu__link\" data-drupal-link-system-path=\"node/7881\">Pathogens</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sediments\" class=\"menu__link\" data-drupal-link-system-path=\"node/10541\">Sediments</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/soils\" class=\"menu__link\" data-drupal-link-system-path=\"node/10549\">Soils</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soils/soil-descriptions\" class=\"menu__link\" data-drupal-link-system-path=\"node/11685\">Soil Descriptions</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-notifications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10951\">Data Notifications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11642\">Data Guidelines and Policies</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/citing\" class=\"menu__link\" data-drupal-link-system-path=\"node/11644\">Acknowledging and Citing NEON</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/publishing-research-outputs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11629\">Publishing Research Outputs</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/usage-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11643\">Usage Policies</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management\" class=\"menu__link\" data-drupal-link-system-path=\"node/10557\">Data Management</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-availability\" class=\"menu__link\" data-drupal-link-system-path=\"node/10298\">Data Availability</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-formats-conventions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10560\">Data Formats and Conventions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/8470\">Data Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-quality-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/10299\">Data Quality</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases\" class=\"menu__link\" data-drupal-link-system-path=\"node/10559\">Data Product Revisions and Releases</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2021\" class=\"menu__link\" data-drupal-link-system-path=\"node/11212\">Release 2021</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2022\" class=\"menu__link\" data-drupal-link-system-path=\"node/11956\">Release 2022</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/externally-hosted-data\" class=\"menu__link\" data-drupal-link-system-path=\"node/10552\">Externally Hosted Data</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Data &amp; Samples</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/11376\">Field Sites</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/about-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/6226\">About Field Sites and Domains</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/explore-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/10899\">Explore Field Sites</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/DP1.10111.001\" class=\"menu__link\">Site Management Data Product</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Field Sites</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact\" title=\"Impact\" class=\"menu__link\" data-drupal-link-system-path=\"node/8795\">Impact</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/observatory-blog\" class=\"menu__link\" data-drupal-link-system-path=\"node/8857\">Observatory Blog</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/case-studies\" class=\"menu__link\" data-drupal-link-system-path=\"node/10904\">Case Studies</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/spotlights\" class=\"menu__link\" data-drupal-link-system-path=\"node/10905\">Spotlights</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact/newsroom\" class=\"menu__link\" data-drupal-link-system-path=\"node/10890\">Newsroom</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/neon-news\" class=\"menu__link\" data-drupal-link-system-path=\"node/6042\">NEON in the News</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/newsletter-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/7826\">Newsletter Archive</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Impact</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6228\">Resources</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/getting-started-neon-data-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/11293\">Getting Started with NEON Data &amp; Resources</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/communication-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6316\">Documents and Communication Resources</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/communications-resources/outreach-materials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10949\">Outreach Materials</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/code-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/7076\">Code Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-guidelines\" class=\"menu__link\" data-drupal-link-system-path=\"node/8619\">Code Resources Guidelines</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-submission\" class=\"menu__link\" data-drupal-link-system-path=\"node/8631\">Code Resources Submission</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://github.com/neonscience\" class=\"menu__link\">NEON&#039;s GitHub Organization Homepage</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/6136\">Learning Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/science-videos\" class=\"menu__link\" data-drupal-link-system-path=\"node/5345\">Science Videos</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/tutorials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10896\">Tutorials</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/workshops-courses\" class=\"menu__link\" data-drupal-link-system-path=\"node/6529\">Workshops &amp; Courses</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/teaching-modules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10909\">Teaching Modules</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/faculty-mentoring-networks\" class=\"menu__link\" data-drupal-link-system-path=\"node/7463\">Faculty Mentoring Networks</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/data-education-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/7828\">Data Education Fellows</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/research-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/10764\">Research Support and Assignable Assets</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/field-site-coordination\" class=\"menu__link\" data-drupal-link-system-path=\"node/12209\">Field Site Coordination</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/letters-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/8731\">Letters of Support</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/mobile-deployment-platforms\" class=\"menu__link\" data-drupal-link-system-path=\"node/7751\">Mobile Deployment Platforms</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/permits-permissions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10769\">Permits and Permissions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/aop-flight-campaigns\" class=\"menu__link\" data-drupal-link-system-path=\"node/7754\">AOP Flight Campaigns</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/assignable-assets-faqs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11535\">Assignable Assets FAQs</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/funding-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/11327\">Funding Opportunities </a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Resources</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved\" class=\"menu__link\" data-drupal-link-system-path=\"node/6753\">Get Involved</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/upcoming-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10737\">Upcoming Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/past-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10738\">Past Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/neon-ambassador-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/11625\">NEON Ambassador Program</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/collaborative-works\" class=\"menu__link\" data-drupal-link-system-path=\"node/12059\">Collaborative Works</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/efi-rcn-neon-ecological-forecasting-challenge\" class=\"menu__link\" data-drupal-link-system-path=\"node/11363\">EFI-NEON Ecological Forecasting Challenge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/ncar-neon-community-collaborations\" class=\"menu__link\" data-drupal-link-system-path=\"node/11843\">NCAR-NEON-Community Collaborations</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/neon-science-summit\" class=\"menu__link\" data-drupal-link-system-path=\"node/12057\">NEON Science Summit</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/engagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10556\">Community Engagement</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/6229\">Work Opportunities</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/careers\" class=\"menu__link\" data-drupal-link-system-path=\"node/5198\">Careers</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/seasonal-fieldwork\" class=\"menu__link\" data-drupal-link-system-path=\"node/6131\">Seasonal Fieldwork</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/postdoctoral-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/8729\">Postdoctoral Fellows</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships\" class=\"menu__link\" data-drupal-link-system-path=\"node/16\">Internships</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships/intern-alumni\" class=\"menu__link\" data-drupal-link-system-path=\"node/10553\">Intern Alumni</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/partners\" class=\"menu__link\" data-drupal-link-system-path=\"node/8094\">Partners</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Get Involved</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n      \n                      <li class=\"myAccount\">\n          <a href=\"/user/login\" title=\"My Account\" class=\"menu__link\">My Account</a>\n        </li>\n\n                <li class=\"siteSearch isDesktop\">\n          <a href=\"/search/site\" title=\"Search\" class=\"menu__link\">Search</a>\n        </li>\n                <li class=\"siteSearch isMobile\">\n          \n<div\n  class=\"search-form-mobile isMobile\"\n  id=\"block-searchform-mobile\"\n  role=\"search\"\n>\n  \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n</div>\n        </li>\n          </ul>\n  \n\n\n  </nav>\n\n      </div>\n    </div>\n  </div>\n  <div class=\"l--offset isDesktop header__search visually-hidden\">\n    <div class=\"header__search--inner\">\n        <h3 class=\"header__search--title\">Search</h3>\n        \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n        <div class=\"header__search-close\">\n          <button aria-label=\"Close Search\" class=\"button__search-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z\" fill=\"#0073CF\"/><path d=\"M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z\" fill=\"#0073CF\"/></svg>\n          </button>\n\n        </div>\n    </div>\n  </div>\n          <div id=\"header__authentication-ui\"></div>\n  </header>\n\n\n";
 export default _default;
diff --git a/lib/remoteAssets/drupal-header.html.js b/lib/remoteAssets/drupal-header.html.js
index 8ce5ebc5..288cca4d 100644
--- a/lib/remoteAssets/drupal-header.html.js
+++ b/lib/remoteAssets/drupal-header.html.js
@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var html;
 
-var _default = html = "\n<header class=\"header\" role=\"banner\">\n  <div class=\"header__inner l--offset-wide\">\n    <div class=\"header__logo\">\n      <a href=\"/\" title=\"Home\" rel=\"home\"     \n  \n  \n  \n  \n class=\"logo\"\n>\n      <img src=\"https://www.neonscience.org/themes/custom/neon/logo.png\" alt=\" logo\" class=\"logo__image\">\n  </a>    </div>\n    <input type=\"checkbox\" id=\"nav-trigger\" class=\"nav-trigger js-mobile-nav-trigger\" aria-label=\"Mobile Navigation Trigger\" value=\"expanded\" />\n    <label for=\"nav-trigger\">\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--expand\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"><path d=\"M0 0h20v2H0V0zm0 16h20v2H0v-2zm0-8h20v2H0V8z\"/></svg>\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--collapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path d=\"M1.636.222l14.142 14.142-1.414 1.414L.222 1.636 1.636.222zM.222 14.364L14.364.222l1.414 1.414L1.636 15.778.222 14.364z\"/></svg>\n\n    </label>\n    <div class=\"authContainer\">\n              <a href=\"/user/login\">Sign In</a>\n          </div>\n    <div class=\"header__site-navigation\">\n      <div class=\"header__menu-main\">\n        <nav role=\"navigation\" aria-labelledby=\"block-neon-main-menu-menu\" id=\"block-neon-main-menu\">\n            \n  <h2 class=\"visually-hidden\" id=\"block-neon-main-menu-menu\">Main navigation</h2>\n  \n\n        \n          <ul  class=\"menu menu--main\" data-depth=\"0\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about\" class=\"menu__link\" title=\"About Us\" data-drupal-link-system-path=\"node/8793\">About Us</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/overview\" class=\"menu__link\" data-drupal-link-system-path=\"node/10531\">Overview</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10532\">Spatial and Temporal Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/history\" class=\"menu__link\" data-drupal-link-system-path=\"node/19\">History</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/visionandmanagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10533\">Vision and Management</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/steac\" class=\"menu__link\" data-drupal-link-system-path=\"node/7563\">Advisory Committee: STEAC</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/twgs\" class=\"menu__link\" data-drupal-link-system-path=\"node/6273\">Technical Working Groups (TWGs)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/faq\" class=\"menu__link\" data-drupal-link-system-path=\"node/10545\">FAQ</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/contact-us\" class=\"menu__link\" data-drupal-link-system-path=\"node/24\">Contact Us</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/contact-us/field-offices\" class=\"menu__link\" data-drupal-link-system-path=\"node/7874\">Field Offices</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/user-accounts\" class=\"menu__link\" data-drupal-link-system-path=\"node/8563\">User Accounts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/staff\" class=\"menu__link\" data-drupal-link-system-path=\"node/8802\">Staff</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>About Us</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/1\">Data &amp; Samples</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data\" class=\"menu__link\" data-drupal-link-system-path=\"node/8858\">Data Portal</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/explore\" class=\"menu__link\">Explore Data Products</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/visualizations/data-availability\" class=\"menu__link\">Data Availability Charts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data/spatial-data-maps\" class=\"menu__link\" data-drupal-link-system-path=\"node/10547\">Spatial Data &amp; Maps</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-api\" class=\"menu__link\">API &amp; GraphQL</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/prototype-search\" class=\"menu__link\">Prototype Data</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/web/external-lab-ingest\" class=\"menu__link\">External Lab Data Ingest (restricted)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10295\">Samples &amp; Specimens</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples/find-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/8174\">Discover and Use NEON Samples</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/6223\">Sample Types</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-repositories\" class=\"menu__link\" data-drupal-link-system-path=\"node/10907\">Sample Repositories</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/sample-explorer\" class=\"menu__link\">Sample Explorer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/soil-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/5\">Megapit and Distributed Initial Characterization Soil Archives</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/10906\">Sample Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-quality\" class=\"menu__link\" data-drupal-link-system-path=\"node/10908\">Sample Quality</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/taxonomic-lists\" class=\"menu__link\">Taxonomic Lists</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection\" class=\"menu__link\" data-drupal-link-system-path=\"node/4776\">Collection Methods</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/protocols-standardized-methods\" class=\"menu__link\" data-drupal-link-system-path=\"node/9\">Protocols &amp; Standardized Methods</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/airborne-remote-sensing\" class=\"menu__link\" data-drupal-link-system-path=\"node/3821\">AIrborne Remote Sensing</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-box-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10550\">Flight Box Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-schedules-coverage\" class=\"menu__link\" data-drupal-link-system-path=\"node/7871\">Flight Schedules and Coverage</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/daily-flight-reports\" class=\"menu__link\" data-drupal-link-system-path=\"node/10542\">Daily Flight Reports</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/camera\" class=\"menu__link\" data-drupal-link-system-path=\"node/10554\">Camera</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/imaging-spectrometer\" class=\"menu__link\" data-drupal-link-system-path=\"node/10555\">Imaging Spectrometer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/lidar\" class=\"menu__link\" data-drupal-link-system-path=\"node/10551\">Lidar</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/automated-instruments\" class=\"menu__link\" data-drupal-link-system-path=\"node/7819\">Automated Instruments</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10897\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sensor-collection-frequency\" class=\"menu__link\" data-drupal-link-system-path=\"node/10901\">Sensor Collection Frequency</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/instrumented-collection-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10900\">Instrumented Collection Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/meteorology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7842\">Meteorology</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/phenocams\" class=\"menu__link\" data-drupal-link-system-path=\"node/7843\">Phenocams</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-sensors\" class=\"menu__link\" data-drupal-link-system-path=\"node/7841\">Soil Sensors</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/groundwater\" class=\"menu__link\" data-drupal-link-system-path=\"node/7839\">Ground Water</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/surface-water\" class=\"menu__link\" data-drupal-link-system-path=\"node/7840\">Surface Water</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observational-sampling\" class=\"menu__link\" data-drupal-link-system-path=\"node/7820\">Observational Sampling</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10893\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sampling-schedules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10889\">Sampling Schedules</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observation-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10535\">Observation Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3277\">Aquatic Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8113\">Aquatic Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/fish\" class=\"menu__link\" data-drupal-link-system-path=\"node/7916\">Fish</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/macroinvertebrates-zooplankton\" class=\"menu__link\" data-drupal-link-system-path=\"node/10538\">Macroinvertebrates &amp; Zooplankton</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/algae-aquatic-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8278\">Periphyton, Phytoplankton, and Aquatic Plants</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3278\">Terrestrial Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/birds\" class=\"menu__link\" data-drupal-link-system-path=\"node/8288\">Birds</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ground-beetles\" class=\"menu__link\" data-drupal-link-system-path=\"node/8614\">Ground Beetles</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/mosquitoes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8290\">Mosquitoes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/small-mammals\" class=\"menu__link\" data-drupal-link-system-path=\"node/8616\">Small Mammals</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8617\">Soil Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8679\">Terrestrial Plants</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ticks\" class=\"menu__link\" data-drupal-link-system-path=\"node/8615\">Ticks</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/hydrology-geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/10536\">Hydrology &amp; Geomorphology</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/discharge\" class=\"menu__link\" data-drupal-link-system-path=\"node/10537\">Discharge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7917\">Geomorphology</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/biogeochemistry\" class=\"menu__link\" data-drupal-link-system-path=\"node/7918\">Biogeochemistry</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/observation-types/dna-sequences\" class=\"menu__link\" data-drupal-link-system-path=\"node/7844\">DNA Sequences</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/pathogens\" class=\"menu__link\" data-drupal-link-system-path=\"node/7881\">Pathogens</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sediments\" class=\"menu__link\" data-drupal-link-system-path=\"node/10541\">Sediments</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/soils\" class=\"menu__link\" data-drupal-link-system-path=\"node/10549\">Soils</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soils/soil-descriptions\" class=\"menu__link\" data-drupal-link-system-path=\"node/11685\">Soil Descriptions</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-notifications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10951\">Data Notifications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11642\">Data Guidelines and Policies</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/citing\" class=\"menu__link\" data-drupal-link-system-path=\"node/11644\">Acknowledging and Citing NEON</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/publishing-research-outputs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11629\">Publishing Research Outputs</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/usage-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11643\">Usage Policies</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management\" class=\"menu__link\" data-drupal-link-system-path=\"node/10557\">Data Management</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-availability\" class=\"menu__link\" data-drupal-link-system-path=\"node/10298\">Data Availability</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-formats-conventions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10560\">Data Formats and Conventions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/8470\">Data Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-quality-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/10299\">Data Quality</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases\" class=\"menu__link\" data-drupal-link-system-path=\"node/10559\">Data Product Revisions and Releases</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2021\" class=\"menu__link\" data-drupal-link-system-path=\"node/11212\">Release 2021</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2022\" class=\"menu__link\" data-drupal-link-system-path=\"node/11956\">Release 2022</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/externally-hosted-data\" class=\"menu__link\" data-drupal-link-system-path=\"node/10552\">Externally Hosted Data</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Data &amp; Samples</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/11376\">Field Sites</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/about-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/6226\">About Field Sites and Domains</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/explore-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/10899\">Explore Field Sites</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/DP1.10111.001\" class=\"menu__link\">Site Management Data Product</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Field Sites</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact\" title=\"Impact\" class=\"menu__link\" data-drupal-link-system-path=\"node/8795\">Impact</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/observatory-blog\" class=\"menu__link\" data-drupal-link-system-path=\"node/8857\">Observatory Blog</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/case-studies\" class=\"menu__link\" data-drupal-link-system-path=\"node/10904\">Case Studies</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/spotlights\" class=\"menu__link\" data-drupal-link-system-path=\"node/10905\">Spotlights</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact/newsroom\" class=\"menu__link\" data-drupal-link-system-path=\"node/10890\">Newsroom</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/neon-news\" class=\"menu__link\" data-drupal-link-system-path=\"node/6042\">NEON in the News</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/newsletter-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/7826\">Newsletter Archive</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Impact</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6228\">Resources</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/getting-started-neon-data-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/11293\">Getting Started with NEON Data &amp; Resources</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/communication-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6316\">Documents and Communication Resources</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/communications-resources/outreach-materials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10949\">Outreach Materials</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/code-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/7076\">Code Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-guidelines\" class=\"menu__link\" data-drupal-link-system-path=\"node/8619\">Code Resources Guidelines</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-submission\" class=\"menu__link\" data-drupal-link-system-path=\"node/8631\">Code Resources Submission</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://github.com/neonscience\" class=\"menu__link\">NEON&#039;s GitHub Organization Homepage</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/6136\">Learning Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/science-videos\" class=\"menu__link\" data-drupal-link-system-path=\"node/5345\">Science Videos</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/tutorials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10896\">Tutorials</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/workshops-courses\" class=\"menu__link\" data-drupal-link-system-path=\"node/6529\">Workshops &amp; Courses</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/teaching-modules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10909\">Teaching Modules</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/faculty-mentoring-networks\" class=\"menu__link\" data-drupal-link-system-path=\"node/7463\">Faculty Mentoring Networks</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/data-education-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/7828\">Data Education Fellows</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/research-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/10764\">Research Support and Assignable Assets</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/field-site-coordination\" class=\"menu__link\" data-drupal-link-system-path=\"node/6\">Field Site Coordination</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/letters-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/8731\">Letters of Support</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/mobile-deployment-platforms\" class=\"menu__link\" data-drupal-link-system-path=\"node/7751\">Mobile Deployment Platforms</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/permits-permissions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10769\">Permits and Permissions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/aop-flight-campaigns\" class=\"menu__link\" data-drupal-link-system-path=\"node/7754\">AOP Flight Campaigns</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/assignable-assets-faqs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11535\">Assignable Assets FAQs</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/funding-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/11327\">Funding Opportunities </a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Resources</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved\" class=\"menu__link\" data-drupal-link-system-path=\"node/6753\">Get Involved</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/upcoming-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10737\">Upcoming Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/past-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10738\">Past Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/neon-ambassador-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/11625\">NEON Ambassador Program</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/collaborative-works\" class=\"menu__link\" data-drupal-link-system-path=\"node/12059\">Collaborative Works</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/efi-rcn-neon-ecological-forecasting-challenge\" class=\"menu__link\" data-drupal-link-system-path=\"node/11363\">EFI-NEON Ecological Forecasting Challenge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/ncar-neon-community-collaborations\" class=\"menu__link\" data-drupal-link-system-path=\"node/11843\">NCAR-NEON-Community Collaborations</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/engagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10556\">Community Engagement</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/6229\">Work Opportunities</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/careers\" class=\"menu__link\" data-drupal-link-system-path=\"node/5198\">Careers</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/seasonal-fieldwork\" class=\"menu__link\" data-drupal-link-system-path=\"node/6131\">Seasonal Fieldwork</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/postdoctoral-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/8729\">Postdoctoral Fellows</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships\" class=\"menu__link\" data-drupal-link-system-path=\"node/16\">Internships</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships/intern-alumni\" class=\"menu__link\" data-drupal-link-system-path=\"node/10553\">Intern Alumni</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/partners\" class=\"menu__link\" data-drupal-link-system-path=\"node/8094\">Partners</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Get Involved</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n      \n                      <li class=\"myAccount\">\n          <a href=\"/user/login\" title=\"My Account\" class=\"menu__link\">My Account</a>\n        </li>\n\n                <li class=\"siteSearch isDesktop\">\n          <a href=\"/search/site\" title=\"Search\" class=\"menu__link\">Search</a>\n        </li>\n                <li class=\"siteSearch isMobile\">\n          \n<div\n  class=\"search-form-mobile isMobile\"\n  id=\"block-searchform-mobile\"\n  role=\"search\"\n>\n  \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n</div>\n        </li>\n          </ul>\n  \n\n\n  </nav>\n\n      </div>\n    </div>\n  </div>\n  <div class=\"l--offset isDesktop header__search visually-hidden\">\n    <div class=\"header__search--inner\">\n        <h3 class=\"header__search--title\">Search</h3>\n        \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n        <div class=\"header__search-close\">\n          <button aria-label=\"Close Search\" class=\"button__search-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z\" fill=\"#0073CF\"/><path d=\"M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z\" fill=\"#0073CF\"/></svg>\n          </button>\n\n        </div>\n    </div>\n  </div>\n          <div id=\"header__authentication-ui\"></div>\n  </header>\n\n\n";
+var _default = html = "\n<header class=\"header\" role=\"banner\">\n  <div class=\"header__inner l--offset-wide\">\n    <div class=\"header__logo\">\n      <a href=\"/\" title=\"Home\" rel=\"home\"     \n  \n  \n  \n  \n class=\"logo\"\n>\n      <img src=\"https://www.neonscience.org/themes/custom/neon/logo.png\" alt=\" logo\" class=\"logo__image\">\n  </a>    </div>\n    <input type=\"checkbox\" id=\"nav-trigger\" class=\"nav-trigger js-mobile-nav-trigger\" aria-label=\"Mobile Navigation Trigger\" value=\"expanded\" />\n    <label for=\"nav-trigger\">\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--expand\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"18\" viewBox=\"0 0 20 18\"><path d=\"M0 0h20v2H0V0zm0 16h20v2H0v-2zm0-8h20v2H0V8z\"/></svg>\n\n      <svg class=\"nav-trigger__icon nav-trigger__icon--collapse\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path d=\"M1.636.222l14.142 14.142-1.414 1.414L.222 1.636 1.636.222zM.222 14.364L14.364.222l1.414 1.414L1.636 15.778.222 14.364z\"/></svg>\n\n    </label>\n    <div class=\"authContainer\">\n              <a href=\"/user/login\">Sign In</a>\n          </div>\n    <div class=\"header__site-navigation\">\n      <div class=\"header__menu-main\">\n        <nav role=\"navigation\" aria-labelledby=\"block-neon-main-menu-menu\" id=\"block-neon-main-menu\">\n            \n  <h2 class=\"visually-hidden\" id=\"block-neon-main-menu-menu\">Main navigation</h2>\n  \n\n        \n          <ul  class=\"menu menu--main\" data-depth=\"0\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about\" class=\"menu__link\" title=\"About Us\" data-drupal-link-system-path=\"node/8793\">About Us</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/overview\" class=\"menu__link\" data-drupal-link-system-path=\"node/10531\">Overview</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10532\">Spatial and Temporal Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/overview/history\" class=\"menu__link\" data-drupal-link-system-path=\"node/19\">History</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/visionandmanagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10533\">Vision and Management</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/steac\" class=\"menu__link\" data-drupal-link-system-path=\"node/7563\">Advisory Committee: STEAC</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups/twgs\" class=\"menu__link\" data-drupal-link-system-path=\"node/6273\">Technical Working Groups (TWGs)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/faq\" class=\"menu__link\" data-drupal-link-system-path=\"node/10545\">FAQ</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/about/contact-us\" class=\"menu__link\" data-drupal-link-system-path=\"node/24\">Contact Us</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/contact-us/field-offices\" class=\"menu__link\" data-drupal-link-system-path=\"node/7874\">Field Offices</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/user-accounts\" class=\"menu__link\" data-drupal-link-system-path=\"node/8563\">User Accounts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/staff\" class=\"menu__link\" data-drupal-link-system-path=\"node/8802\">Staff</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>About Us</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/1\">Data &amp; Samples</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data\" class=\"menu__link\" data-drupal-link-system-path=\"node/8858\">Data Portal</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/explore\" class=\"menu__link\">Explore Data Products</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/visualizations/data-availability\" class=\"menu__link\">Data Availability Charts</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data/spatial-data-maps\" class=\"menu__link\" data-drupal-link-system-path=\"node/10547\">Spatial Data &amp; Maps</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-api\" class=\"menu__link\">API &amp; GraphQL</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/prototype-search\" class=\"menu__link\">Prototype Data</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/web/external-lab-ingest\" class=\"menu__link\">External Lab Data Ingest (restricted)</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10295\">Samples &amp; Specimens</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/samples/find-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/8174\">Discover and Use NEON Samples</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/6223\">Sample Types</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-repositories\" class=\"menu__link\" data-drupal-link-system-path=\"node/10907\">Sample Repositories</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/sample-explorer\" class=\"menu__link\">Sample Explorer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/soil-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/5\">Megapit and Distributed Initial Characterization Soil Archives</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/10906\">Sample Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/sample-quality\" class=\"menu__link\" data-drupal-link-system-path=\"node/10908\">Sample Quality</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/taxonomic-lists\" class=\"menu__link\">Taxonomic Lists</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection\" class=\"menu__link\" data-drupal-link-system-path=\"node/4776\">Collection Methods</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/protocols-standardized-methods\" class=\"menu__link\" data-drupal-link-system-path=\"node/9\">Protocols &amp; Standardized Methods</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/airborne-remote-sensing\" class=\"menu__link\" data-drupal-link-system-path=\"node/3821\">AIrborne Remote Sensing</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-box-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10550\">Flight Box Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/flight-schedules-coverage\" class=\"menu__link\" data-drupal-link-system-path=\"node/7871\">Flight Schedules and Coverage</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/daily-flight-reports\" class=\"menu__link\" data-drupal-link-system-path=\"node/10542\">Daily Flight Reports</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/camera\" class=\"menu__link\" data-drupal-link-system-path=\"node/10554\">Camera</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/imaging-spectrometer\" class=\"menu__link\" data-drupal-link-system-path=\"node/10555\">Imaging Spectrometer</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/lidar\" class=\"menu__link\" data-drupal-link-system-path=\"node/10551\">Lidar</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/automated-instruments\" class=\"menu__link\" data-drupal-link-system-path=\"node/7819\">Automated Instruments</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10897\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sensor-collection-frequency\" class=\"menu__link\" data-drupal-link-system-path=\"node/10901\">Sensor Collection Frequency</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/instrumented-collection-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10900\">Instrumented Collection Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/meteorology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7842\">Meteorology</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/phenocams\" class=\"menu__link\" data-drupal-link-system-path=\"node/7843\">Phenocams</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-sensors\" class=\"menu__link\" data-drupal-link-system-path=\"node/7841\">Soil Sensors</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/groundwater\" class=\"menu__link\" data-drupal-link-system-path=\"node/7839\">Ground Water</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/surface-water\" class=\"menu__link\" data-drupal-link-system-path=\"node/7840\">Surface Water</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observational-sampling\" class=\"menu__link\" data-drupal-link-system-path=\"node/7820\">Observational Sampling</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/site-level-sampling-design\" class=\"menu__link\" data-drupal-link-system-path=\"node/10893\">Site Level Sampling Design</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sampling-schedules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10889\">Sampling Schedules</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/observation-types\" class=\"menu__link\" data-drupal-link-system-path=\"node/10535\">Observation Types</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"4\">\n\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3277\">Aquatic Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/aquatic-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8113\">Aquatic Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/fish\" class=\"menu__link\" data-drupal-link-system-path=\"node/7916\">Fish</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/macroinvertebrates-zooplankton\" class=\"menu__link\" data-drupal-link-system-path=\"node/10538\">Macroinvertebrates &amp; Zooplankton</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/algae-aquatic-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8278\">Periphyton, Phytoplankton, and Aquatic Plants</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-organisms\" class=\"menu__link\" data-drupal-link-system-path=\"node/3278\">Terrestrial Organisms</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/birds\" class=\"menu__link\" data-drupal-link-system-path=\"node/8288\">Birds</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ground-beetles\" class=\"menu__link\" data-drupal-link-system-path=\"node/8614\">Ground Beetles</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/mosquitoes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8290\">Mosquitoes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/small-mammals\" class=\"menu__link\" data-drupal-link-system-path=\"node/8616\">Small Mammals</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soil-microbes\" class=\"menu__link\" data-drupal-link-system-path=\"node/8617\">Soil Microbes</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/terrestrial-plants\" class=\"menu__link\" data-drupal-link-system-path=\"node/8679\">Terrestrial Plants</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/ticks\" class=\"menu__link\" data-drupal-link-system-path=\"node/8615\">Ticks</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/hydrology-geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/10536\">Hydrology &amp; Geomorphology</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/discharge\" class=\"menu__link\" data-drupal-link-system-path=\"node/10537\">Discharge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/geomorphology\" class=\"menu__link\" data-drupal-link-system-path=\"node/7917\">Geomorphology</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/biogeochemistry\" class=\"menu__link\" data-drupal-link-system-path=\"node/7918\">Biogeochemistry</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-collection/observational-sampling/observation-types/dna-sequences\" class=\"menu__link\" data-drupal-link-system-path=\"node/7844\">DNA Sequences</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/pathogens\" class=\"menu__link\" data-drupal-link-system-path=\"node/7881\">Pathogens</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/sediments\" class=\"menu__link\" data-drupal-link-system-path=\"node/10541\">Sediments</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-collection/soils\" class=\"menu__link\" data-drupal-link-system-path=\"node/10549\">Soils</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"5\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-collection/soils/soil-descriptions\" class=\"menu__link\" data-drupal-link-system-path=\"node/11685\">Soil Descriptions</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-notifications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10951\">Data Notifications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11642\">Data Guidelines and Policies</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/citing\" class=\"menu__link\" data-drupal-link-system-path=\"node/11644\">Acknowledging and Citing NEON</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/publishing-research-outputs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11629\">Publishing Research Outputs</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/guidelines-policies/usage-policies\" class=\"menu__link\" data-drupal-link-system-path=\"node/11643\">Usage Policies</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management\" class=\"menu__link\" data-drupal-link-system-path=\"node/10557\">Data Management</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-availability\" class=\"menu__link\" data-drupal-link-system-path=\"node/10298\">Data Availability</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-formats-conventions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10560\">Data Formats and Conventions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-processing\" class=\"menu__link\" data-drupal-link-system-path=\"node/8470\">Data Processing</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-quality-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/10299\">Data Quality</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases\" class=\"menu__link\" data-drupal-link-system-path=\"node/10559\">Data Product Revisions and Releases</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2021\" class=\"menu__link\" data-drupal-link-system-path=\"node/11212\">Release 2021</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/data-revisions-releases/release-2022\" class=\"menu__link\" data-drupal-link-system-path=\"node/11956\">Release 2022</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/data-samples/data-management/externally-hosted-data\" class=\"menu__link\" data-drupal-link-system-path=\"node/10552\">Externally Hosted Data</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Data &amp; Samples</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/11376\">Field Sites</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/about-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/6226\">About Field Sites and Domains</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/field-sites/explore-field-sites\" class=\"menu__link\" data-drupal-link-system-path=\"node/10899\">Explore Field Sites</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/data-products/DP1.10111.001\" class=\"menu__link\">Site Management Data Product</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Field Sites</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact\" title=\"Impact\" class=\"menu__link\" data-drupal-link-system-path=\"node/8795\">Impact</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/observatory-blog\" class=\"menu__link\" data-drupal-link-system-path=\"node/8857\">Observatory Blog</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/case-studies\" class=\"menu__link\" data-drupal-link-system-path=\"node/10904\">Case Studies</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/spotlights\" class=\"menu__link\" data-drupal-link-system-path=\"node/10905\">Spotlights</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/impact/newsroom\" class=\"menu__link\" data-drupal-link-system-path=\"node/10890\">Newsroom</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/neon-news\" class=\"menu__link\" data-drupal-link-system-path=\"node/6042\">NEON in the News</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/newsroom/newsletter-archive\" class=\"menu__link\" data-drupal-link-system-path=\"node/7826\">Newsletter Archive</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Impact</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6228\">Resources</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/getting-started-neon-data-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/11293\">Getting Started with NEON Data &amp; Resources</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/communication-resources\" class=\"menu__link\" data-drupal-link-system-path=\"node/6316\">Documents and Communication Resources</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/impact/papers-publications\" class=\"menu__link\" data-drupal-link-system-path=\"node/10915\">Papers &amp; Publications</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://data.neonscience.org/documents\" class=\"menu__link\">Document Library</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/communications-resources/outreach-materials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10949\">Outreach Materials</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/code-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/7076\">Code Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-guidelines\" class=\"menu__link\" data-drupal-link-system-path=\"node/8619\">Code Resources Guidelines</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/code-hub/code-resources-submission\" class=\"menu__link\" data-drupal-link-system-path=\"node/8631\">Code Resources Submission</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://github.com/neonscience\" class=\"menu__link\">NEON&#039;s GitHub Organization Homepage</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub\" class=\"menu__link\" data-drupal-link-system-path=\"node/6136\">Learning Hub</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/science-videos\" class=\"menu__link\" data-drupal-link-system-path=\"node/5345\">Science Videos</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/tutorials\" class=\"menu__link\" data-drupal-link-system-path=\"node/10896\">Tutorials</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/workshops-courses\" class=\"menu__link\" data-drupal-link-system-path=\"node/6529\">Workshops &amp; Courses</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/teaching-modules\" class=\"menu__link\" data-drupal-link-system-path=\"node/10909\">Teaching Modules</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/faculty-mentoring-networks\" class=\"menu__link\" data-drupal-link-system-path=\"node/7463\">Faculty Mentoring Networks</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/learning-hub/data-education-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/7828\">Data Education Fellows</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/resources/research-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/10764\">Research Support and Assignable Assets</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/field-site-coordination\" class=\"menu__link\" data-drupal-link-system-path=\"node/12209\">Field Site Coordination</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/letters-support\" class=\"menu__link\" data-drupal-link-system-path=\"node/8731\">Letters of Support</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/mobile-deployment-platforms\" class=\"menu__link\" data-drupal-link-system-path=\"node/7751\">Mobile Deployment Platforms</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/permits-permissions\" class=\"menu__link\" data-drupal-link-system-path=\"node/10769\">Permits and Permissions</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/aop-flight-campaigns\" class=\"menu__link\" data-drupal-link-system-path=\"node/7754\">AOP Flight Campaigns</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/samples/excess-samples\" class=\"menu__link\" data-drupal-link-system-path=\"node/10297\">Excess Samples</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/research-support/assignable-assets-faqs\" class=\"menu__link\" data-drupal-link-system-path=\"node/11535\">Assignable Assets FAQs</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/resources/funding-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/11327\">Funding Opportunities </a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Resources</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved\" class=\"menu__link\" data-drupal-link-system-path=\"node/6753\">Get Involved</a>\n\n          \n                                        <button class='arrow visually-hidden focusable' tabindex='0' aria-label='Toggle Mega Menu'><svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5 1 1' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></button>\n\n                            <div class='subNavWrapper'>\n                            <div class='innerSubNavWrapper'>\n            \n                      <ul  class=\"menu menu--main\" data-depth=\"1\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/about/advisory-groups\" class=\"menu__link\" data-drupal-link-system-path=\"node/10534\">Advisory Groups</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/upcoming-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10737\">Upcoming Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/past-events\" class=\"menu__link\" data-drupal-link-system-path=\"node/10738\">Past Events</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/neon-ambassador-program\" class=\"menu__link\" data-drupal-link-system-path=\"node/11625\">NEON Ambassador Program</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/collaborative-works\" class=\"menu__link\" data-drupal-link-system-path=\"node/12059\">Collaborative Works</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/efi-rcn-neon-ecological-forecasting-challenge\" class=\"menu__link\" data-drupal-link-system-path=\"node/11363\">EFI-NEON Ecological Forecasting Challenge</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/ncar-neon-community-collaborations\" class=\"menu__link\" data-drupal-link-system-path=\"node/11843\">NCAR-NEON-Community Collaborations</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/neon-science-summit\" class=\"menu__link\" data-drupal-link-system-path=\"node/12057\">NEON Science Summit</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/engagement\" class=\"menu__link\" data-drupal-link-system-path=\"node/10556\">Community Engagement</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities\" class=\"menu__link\" data-drupal-link-system-path=\"node/6229\">Work Opportunities</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"2\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/careers\" class=\"menu__link\" data-drupal-link-system-path=\"node/5198\">Careers</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/seasonal-fieldwork\" class=\"menu__link\" data-drupal-link-system-path=\"node/6131\">Seasonal Fieldwork</a>\n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/postdoctoral-fellows\" class=\"menu__link\" data-drupal-link-system-path=\"node/8729\">Postdoctoral Fellows</a>\n\n                  </li>\n              <li  class=\"menu__item menu__item--expanded\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships\" class=\"menu__link\" data-drupal-link-system-path=\"node/16\">Internships</a>\n\n          \n            \n                      <ul  class=\"menu menu--main\" data-depth=\"3\">\n\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/work-opportunities/internships/intern-alumni\" class=\"menu__link\" data-drupal-link-system-path=\"node/10553\">Intern Alumni</a>\n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n      \n          </ul>\n  \n\n            \n\n                  </li>\n              <li  class=\"menu__item\">\n          <a href=\"https://www.neonscience.org/get-involved/partners\" class=\"menu__link\" data-drupal-link-system-path=\"node/8094\">Partners</a>\n\n                  </li>\n      \n          </ul>\n  \n\n                          </div>\n\n              <div class='subNavLabelWrapper'>\n                <button class='subNavClose isDesktop' aria-label='Close Mega Menu'>\n                  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z' fill='#fff'/><path d='M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z' fill='#fff'/></svg>\n                </button>\n                <h3 class='isDesktop'>Get Involved</h3>\n                <button class='mobileBack isMobile' aria-label='Back'>\n                  <svg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 9L1 5l4-4M1 5h12' stroke='#0073CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\n                  </svg>\n                </button>\n              </div>\n                            </div>\n\n            \n\n                  </li>\n      \n                      <li class=\"myAccount\">\n          <a href=\"/user/login\" title=\"My Account\" class=\"menu__link\">My Account</a>\n        </li>\n\n                <li class=\"siteSearch isDesktop\">\n          <a href=\"/search/site\" title=\"Search\" class=\"menu__link\">Search</a>\n        </li>\n                <li class=\"siteSearch isMobile\">\n          \n<div\n  class=\"search-form-mobile isMobile\"\n  id=\"block-searchform-mobile\"\n  role=\"search\"\n>\n  \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n</div>\n        </li>\n          </ul>\n  \n\n\n  </nav>\n\n      </div>\n    </div>\n  </div>\n  <div class=\"l--offset isDesktop header__search visually-hidden\">\n    <div class=\"header__search--inner\">\n        <h3 class=\"header__search--title\">Search</h3>\n        \n\n<div class=\"search-api-form\" data-drupal-selector=\"search-api-form\" id=\"block-searchform\">\n  \n    \n      <form action=\"/search/site\" method=\"get\" id=\"search-api-form\" accept-charset=\"UTF-8\">\n  <div class=\"js-form-item form-item js-form-type-search form-item-title js-form-item-title form-no-label\">\n        <input title=\"Enter the terms you wish to search for.\" data-drupal-selector=\"edit-title\" type=\"search\" id=\"edit-title\" name=\"title\" value=\"\" size=\"15\" maxlength=\"128\" class=\"form-search\" />\n\n        <label for=\"edit-title\" class=\"visually-hidden\">Search</label>\n      </div>\n<div data-drupal-selector=\"edit-actions\" class=\"form-actions js-form-wrapper form-wrapper\" id=\"edit-actions\">\n\n<input data-drupal-selector=\"edit-submit\" type=\"submit\" id=\"edit-submit\" value=\"Search\" class=\"button js-form-submit form-submit button--search\" />\n</div>\n\n</form>\n\n  </div>\n\n        <div class=\"header__search-close\">\n          <button aria-label=\"Close Search\" class=\"button__search-close\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.808 17.778L17.778.808l1.414 1.414-16.97 16.97-1.414-1.414z\" fill=\"#0073CF\"/><path d=\"M2.222.808l16.97 16.97-1.414 1.414L.808 2.222 2.222.808z\" fill=\"#0073CF\"/></svg>\n          </button>\n\n        </div>\n    </div>\n  </div>\n          <div id=\"header__authentication-ui\"></div>\n  </header>\n\n\n";
 
 exports.default = _default;
\ No newline at end of file
diff --git a/lib/service/DocumentService.d.ts b/lib/service/DocumentService.d.ts
new file mode 100644
index 00000000..ce70cde8
--- /dev/null
+++ b/lib/service/DocumentService.d.ts
@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { DataProductSpec, NeonDocument, QuickStartGuideDocument } from '../types/neonApi';
+import { Nullable } from '../types/core';
+export interface DocumentTypeListItemDef {
+    match: (type: string) => boolean;
+    title: (type?: string) => string;
+    Icon: React.ReactNode;
+}
+export interface ParsedQsgNameResult {
+    name: string;
+    matchedName: string;
+    matchedVersion: string;
+    matchedExtension: string;
+    parsedVersion: number;
+}
+export declare const VIEWER_SUPPORTED_DOC_TYPES: string[];
+export declare type DocumentCallback = (document: NeonDocument) => void;
+export interface IDocumentService {
+    formatBytes: (bytes: number) => string;
+    resolveDocumentType: (document: NeonDocument) => DocumentTypeListItemDef;
+    getDocumentTypeTitle: (document: NeonDocument) => string;
+    findFirstByDocumentTypeTitle: (documents: NeonDocument[], typeTitle: string) => Nullable<NeonDocument>;
+    getDocumentTypeListItemDefs: () => Record<string, DocumentTypeListItemDef>;
+    getDocumentTypeListItemDefKeys: () => string[];
+    getDefaultDocumentTypeListItemDef: () => DocumentTypeListItemDef;
+    isQuickStartGuide: (doc: NeonDocument) => boolean;
+    isQuickStartGuideName: (name: Nullable<string>) => boolean;
+    getQuickStartGuideNameRegex: () => RegExp;
+    parseQuickStartGuideName: (name: string) => Nullable<ParsedQsgNameResult>;
+    isViewerSupported: (doc: NeonDocument) => boolean;
+    transformSpecs: (specs: DataProductSpec[]) => NeonDocument[];
+    transformSpec: (spec: DataProductSpec) => NeonDocument;
+    transformQuickStartGuideDocuments: (documents: QuickStartGuideDocument[]) => NeonDocument[];
+    transformQuickStartGuideDocument: (document: QuickStartGuideDocument) => NeonDocument;
+    applyDisplaySort: (documents: NeonDocument[], reverse?: boolean, qsgPrecedence?: boolean) => NeonDocument[];
+    downloadDocument: (document: NeonDocument, onSuccessCb?: DocumentCallback, onErrorCb?: DocumentCallback) => void;
+    /**
+     * Utilize save as APIs to trigger a document download.
+     * EXPERIMENTAL! Note that this utilizes not-yet-standard web APIs
+     * that will not work across all browsers.
+     * @param document
+     * @param onSuccessCb
+     * @param onErrorCb
+     * @return
+     */
+    saveDocument: (document: NeonDocument, onSuccessCb?: DocumentCallback, onErrorCb?: DocumentCallback) => void;
+}
+declare const DocumentService: IDocumentService;
+export default DocumentService;
diff --git a/lib/service/DocumentService.js b/lib/service/DocumentService.js
new file mode 100644
index 00000000..09f5cfa4
--- /dev/null
+++ b/lib/service/DocumentService.js
@@ -0,0 +1,513 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VIEWER_SUPPORTED_DOC_TYPES = void 0;
+
+var _Archive = _interopRequireDefault(require("@material-ui/icons/Archive"));
+
+var _Code = _interopRequireDefault(require("@material-ui/icons/Code"));
+
+var _DescriptionOutlined = _interopRequireDefault(require("@material-ui/icons/DescriptionOutlined"));
+
+var _InsertDriveFile = _interopRequireDefault(require("@material-ui/icons/InsertDriveFile"));
+
+var _Photo = _interopRequireDefault(require("@material-ui/icons/Photo"));
+
+var _Tv = _interopRequireDefault(require("@material-ui/icons/Tv"));
+
+var _GridOn = _interopRequireDefault(require("@material-ui/icons/GridOn"));
+
+var _NeonEnvironment = _interopRequireDefault(require("../components/NeonEnvironment/NeonEnvironment"));
+
+var _typeUtil = require("../util/typeUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); _groups.set(_this, groups || _groups.get(re)); return _setPrototypeOf(_this, BabelRegExp.prototype); } _inherits(BabelRegExp, RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; if (_typeof(args[args.length - 1]) !== "object") { args = [].slice.call(args); args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var VIEWER_SUPPORTED_DOC_TYPES = ['application/pdf', 'text/html', 'text/markdown', 'text/plain'];
+exports.VIEWER_SUPPORTED_DOC_TYPES = VIEWER_SUPPORTED_DOC_TYPES;
+var documentTypes = {
+  pdf: {
+    match: function match(type) {
+      return type === 'application/pdf' || type.includes('pdf');
+    },
+    title: function title(type) {
+      return 'PDF';
+    },
+    Icon: _DescriptionOutlined.default
+  },
+  markdown: {
+    match: function match(type) {
+      return type === 'text/markdown';
+    },
+    title: function title(type) {
+      return 'Markdown';
+    },
+    Icon: _DescriptionOutlined.default
+  },
+  image: {
+    match: function match(type) {
+      return ['image/gif', 'image/png', 'image/jpeg'].includes(type) || type.startsWith('image');
+    },
+    title: function title(type) {
+      return (0, _typeUtil.isStringNonEmpty)(type) ? "Image (".concat((type.match(/\/(.*)$/) || [])[1] || 'unknown type', ")") : 'unknown type';
+    },
+    Icon: _Photo.default
+  },
+  csv: {
+    match: function match(type) {
+      return type === 'text/csv' || type.includes('csv');
+    },
+    title: function title(type) {
+      return 'CSV';
+    },
+    Icon: _GridOn.default
+  },
+  text: {
+    match: function match(type) {
+      return type === 'text/plain';
+    },
+    title: function title(type) {
+      return 'Plain text file';
+    },
+    Icon: _DescriptionOutlined.default
+  },
+  document: {
+    match: function match(type) {
+      return ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'].includes(type);
+    },
+    title: function title(type) {
+      return 'Document';
+    },
+    Icon: _DescriptionOutlined.default
+  },
+  spreadsheet: {
+    match: function match(type) {
+      return type.includes('spreadsheet') || type.includes('excel');
+    },
+    title: function title(type) {
+      return 'Spreadsheet';
+    },
+    Icon: _GridOn.default
+  },
+  presentation: {
+    match: function match(type) {
+      return type.includes('presentation') || type.includes('powerpoint');
+    },
+    title: function title(type) {
+      return 'Presentation';
+    },
+    Icon: _Tv.default
+  },
+  archive: {
+    match: function match(type) {
+      return type.includes('zip');
+    },
+    title: function title(type) {
+      return 'ZIP archive';
+    },
+    Icon: _Archive.default
+  },
+  binary: {
+    match: function match(type) {
+      return type === 'application/octet-stream';
+    },
+    title: function title(type) {
+      return 'Raw binary data';
+    },
+    Icon: _InsertDriveFile.default
+  },
+  xml: {
+    match: function match(type) {
+      return type === 'application/xml';
+    },
+    title: function title(type) {
+      return 'XML';
+    },
+    Icon: _Code.default
+  },
+  html: {
+    match: function match(type) {
+      return type === 'text/html';
+    },
+    title: function title(type) {
+      return 'HTML';
+    },
+    Icon: _Code.default
+  }
+};
+var documentTypeKeys = Object.keys(documentTypes);
+var defaultDocumentType = {
+  match: function match(type) {
+    return true;
+  },
+  title: function title(type) {
+    return 'File type unavailable';
+  },
+  Icon: _InsertDriveFile.default
+};
+
+var getFilenameFromContentDisposition = function getFilenameFromContentDisposition(response) {
+  var filename = null;
+  var contentDisposition = response.headers.get('content-disposition');
+
+  if ((0, _typeUtil.isStringNonEmpty)(contentDisposition)) {
+    var filenameSplit = contentDisposition === null || contentDisposition === void 0 ? void 0 : contentDisposition.split('filename=');
+    var splitLength = filenameSplit ? filenameSplit.length : -1;
+
+    if ((0, _typeUtil.existsNonEmpty)(filenameSplit) && splitLength >= 2) {
+      var quotedFilename = filenameSplit[1];
+      filename = quotedFilename.replaceAll('"', '');
+    }
+  }
+
+  return filename;
+};
+
+var DocumentService = {
+  formatBytes: function formatBytes(bytes) {
+    if (!Number.isInteger(bytes) || bytes < 0) {
+      return '0.000 B';
+    }
+
+    var scales = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    var log = Math.log(bytes) / Math.log(1024);
+    var scale = Math.floor(log);
+    var precision = Math.floor(3 - (log - scale) * 3);
+    return "".concat((bytes / Math.pow(1024, scale)).toFixed(precision), " ").concat(scales[scale]);
+  },
+  resolveDocumentType: function resolveDocumentType(document) {
+    var documentType = DocumentService.getDefaultDocumentTypeListItemDef();
+
+    if (typeof document.type === 'string') {
+      var matchKey = DocumentService.getDocumentTypeListItemDefKeys().find(function (key) {
+        return DocumentService.getDocumentTypeListItemDefs()[key].match(document.type);
+      });
+
+      if (matchKey) {
+        documentType = DocumentService.getDocumentTypeListItemDefs()[matchKey];
+      }
+    }
+
+    return documentType;
+  },
+  getDocumentTypeTitle: function getDocumentTypeTitle(document) {
+    var documentType = DocumentService.resolveDocumentType(document);
+    var typeTitle = documentType.title;
+    return typeTitle(document.type);
+  },
+  findFirstByDocumentTypeTitle: function findFirstByDocumentTypeTitle(documents, typeTitle) {
+    if (!(0, _typeUtil.existsNonEmpty)(documents) || !(0, _typeUtil.isStringNonEmpty)(typeTitle)) {
+      return null;
+    }
+
+    return documents.find(function (document) {
+      var typeTitleString = DocumentService.getDocumentTypeTitle(document);
+      return typeTitle.localeCompare(typeTitleString) === 0;
+    });
+  },
+  getDocumentTypeListItemDefs: function getDocumentTypeListItemDefs() {
+    return documentTypes;
+  },
+  getDocumentTypeListItemDefKeys: function getDocumentTypeListItemDefKeys() {
+    return documentTypeKeys;
+  },
+  getDefaultDocumentTypeListItemDef: function getDefaultDocumentTypeListItemDef() {
+    return defaultDocumentType;
+  },
+  isQuickStartGuide: function isQuickStartGuide(doc) {
+    return (0, _typeUtil.exists)(doc) && DocumentService.isQuickStartGuideName(doc.name);
+  },
+  isQuickStartGuideName: function isQuickStartGuideName(name) {
+    return (0, _typeUtil.isStringNonEmpty)(name) && name.startsWith('NEON.QSG.');
+  },
+  getQuickStartGuideNameRegex: function getQuickStartGuideNameRegex() {
+    return new RegExp( /*#__PURE__*/_wrapRegExp(/^(NEON\.QSG\.DP[0-9]{1}\.[0-9]{5}\.[0-9]{3})(v([0-9]+))*(\.([a-z]+))*$/, {
+      name: 1,
+      version: 2,
+      versionNumber: 3,
+      extension: 4,
+      extensionName: 5
+    }));
+  },
+  parseQuickStartGuideName: function parseQuickStartGuideName(name) {
+    var regex = DocumentService.getQuickStartGuideNameRegex();
+    if (!regex) return null;
+    var matches = regex.exec(name);
+    if (!matches) return null;
+    if (matches.length <= 0) return null;
+    return {
+      name: name,
+      matchedName: matches[1],
+      matchedVersion: matches[2],
+      matchedExtension: matches[4],
+      parsedVersion: (0, _typeUtil.isStringNonEmpty)(matches[3]) ? parseInt(matches[3], 10) : -1
+    };
+  },
+  isViewerSupported: function isViewerSupported(doc) {
+    return (0, _typeUtil.exists)(doc) && (0, _typeUtil.isStringNonEmpty)(doc.type) && VIEWER_SUPPORTED_DOC_TYPES.includes(doc.type);
+  },
+  transformSpecs: function transformSpecs(specs) {
+    if (!(0, _typeUtil.existsNonEmpty)(specs)) {
+      return [];
+    }
+
+    return specs.map(function (spec) {
+      return DocumentService.transformSpec(spec);
+    });
+  },
+  transformSpec: function transformSpec(spec) {
+    return {
+      name: spec.specNumber,
+      type: spec.specType,
+      size: spec.specSize,
+      description: spec.specDescription
+    };
+  },
+  transformQuickStartGuideDocuments: function transformQuickStartGuideDocuments(documents) {
+    if (!(0, _typeUtil.existsNonEmpty)(documents)) {
+      return [];
+    }
+
+    return documents.map(function (document) {
+      return DocumentService.transformQuickStartGuideDocument(document);
+    });
+  },
+  transformQuickStartGuideDocument: function transformQuickStartGuideDocument(document) {
+    return {
+      name: document.name,
+      type: document.type,
+      size: document.size,
+      description: document.description
+    };
+  },
+  applyDisplaySort: function applyDisplaySort(documents, reverse, qsgPrecedence) {
+    if (!(0, _typeUtil.existsNonEmpty)(documents)) {
+      return [];
+    }
+
+    var appliedReverse = reverse === true;
+    var appliedQsgPrecedence = qsgPrecedence === true;
+
+    var sortedDocs = _toConsumableArray(documents);
+
+    sortedDocs.sort(function (a, b) {
+      if (!(0, _typeUtil.exists)(a) && !(0, _typeUtil.exists)(b)) {
+        return 0;
+      }
+
+      if (!(0, _typeUtil.exists)(a)) {
+        return appliedReverse ? -1 : 1;
+      }
+
+      if (!(0, _typeUtil.exists)(b)) {
+        return appliedReverse ? 1 : -1;
+      }
+
+      if (appliedQsgPrecedence) {
+        var aQsg = DocumentService.isQuickStartGuide(a);
+        var bQsg = DocumentService.isQuickStartGuide(b);
+
+        if (!aQsg || !bQsg) {
+          if (aQsg) {
+            return appliedReverse ? 1 : -1;
+          }
+
+          if (bQsg) {
+            return appliedReverse ? -1 : 1;
+          }
+        }
+      }
+
+      if (!(0, _typeUtil.isStringNonEmpty)(a.description) && !(0, _typeUtil.isStringNonEmpty)(b.description)) {
+        return 0;
+      }
+
+      if (!(0, _typeUtil.isStringNonEmpty)(a.description)) {
+        return appliedReverse ? -1 : 1;
+      }
+
+      if (!(0, _typeUtil.isStringNonEmpty)(b.description)) {
+        return appliedReverse ? 1 : -1;
+      }
+
+      var descriptionCompare = a.description.localeCompare(b.description);
+
+      if (descriptionCompare === 0) {
+        if (!(0, _typeUtil.isStringNonEmpty)(a.name) && !(0, _typeUtil.isStringNonEmpty)(b.name)) {
+          return 0;
+        }
+
+        if (!(0, _typeUtil.isStringNonEmpty)(a.name)) {
+          return appliedReverse ? -1 : 1;
+        }
+
+        if (!(0, _typeUtil.isStringNonEmpty)(b.name)) {
+          return appliedReverse ? 1 : -1;
+        }
+
+        return a.name.localeCompare(b.name);
+      }
+
+      return descriptionCompare;
+    });
+    return sortedDocs;
+  },
+  downloadDocument: function downloadDocument(document, onSuccessCb, onErrorCb) {
+    var apiPath = DocumentService.isQuickStartGuide(document) ? "".concat(_NeonEnvironment.default.getFullApiPath('quickStartGuides'), "/").concat(document.name) : "".concat(_NeonEnvironment.default.getFullApiPath('documents'), "/").concat(document.name);
+    fetch(apiPath, {
+      method: 'HEAD'
+    }).then(function (response) {
+      if (!response.ok) {
+        throw new Error('Invalid HEAD response');
+      }
+
+      var filename = getFilenameFromContentDisposition(response);
+
+      if (!(0, _typeUtil.isStringNonEmpty)(filename)) {
+        filename = document.name;
+      }
+
+      fetch(apiPath).then(function (downloadResponse) {
+        if (!downloadResponse.ok || !downloadResponse.body) {
+          throw new Error('Invalid download response');
+        }
+
+        return downloadResponse.blob();
+      }).then(function (blob) {
+        try {
+          var link = window.document.createElement('a');
+          link.href = URL.createObjectURL(blob);
+          link.setAttribute('download', filename);
+          window.document.body.appendChild(link);
+          link.click();
+          window.document.body.removeChild(link);
+
+          if (onSuccessCb) {
+            onSuccessCb(document);
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(e);
+
+          if (onErrorCb) {
+            onErrorCb(document);
+          }
+        }
+      }).catch(function (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+
+        if (onErrorCb) {
+          onErrorCb(document);
+        }
+      });
+    }).catch(function (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+
+      if (onErrorCb) {
+        onErrorCb(document);
+      }
+    });
+  },
+
+  /**
+   * Utilize save as APIs to trigger a document download.
+   * EXPERIMENTAL! Note that this utilizes not-yet-standard web APIs
+   * that will not work across all browsers.
+   * @param document
+   * @param onSuccessCb
+   * @param onErrorCb
+   * @return
+   */
+  saveDocument: function saveDocument(document, onSuccessCb, onErrorCb) {
+    if (typeof window.showSaveFilePicker !== 'function') {
+      // eslint-disable-next-line no-console
+      console.error('Operation not supported');
+
+      if (onErrorCb) {
+        onErrorCb(document);
+      }
+    }
+
+    var apiPath = DocumentService.isQuickStartGuide(document) ? "".concat(_NeonEnvironment.default.getFullApiPath('quickStartGuides'), "/").concat(document.name) : "".concat(_NeonEnvironment.default.getFullApiPath('documents'), "/").concat(document.name);
+    fetch(apiPath, {
+      method: 'HEAD'
+    }).then(function (response) {
+      if (!response.ok) {
+        throw new Error('Invalid HEAD response');
+      }
+
+      var filename = getFilenameFromContentDisposition(response);
+
+      if (!(0, _typeUtil.isStringNonEmpty)(filename)) {
+        filename = document.name;
+      }
+
+      var saveOpts = {
+        suggestedName: filename
+      };
+      window.showSaveFilePicker(saveOpts).then(function (fileHandle) {
+        return fileHandle.createWritable();
+      }).then(function (writable) {
+        fetch(apiPath).then(function (downloadResponse) {
+          if (!downloadResponse.ok || !downloadResponse.body) {
+            throw new Error('Invalid download response');
+          }
+
+          return downloadResponse.body.pipeTo(writable);
+        }).then(function (value) {
+          if (onSuccessCb) {
+            onSuccessCb(document);
+          }
+        }).catch(function (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+
+          if (onErrorCb) {
+            onErrorCb(document);
+          }
+        });
+      }).catch(function (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+
+        if (onErrorCb) {
+          onErrorCb(document);
+        }
+      });
+    }).catch(function (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+
+      if (onErrorCb) {
+        onErrorCb(document);
+      }
+    });
+  }
+};
+Object.freeze(DocumentService);
+var _default = DocumentService;
+exports.default = _default;
\ No newline at end of file
diff --git a/lib/types/neon.d.ts b/lib/types/neon.d.ts
deleted file mode 100644
index ef5c51b7..00000000
--- a/lib/types/neon.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface NeonDocument {
-    name: string;
-    type: string;
-    size: number;
-    description: string;
-}
diff --git a/lib/types/neon.js b/lib/types/neon.js
deleted file mode 100644
index 9a390c31..00000000
--- a/lib/types/neon.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";
\ No newline at end of file
diff --git a/lib/types/neonApi.d.ts b/lib/types/neonApi.d.ts
index e1335a0e..eb5e6027 100644
--- a/lib/types/neonApi.d.ts
+++ b/lib/types/neonApi.d.ts
@@ -19,6 +19,13 @@ export interface ReleaseDataProductBundles {
 export interface Release extends IReleaseLike {
     dataProducts: UnknownRecord[];
 }
+export interface DataProductSpec {
+    specId: string;
+    specNumber: string;
+    specType: string;
+    specSize: number;
+    specDescription: string;
+}
 export interface NeonDocument {
     name: string;
     type: string;
@@ -33,3 +40,18 @@ export interface DataProductRelease extends IReleaseLike {
     url: string;
     productDoi: DataProductReleaseDoi;
 }
+export interface QuickStartGuideDocument {
+    name: string;
+    description: string;
+    type: string;
+    size: number;
+    md5: string;
+    generationDate: string;
+    url: string;
+}
+export interface QuickStartGuideVersion {
+    name: string;
+    version: number;
+    publishedDate: string;
+    documents: QuickStartGuideDocument[];
+}
diff --git a/package-lock.json b/package-lock.json
index d15a80a2..dc7b0f58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "portal-core-components",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "portal-core-components",
-      "version": "1.12.1",
+      "version": "1.13.0",
       "dependencies": {
         "@date-io/moment": "^1.3.9",
         "@material-ui/core": "^4.11.3",
@@ -22,6 +22,7 @@
         "@types/react-router": "^5.1.8",
         "@types/react-router-dom": "^5.1.5",
         "@types/sockjs-client": "^1.1.1",
+        "@types/wicg-file-system-access": "^2020.9.5",
         "clsx": "^1.1.0",
         "core-js": "^3.2.1",
         "d3-drag": "^1.2.3",
@@ -35,7 +36,7 @@
         "html-react-parser": "^0.10.3",
         "leaflet": "^1.6.0",
         "lodash": "^4.17.15",
-        "material-table": "^1.50.0",
+        "material-table": "^1.69.3",
         "moment": "^2.24.0",
         "node-lzw": "^0.3.1",
         "papaparse": "^5.1.1",
@@ -4135,6 +4136,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@types/wicg-file-system-access": {
+      "version": "2020.9.5",
+      "resolved": "https://registry.npmjs.org/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.5.tgz",
+      "integrity": "sha512-UYK244awtmcUYQfs7FR8710MJcefL2WvkyHMjA8yJzxd1mo0Gfn88sRZ1Bls7hiUhA2w7ne1gpJ9T5g3G0wOyA=="
+    },
     "node_modules/@types/yargs": {
       "version": "15.0.13",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
@@ -4745,6 +4751,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -6536,14 +6554,20 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001274",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz",
-      "integrity": "sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==",
+      "version": "1.0.30001373",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001373.tgz",
+      "integrity": "sha512-pJYArGHrPp3TUqQzFYRmP/lwJlj8RCbVe3Gd3eJQkAV8SAC6b19XS9BjMvRdvaS8RMkaTN8ZhoHP6S1y8zzwEQ==",
       "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
-      }
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
     },
     "node_modules/canvg": {
       "version": "3.0.7",
@@ -23886,10 +23910,12 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -29145,6 +29171,11 @@
         }
       }
     },
+    "@types/wicg-file-system-access": {
+      "version": "2020.9.5",
+      "resolved": "https://registry.npmjs.org/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.5.tgz",
+      "integrity": "sha512-UYK244awtmcUYQfs7FR8710MJcefL2WvkyHMjA8yJzxd1mo0Gfn88sRZ1Bls7hiUhA2w7ne1gpJ9T5g3G0wOyA=="
+    },
     "@types/yargs": {
       "version": "15.0.13",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
@@ -29621,6 +29652,14 @@
       "dev": true,
       "requires": {
         "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+          "dev": true
+        }
       }
     },
     "ansi-html": {
@@ -31076,9 +31115,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001274",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz",
-      "integrity": "sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==",
+      "version": "1.0.30001373",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001373.tgz",
+      "integrity": "sha512-pJYArGHrPp3TUqQzFYRmP/lwJlj8RCbVe3Gd3eJQkAV8SAC6b19XS9BjMvRdvaS8RMkaTN8ZhoHP6S1y8zzwEQ==",
       "dev": true
     },
     "canvg": {
@@ -44832,10 +44871,12 @@
       "dev": true
     },
     "type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "dev": true
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "type-is": {
       "version": "1.6.18",
diff --git a/package.json b/package.json
index 3ca61aa9..64693475 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "portal-core-components",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "main": "./lib/index.js",
   "private": true,
   "homepage": "http://localhost:3010/core-components",
@@ -19,6 +19,7 @@
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5",
     "@types/sockjs-client": "^1.1.1",
+    "@types/wicg-file-system-access": "^2020.9.5",
     "clsx": "^1.1.0",
     "core-js": "^3.2.1",
     "d3-drag": "^1.2.3",
@@ -32,7 +33,7 @@
     "html-react-parser": "^0.10.3",
     "leaflet": "^1.6.0",
     "lodash": "^4.17.15",
-    "material-table": "^1.50.0",
+    "material-table": "^1.69.3",
     "moment": "^2.24.0",
     "node-lzw": "^0.3.1",
     "papaparse": "^5.1.1",
diff --git a/src/App.jsx b/src/App.jsx
index 05d340fa..3a7f7ec3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,7 +12,7 @@ import AopDataViewerStyleGuide from './lib_components/components/AopDataViewer/S
 import CitationsStyleGuide from './lib_components/components/Citation/StyleGuide';
 import DataProductAvailabilityStyleGuide from './lib_components/components/DataProductAvailability/StyleGuide';
 import DataThemeIconStyleGuide from './lib_components/components/DataThemeIcon/StyleGuide';
-import DocumentViewerStyleGuide from './lib_components/components/DocumentViewer/StyleGuide';
+import DocumentsStyleGuide from './lib_components/components/Documents/StyleGuide';
 import DownloadDataButtonStyleGuide from './lib_components/components/DownloadDataButton/StyleGuide';
 import DownloadDataContextStyleGuide from './lib_components/components/DownloadDataContext/StyleGuide';
 import ExternalHostInfoStyleGuide from './lib_components/components/ExternalHostInfo/StyleGuide';
@@ -64,9 +64,9 @@ const sidebarLinks = [
     component: DataThemeIconStyleGuide,
   },
   {
-    name: 'Document Viewer',
-    hash: '#DocumentViewer',
-    component: DocumentViewerStyleGuide,
+    name: 'Documents',
+    hash: '#Documents',
+    component: DocumentsStyleGuide,
   },
   {
     name: 'Download Data Button',
diff --git a/src/components/BasicComponents.jsx b/src/components/BasicComponents.jsx
index ff2014cf..fd54e973 100644
--- a/src/components/BasicComponents.jsx
+++ b/src/components/BasicComponents.jsx
@@ -34,6 +34,7 @@ import RightIcon from '@material-ui/icons/ChevronRight';
 
 import DocBlock from './DocBlock';
 
+import SplitButton from '../lib_components/components/Button/SplitButton';
 import Theme from '../lib_components/components/Theme/Theme';
 
 const useStyles = makeStyles((theme) => ({
@@ -271,6 +272,82 @@ export default function BasicComponents() {
         </div>
       </div>
 
+      {/* Split Button */}
+      <Divider className={classes.divider} />
+      <Typography variant="h4" component="h2" gutterBottom>SplitButton</Typography>
+      <div className={classes.row}>
+        <div className={classes.block}>
+          <SplitButton
+            name="split-button-outlined-small"
+            options={['One', 'Two', 'Three']}
+            selectedOption="One"
+            // eslint-disable-next-line no-console
+            onClick={(option) => console.log(`clicked ${option}`)}
+            // eslint-disable-next-line no-console
+            onChange={(option) => console.log(`selected ${option}`)}
+            buttonGroupProps={{ size: 'small', variant: 'outlined', color: 'primary' }}
+            buttonProps={{ size: 'small', color: 'primary' }}
+          />
+          <SplitButton
+            name="split-button-outlined"
+            options={['One', 'Two', 'Three']}
+            selectedOption="One"
+            // eslint-disable-next-line no-console
+            onClick={(option) => console.log(`clicked ${option}`)}
+            // eslint-disable-next-line no-console
+            onChange={(option) => console.log(`selected ${option}`)}
+            buttonGroupProps={{ variant: 'outlined', color: 'primary' }}
+            buttonProps={{ color: 'primary' }}
+          />
+          <SplitButton
+            name="split-button-outlined-large"
+            options={['One', 'Two', 'Three']}
+            selectedOption="One"
+            // eslint-disable-next-line no-console
+            onClick={(option) => console.log(`clicked ${option}`)}
+            // eslint-disable-next-line no-console
+            onChange={(option) => console.log(`selected ${option}`)}
+            buttonGroupProps={{ size: 'large', variant: 'outlined', color: 'primary' }}
+            buttonProps={{ size: 'large', color: 'primary' }}
+          />
+        </div>
+        <div className={classes.block}>
+          <SplitButton
+            name="split-button-contained-small"
+            options={['One', 'Two', 'Three']}
+            selectedOption="One"
+            // eslint-disable-next-line no-console
+            onClick={(option) => console.log(`clicked ${option}`)}
+            // eslint-disable-next-line no-console
+            onChange={(option) => console.log(`selected ${option}`)}
+            buttonGroupProps={{ size: 'small', variant: 'contained', color: 'primary' }}
+            buttonProps={{ size: 'small', color: 'primary', variant: 'contained' }}
+          />
+          <SplitButton
+            name="split-button-contained"
+            options={['One', 'Two', 'Three']}
+            selectedOption="One"
+            // eslint-disable-next-line no-console
+            onClick={(option) => console.log(`clicked ${option}`)}
+            // eslint-disable-next-line no-console
+            onChange={(option) => console.log(`selected ${option}`)}
+            buttonGroupProps={{ variant: 'contained', color: 'primary' }}
+            buttonProps={{ color: 'primary', variant: 'contained' }}
+          />
+          <SplitButton
+            name="split-button-contained-large"
+            options={['One', 'Two', 'Three']}
+            selectedOption="One"
+            // eslint-disable-next-line no-console
+            onClick={(option) => console.log(`clicked ${option}`)}
+            // eslint-disable-next-line no-console
+            onChange={(option) => console.log(`selected ${option}`)}
+            buttonGroupProps={{ size: 'large', variant: 'contained', color: 'primary' }}
+            buttonProps={{ size: 'large', color: 'primary', variant: 'contained' }}
+          />
+        </div>
+      </div>
+
       {/* ButtonGroup */}
       <Divider className={classes.divider} />
       <Typography variant="h4" component="h2" gutterBottom>ButtonGroup</Typography>
diff --git a/src/lib_components/components/Button/SplitButton.tsx b/src/lib_components/components/Button/SplitButton.tsx
new file mode 100644
index 00000000..136fd668
--- /dev/null
+++ b/src/lib_components/components/Button/SplitButton.tsx
@@ -0,0 +1,167 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import Grid from '@material-ui/core/Grid';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import ButtonGroup, { ButtonGroupProps } from '@material-ui/core/ButtonGroup';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+
+import Theme from '../Theme/Theme';
+import { Nullable } from '../../types/core';
+import { exists } from '../../util/typeUtil';
+
+interface SplitButtonProps {
+  name: string;
+  options: string[];
+  selectedOption: string;
+  onClick: (selectedOption: string) => void;
+  onChange: (selectedOption: string) => void;
+  buttonGroupProps: Nullable<ButtonGroupProps>;
+  buttonMenuProps: Nullable<ButtonProps>;
+  buttonProps: Nullable<ButtonProps>;
+  selectedOptionDisplayCallback: Nullable<(selectedOption: string) => string>;
+}
+
+const SplitButton: React.FC<SplitButtonProps> = (props: SplitButtonProps): JSX.Element => {
+  const {
+    name,
+    options,
+    selectedOption,
+    selectedOptionDisplayCallback,
+    onClick,
+    onChange,
+    buttonGroupProps,
+    buttonMenuProps,
+    buttonProps,
+  }: SplitButtonProps = props;
+  const [open, setOpen] = useState(false);
+  const [stateSelectedOption, setStateSelectedOption] = useState(selectedOption);
+  const anchorRef = useRef<HTMLDivElement>(null);
+  let appliedButtonGroupProps: ButtonGroupProps = {
+    variant: 'outlined',
+    color: 'primary',
+  };
+  if (exists(buttonGroupProps)) {
+    appliedButtonGroupProps = buttonGroupProps as ButtonGroupProps;
+  }
+  let appliedButtonProps: ButtonProps = {
+    color: 'primary',
+    size: 'small',
+  };
+  if (exists(buttonProps)) {
+    appliedButtonProps = buttonProps as ButtonProps;
+  }
+  let appliedButtonMenuProps: ButtonProps = {
+    color: 'primary',
+    size: 'small',
+  };
+  if (exists(buttonMenuProps)) {
+    appliedButtonMenuProps = buttonMenuProps as ButtonProps;
+  }
+
+  useEffect(() => {
+    if (selectedOption === stateSelectedOption) return;
+    setStateSelectedOption(selectedOption);
+  }, [selectedOption, stateSelectedOption]);
+
+  const handleClick = (): void => {
+    onClick(stateSelectedOption);
+  };
+  const handleMenuItemClick = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    index: number,
+  ): void => {
+    setStateSelectedOption(options[index]);
+    onChange(options[index]);
+    setOpen(false);
+  };
+  const handleToggle = (): void => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+  const handleClose = (event: React.MouseEvent<Document, MouseEvent>): void => {
+    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const renderSelectedOption = (): string => {
+    if (exists(selectedOptionDisplayCallback)) {
+      // eslint-disable-next-line max-len
+      return (selectedOptionDisplayCallback as (selectedOption: string) => string)(stateSelectedOption);
+    }
+    return stateSelectedOption;
+  };
+
+  return (
+    <Grid container direction="column" alignItems="center">
+      <Grid item xs={12}>
+        <ButtonGroup
+          aria-label={`${name}-split-button`}
+          {...appliedButtonGroupProps}
+          ref={anchorRef}
+        >
+          <Button
+            {...appliedButtonProps}
+            onClick={handleClick}
+          >
+            {renderSelectedOption()}
+          </Button>
+          <Button
+            aria-controls={open ? `${name}-split-button-menu` : undefined}
+            aria-expanded={open ? 'true' : undefined}
+            aria-label={`${name}-split-button-select`}
+            aria-haspopup="menu"
+            {...appliedButtonMenuProps}
+            onClick={handleToggle}
+          >
+            <ArrowDropDownIcon />
+          </Button>
+        </ButtonGroup>
+        <Popper
+          transition
+          anchorEl={anchorRef.current}
+          open={open}
+          role={undefined}
+        >
+          {({ TransitionProps, placement }) => (
+            <Grow
+              {...TransitionProps}
+              style={{
+                transformOrigin: (placement === 'bottom')
+                  ? 'center top'
+                  : 'center bottom',
+              }}
+            >
+              <Paper>
+                <ClickAwayListener onClickAway={handleClose}>
+                  <MenuList id={`${name}-split-button-menu`}>
+                    {options.map((option: string, index: number): JSX.Element => ((
+                      <MenuItem
+                        key={option}
+                        selected={option === stateSelectedOption}
+                        onClick={(event) => handleMenuItemClick(event, index)}
+                      >
+                        {option}
+                      </MenuItem>
+                    )))}
+                  </MenuList>
+                </ClickAwayListener>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+      </Grid>
+    </Grid>
+  );
+};
+
+const WrappedSplitButton = (Theme as any).getWrappedComponent(SplitButton);
+
+export default WrappedSplitButton;
diff --git a/src/lib_components/components/Button/index.d.ts b/src/lib_components/components/Button/index.d.ts
new file mode 100644
index 00000000..7d06dc9d
--- /dev/null
+++ b/src/lib_components/components/Button/index.d.ts
@@ -0,0 +1 @@
+export { default } from './SplitButton';
diff --git a/src/lib_components/components/Button/index.js b/src/lib_components/components/Button/index.js
new file mode 100644
index 00000000..7d06dc9d
--- /dev/null
+++ b/src/lib_components/components/Button/index.js
@@ -0,0 +1 @@
+export { default } from './SplitButton';
diff --git a/src/lib_components/components/Button/package.json b/src/lib_components/components/Button/package.json
new file mode 100644
index 00000000..7ae51b6e
--- /dev/null
+++ b/src/lib_components/components/Button/package.json
@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "name": "neon-buttons",
+  "main": "./SplitButton.tsx",
+  "module": "./SplitButton.tsx"
+}
diff --git a/src/lib_components/components/DocumentViewer/StyleGuide.tsx b/src/lib_components/components/DocumentViewer/StyleGuide.tsx
deleted file mode 100644
index 304e0251..00000000
--- a/src/lib_components/components/DocumentViewer/StyleGuide.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-
-import Divider from '@material-ui/core/Divider';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-
-import CodeBlock from '../../../components/CodeBlock';
-import DocBlock from '../../../components/DocBlock';
-import ExampleBlock from '../../../components/ExampleBlock';
-
-import DocumentViewer from './DocumentViewer';
-import Theme from '../Theme/Theme';
-import { NeonDocument } from '../../types/neonApi';
-
-const useStyles = makeStyles((theme) => ({
-  divider: {
-    margin: theme.spacing(3, 0),
-  },
-}));
-
-export default function StyleGuide() {
-  const classes = useStyles(Theme);
-  const exampleDoc: NeonDocument = {
-    name: 'NEON.DOC.000780vB.pdf',
-    type: 'application/pdf',
-    size: 993762,
-    description: 'NEON Algorithm Theoretical Basis Document (ATBD) – 2D Wind Speed and Direction',
-  };
-  return (
-    <>
-      <DocBlock>
-        A module for displaying documents inline.
-      </DocBlock>
-      <CodeBlock>
-        {`
-import DocumentViewer from 'portal-core-components/lib/components/DocumentViewer';
-        `}
-      </CodeBlock>
-
-      <Divider className={classes.divider} />
-      <Typography variant="h6" component="h4" gutterBottom>Example Document Viewer</Typography>
-      <DocBlock>
-        Displays a single embedded document.
-      </DocBlock>
-      <CodeBlock>
-        {`
-import DocumentViewer from 'portal-core-components/lib/components/DocumentViewer';
-
-const exampleDoc: NeonDocument = {
-  name: 'NEON.DOC.000780vB.pdf',
-  type: 'application/pdf',
-  size: 993762,
-  description: 'NEON Algorithm Theoretical Basis Document (ATBD) – 2D Wind Speed and Direction',
-};
-
-<DocumentViewer
-  document={exampleDoc}
-  width={800}
-/>
-        `}
-      </CodeBlock>
-      <ExampleBlock>
-        <DocumentViewer
-          document={exampleDoc}
-          width={800}
-        />
-      </ExampleBlock>
-    </>
-  );
-}
diff --git a/src/lib_components/components/Documents/DocumentList.tsx b/src/lib_components/components/Documents/DocumentList.tsx
new file mode 100644
index 00000000..fe42ec3a
--- /dev/null
+++ b/src/lib_components/components/Documents/DocumentList.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import List from '@material-ui/core/List';
+import {
+  makeStyles,
+  createStyles,
+  Theme as MuiTheme,
+} from '@material-ui/core/styles';
+
+import DocumentListItem, { DocumentListItemModel } from './DocumentListItem';
+import Theme from '../Theme/Theme';
+import WarningCard from '../Card/WarningCard';
+
+import { StylesHook } from '../../types/muiTypes';
+import { existsNonEmpty } from '../../util/typeUtil';
+import { Nullable } from '../../types/core';
+
+const useStyles: StylesHook = makeStyles((muiTheme: MuiTheme) =>
+  // eslint-disable-next-line implicit-arrow-linebreak
+  createStyles({
+    list: {
+      paddingTop: muiTheme.spacing(0),
+    },
+  })) as StylesHook;
+
+export interface DocumentListProps {
+  documents: DocumentListItemModel[];
+  makeDownloadableLink: Nullable<boolean>;
+  enableDownloadButton: Nullable<boolean>;
+  fetchVariants: Nullable<boolean>;
+  enableVariantChips: Nullable<boolean>;
+}
+
+const DocumentList: React.FC<DocumentListProps> = (props: DocumentListProps): JSX.Element => {
+  const classes = useStyles(Theme);
+  const {
+    documents,
+    makeDownloadableLink,
+    enableDownloadButton,
+    fetchVariants,
+    enableVariantChips,
+  }: DocumentListProps = props;
+  if (!existsNonEmpty(documents)) {
+    return (
+      <div className={classes.container}>
+        <WarningCard
+          title="No Documents"
+          message="No documents available to display"
+        />
+      </div>
+    );
+  }
+  const renderDocuments = (): JSX.Element[] => (
+    documents.map((document: DocumentListItemModel, index: number): JSX.Element => ((
+      <DocumentListItem
+        key={document.name}
+        id={index}
+        document={document}
+        makeDownloadableLink={makeDownloadableLink === true}
+        enableDownloadButton={enableDownloadButton}
+        fetchVariants={fetchVariants}
+        enableVariantChips={enableVariantChips}
+      />
+    )))
+  );
+  return (
+    <div>
+      <List dense className={classes.list}>
+        {renderDocuments()}
+      </List>
+    </div>
+  );
+};
+
+const WrappedDocumentList = (Theme as any).getWrappedComponent(DocumentList);
+
+export default WrappedDocumentList;
diff --git a/src/lib_components/components/Documents/DocumentListItem.tsx b/src/lib_components/components/Documents/DocumentListItem.tsx
new file mode 100644
index 00000000..35d23373
--- /dev/null
+++ b/src/lib_components/components/Documents/DocumentListItem.tsx
@@ -0,0 +1,700 @@
+import React, {
+  useReducer,
+  useEffect,
+  useCallback,
+  useRef,
+  useLayoutEffect,
+  useState,
+  Dispatch,
+} from 'react';
+
+import { of, Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+import cloneDeep from 'lodash/cloneDeep';
+
+import Button from '@material-ui/core/Button';
+import Chip from '@material-ui/core/Chip';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import IconButton from '@material-ui/core/IconButton';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+
+import {
+  makeStyles,
+  createStyles,
+  Theme as MuiTheme,
+} from '@material-ui/core/styles';
+
+import DownloadIcon from '@material-ui/icons/SaveAlt';
+
+import NeonApi from '../NeonApi';
+import SplitButton from '../Button/SplitButton';
+import Theme from '../Theme/Theme';
+import WarningCard from '../Card/WarningCard';
+
+import DocumentParser from '../../parser/DocumentParser';
+import DocumentService, {
+  DocumentTypeListItemDef,
+  ParsedQsgNameResult,
+} from '../../service/DocumentService';
+import { StylesHook } from '../../types/muiTypes';
+import { exists, existsNonEmpty, isStringNonEmpty } from '../../util/typeUtil';
+import {
+  AnyAction,
+  Nullable,
+  Undef,
+  UnknownRecord,
+} from '../../types/core';
+import {
+  NeonDocument,
+  QuickStartGuideDocument,
+  QuickStartGuideVersion,
+} from '../../types/neonApi';
+
+const COMPONENT_XS_UPPER = 480;
+const COMPONENT_SM_UPPER = 805;
+
+const useStyles = makeStyles((muiTheme: MuiTheme) => createStyles({
+  listItemContainer: {
+    display: 'flex',
+  },
+  listItem: {
+    display: 'flex',
+    wordBreak: 'break-word',
+    paddingLeft: muiTheme.spacing(1),
+    '& p': {
+      marginTop: muiTheme.spacing(0.5),
+      '& > span > span': {
+        whiteSpace: 'nowrap',
+      },
+    },
+  },
+  listItemSecondarySpacer: {
+    margin: muiTheme.spacing(0, 2),
+    color: muiTheme.palette.grey[200],
+  },
+  listItemIcon: {
+    minWidth: muiTheme.spacing(4),
+    marginRight: muiTheme.spacing(1),
+  },
+  fileTypeChip: {
+    marginRight: '5px',
+    '&:last-child': {
+      marginRight: '0px',
+    },
+  },
+  fileTypeChipSelected: {
+    marginRight: '5px',
+    fontWeight: 500,
+  },
+  variantFetchingLabel: {
+    lineHeight: '24px',
+  },
+  variantFetchingProgress: {
+    marginRight: '36px',
+    marginLeft: '36px',
+  },
+  downloadErrorContainer: {
+    marginTop: muiTheme.spacing(2),
+  },
+})) as StylesHook;
+
+const useListItemSecondaryActionStyles = makeStyles((muiTheme: MuiTheme) =>
+  // eslint-disable-next-line implicit-arrow-linebreak
+  createStyles({
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      position: 'unset',
+      transform: 'unset',
+      top: 'unset',
+      right: 'unset',
+      whiteSpace: 'nowrap',
+    },
+  })) as StylesHook;
+
+enum ActionTypes {
+  FETCH_VARIANTS_STARTED = 'FETCH_VARIANTS_STARTED',
+  FETCH_VARIANTS_FAILED = 'FETCH_VARIANTS_FAILED',
+  FETCH_VARIANTS_SUCCEEDED = 'FETCH_VARIANTS_SUCCEEDED',
+
+  SET_SELECTED_VARIANT = 'SET_SELECTED_VARIANT',
+
+  DOWNLOAD_IDLE = 'DOWNLOAD_IDLE',
+  DOWNLOAD_STARTED = 'DOWNLOAD_STARTED',
+  DOWNLOAD_FAILED = 'DOWNLOAD_FAILED',
+}
+
+interface FetchVariantsStartedAction extends AnyAction {
+  type: typeof ActionTypes.FETCH_VARIANTS_STARTED;
+}
+interface FetchVariantsFailedAction extends AnyAction {
+  type: typeof ActionTypes.FETCH_VARIANTS_FAILED;
+  error: Nullable<UnknownRecord|string>;
+}
+interface FetchVariantsSucceededAction extends AnyAction {
+  type: typeof ActionTypes.FETCH_VARIANTS_SUCCEEDED;
+  variants: NeonDocument[];
+}
+interface SetSelectedVariantAction extends AnyAction {
+  type: typeof ActionTypes.SET_SELECTED_VARIANT;
+  variant: NeonDocument;
+}
+interface DownloadIdleAction extends AnyAction {
+  type: typeof ActionTypes.DOWNLOAD_IDLE;
+}
+interface DownloadStartedAction extends AnyAction {
+  type: typeof ActionTypes.DOWNLOAD_STARTED;
+}
+interface DownloadFailedAction extends AnyAction {
+  type: typeof ActionTypes.DOWNLOAD_FAILED;
+}
+
+type DocumentListItemActionTypes = (
+  FetchVariantsStartedAction
+  | FetchVariantsFailedAction
+  | FetchVariantsSucceededAction
+  | SetSelectedVariantAction
+  | DownloadIdleAction
+  | DownloadStartedAction
+  | DownloadFailedAction
+);
+
+const ActionCreator = {
+  fetchVariantsStarted: (): FetchVariantsStartedAction => ({
+    type: ActionTypes.FETCH_VARIANTS_STARTED,
+  }),
+  fetchVariantsFailed: (error: Nullable<UnknownRecord|string>): FetchVariantsFailedAction => ({
+    type: ActionTypes.FETCH_VARIANTS_FAILED,
+    error,
+  }),
+  fetchVariantsSucceeded: (variants: NeonDocument[]): FetchVariantsSucceededAction => ({
+    type: ActionTypes.FETCH_VARIANTS_SUCCEEDED,
+    variants,
+  }),
+  setSelectedVariant: (variant: NeonDocument): SetSelectedVariantAction => ({
+    type: ActionTypes.SET_SELECTED_VARIANT,
+    variant,
+  }),
+  downloadIdle: (): DownloadIdleAction => ({
+    type: ActionTypes.DOWNLOAD_IDLE,
+  }),
+  downloadStarted: (): DownloadStartedAction => ({
+    type: ActionTypes.DOWNLOAD_STARTED,
+  }),
+  downloadFailed: (): DownloadFailedAction => ({
+    type: ActionTypes.DOWNLOAD_FAILED,
+  }),
+};
+
+enum FetchStatus {
+  AWAITING_CALL = 'AWAITING_CALL',
+  FETCHING = 'FETCHING',
+  ERROR = 'ERROR',
+  SUCCESS = 'SUCCESS',
+  IDLE = 'IDLE',
+}
+
+interface FetchStatusState {
+  status: FetchStatus,
+  error?: Nullable<UnknownRecord|string>,
+}
+
+interface DocumentListItemState {
+  fetchVariants: FetchStatusState;
+  variants: NeonDocument[];
+  selectedVariant: Nullable<NeonDocument>;
+  downloadStatus: FetchStatus;
+}
+
+const DEFAULT_STATE: DocumentListItemState = {
+  fetchVariants: {
+    status: FetchStatus.IDLE,
+    error: null,
+  },
+  variants: [],
+  selectedVariant: null,
+  downloadStatus: FetchStatus.IDLE,
+};
+
+const documentListItemReducer = (
+  state: DocumentListItemState,
+  action: DocumentListItemActionTypes,
+): DocumentListItemState => {
+  const newState: DocumentListItemState = { ...state };
+  let fetchVariantFailedAction: FetchVariantsFailedAction;
+  let fetchVariantSucceededAction: FetchVariantsSucceededAction;
+  let setSelectedVariantAction: SetSelectedVariantAction;
+  switch (action.type) {
+    case ActionTypes.FETCH_VARIANTS_STARTED:
+      newState.fetchVariants.status = FetchStatus.FETCHING;
+      return newState;
+    case ActionTypes.FETCH_VARIANTS_FAILED:
+      fetchVariantFailedAction = (action as FetchVariantsFailedAction);
+      newState.fetchVariants.status = FetchStatus.ERROR;
+      newState.fetchVariants.error = fetchVariantFailedAction.error;
+      return newState;
+    case ActionTypes.FETCH_VARIANTS_SUCCEEDED:
+      fetchVariantSucceededAction = (action as FetchVariantsSucceededAction);
+      newState.fetchVariants.status = FetchStatus.SUCCESS;
+      newState.variants = fetchVariantSucceededAction.variants;
+      if (!exists(newState.selectedVariant) && existsNonEmpty(newState.variants)) {
+        // eslint-disable-next-line prefer-destructuring
+        newState.selectedVariant = newState.variants[0];
+      }
+      return newState;
+    case ActionTypes.SET_SELECTED_VARIANT:
+      setSelectedVariantAction = (action as SetSelectedVariantAction);
+      newState.selectedVariant = setSelectedVariantAction.variant;
+      return newState;
+    case ActionTypes.DOWNLOAD_IDLE:
+      newState.downloadStatus = FetchStatus.IDLE;
+      return newState;
+    case ActionTypes.DOWNLOAD_STARTED:
+      newState.downloadStatus = FetchStatus.FETCHING;
+      return newState;
+    case ActionTypes.DOWNLOAD_FAILED:
+      newState.downloadStatus = FetchStatus.ERROR;
+      return newState;
+    default:
+      return newState;
+  }
+};
+
+export interface DocumentListItemModel extends NeonDocument {
+  variants: NeonDocument[];
+}
+
+export interface DocumentListItemProps {
+  id: number;
+  document: DocumentListItemModel;
+  makeDownloadableLink: boolean;
+  enableDownloadButton: Nullable<boolean>;
+  fetchVariants: Nullable<boolean>;
+  enableVariantChips: Nullable<boolean>;
+  containerComponent: Undef<React.ElementType<React.HTMLAttributes<HTMLDivElement>>>;
+}
+
+const DocumentListItem: React.FC<DocumentListItemProps> = (
+  props: DocumentListItemProps,
+): JSX.Element|null => {
+  const {
+    id,
+    document,
+    makeDownloadableLink,
+    enableDownloadButton,
+    fetchVariants,
+    enableVariantChips,
+    containerComponent,
+  }: DocumentListItemProps = props;
+  const classes = useStyles(Theme);
+  const listItemSecondaryActionClasses = useListItemSecondaryActionStyles(Theme);
+  const containerRef: React.MutableRefObject<HTMLDivElement|HTMLAnchorElement|undefined> = useRef();
+  const [
+    componentWidth,
+    setComponentWidth,
+  ]: [number, React.Dispatch<React.SetStateAction<number>>] = useState<number>(0);
+  let atComponentXs = false;
+  let atComponentSm = false;
+  if (componentWidth > 0) {
+    atComponentXs = (componentWidth <= COMPONENT_XS_UPPER);
+    atComponentSm = (componentWidth >= COMPONENT_XS_UPPER) && (componentWidth < COMPONENT_SM_UPPER);
+  }
+  const [
+    state,
+    dispatch,
+  ]: [DocumentListItemState, Dispatch<DocumentListItemActionTypes>] = useReducer(
+    documentListItemReducer,
+    cloneDeep(DEFAULT_STATE),
+  );
+  const {
+    fetchVariants: {
+      status: fetchVariantStatus,
+    },
+    variants: stateVariants,
+    selectedVariant: stateSelectedVariant,
+    downloadStatus,
+  }: DocumentListItemState = state;
+  const hasDocument = exists(document);
+  const hasProvidedVariants = hasDocument && existsNonEmpty(document.variants);
+  const isQsg = DocumentService.isQuickStartGuide(document);
+  const appliedFetchVariants = !hasProvidedVariants && (fetchVariants === true);
+  const requireVariantFetch = isQsg
+    && appliedFetchVariants
+    && (fetchVariantStatus === FetchStatus.IDLE);
+  useEffect(() => {
+    if (!hasDocument || !requireVariantFetch) {
+      return;
+    }
+    const qsgParsedName: Nullable<ParsedQsgNameResult> = DocumentService.parseQuickStartGuideName(
+      document.name,
+    );
+    if (!exists(qsgParsedName)) {
+      return;
+    }
+    const coercedParsedName: ParsedQsgNameResult = (qsgParsedName as ParsedQsgNameResult);
+    const variantObs = (NeonApi.getQuickStartGuideDetailObservable(
+      coercedParsedName.matchedName,
+      coercedParsedName.matchedVersion,
+    ) as Observable<UnknownRecord>).pipe(
+      map((response: UnknownRecord): Observable<boolean> => {
+        if (!exists(response) || !exists(response.data)) {
+          dispatch(ActionCreator.fetchVariantsFailed('Failed to fetch variants'));
+          return of(false);
+        }
+        const qsgResponse: Nullable<QuickStartGuideVersion> = DocumentParser
+          .parseQuickStartGuideVersionResponse(response);
+        if (!exists(qsgResponse)) {
+          dispatch(ActionCreator.fetchVariantsFailed('Failed to fetch variants'));
+          return of(false);
+        }
+        const coercedQsgDocumentResponse = (qsgResponse as QuickStartGuideVersion);
+        const qsgDocuments: QuickStartGuideDocument[] = coercedQsgDocumentResponse.documents;
+        const variantDocuments: NeonDocument[] = DocumentService.transformQuickStartGuideDocuments(
+          qsgDocuments,
+        );
+        if (!existsNonEmpty(variantDocuments)) {
+          dispatch(ActionCreator.fetchVariantsFailed('Failed to fetch variants'));
+          return of(false);
+        }
+        dispatch(ActionCreator.fetchVariantsSucceeded(variantDocuments));
+        return of(true);
+      }),
+      catchError((error: UnknownRecord|string): Observable<boolean> => {
+        dispatch(ActionCreator.fetchVariantsFailed(error));
+        return of(false);
+      }),
+    );
+    dispatch(ActionCreator.fetchVariantsStarted());
+    variantObs.subscribe();
+  }, [hasDocument, requireVariantFetch, document]);
+
+  const handleSelectedVariantChanged = useCallback((selectedVariantCb: NeonDocument): void => {
+    dispatch(ActionCreator.setSelectedVariant(selectedVariantCb));
+  }, [dispatch]);
+  const handleDownloadIdle = useCallback((): void => {
+    dispatch(ActionCreator.downloadIdle());
+  }, [dispatch]);
+  const handleDownloadStarted = useCallback((): void => {
+    dispatch(ActionCreator.downloadStarted());
+  }, [dispatch]);
+  const handleDownloadFailed = useCallback((): void => {
+    dispatch(ActionCreator.downloadFailed());
+  }, [dispatch]);
+
+  const handleResizeCb = useCallback((): void => {
+    const container: HTMLDivElement|HTMLAnchorElement|undefined = containerRef.current;
+    if (!container) { return; }
+    if (container.clientWidth === componentWidth) { return; }
+    setComponentWidth(container.clientWidth);
+  }, [containerRef, componentWidth, setComponentWidth]);
+
+  useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element) { return () => {}; }
+    handleResizeCb();
+    if (typeof ResizeObserver !== 'function') {
+      window.addEventListener('resize', handleResizeCb);
+      return () => {
+        window.removeEventListener('resize', handleResizeCb);
+      };
+    }
+    let resizeObserver: ResizeObserver|null = new ResizeObserver(handleResizeCb);
+    resizeObserver.observe(element);
+    return () => {
+      if (!resizeObserver) { return; }
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    };
+  }, [containerRef, handleResizeCb]);
+
+  if (!hasDocument) {
+    return null;
+  }
+  const isFetchingVariants = (fetchVariantStatus === FetchStatus.FETCHING);
+  const appliedDocument: NeonDocument = exists(stateSelectedVariant)
+    ? stateSelectedVariant as NeonDocument
+    : document;
+  const appliedVariants: NeonDocument[] = appliedFetchVariants
+    ? stateVariants
+    : document.variants;
+  const hasAppliedVariants = existsNonEmpty(appliedVariants);
+
+  const isDownloading = (downloadStatus === FetchStatus.FETCHING);
+  const isDownloadError = (downloadStatus === FetchStatus.ERROR);
+
+  const documentType: DocumentTypeListItemDef = DocumentService.resolveDocumentType(
+    appliedDocument,
+  );
+  const { title: typeTitle, Icon: TypeIcon }: DocumentTypeListItemDef = documentType;
+  const typeTitleString = typeTitle(appliedDocument.type);
+  const primary = isStringNonEmpty(appliedDocument.description)
+    ? appliedDocument.description
+    : <i>No description</i>;
+  const spacer = <span className={classes.listItemSecondarySpacer}>|</span>;
+  const renderTypes = (): JSX.Element => {
+    if (!(enableVariantChips === true)) {
+      return (<span title={`file type: ${typeTitleString}`}>{typeTitleString}</span>);
+    }
+    if (isFetchingVariants) {
+      return (
+        <Typography variant="caption" className={classes.variantFetchingLabel}>
+          Determining variants...
+        </Typography>
+      );
+    }
+    if (!hasAppliedVariants) {
+      return (
+        <Chip
+          key={appliedDocument.name}
+          variant={undefined}
+          className={classes.fileTypeChipSelected}
+          style={{ marginRight: '0px' }}
+          component="span"
+          size="small"
+          label={typeTitleString}
+        />
+      );
+    }
+    return (
+      <>
+        {appliedVariants.map((variant: NeonDocument, index: number): JSX.Element => {
+          const variantTypeTitleString = DocumentService.getDocumentTypeTitle(variant);
+          const isSelected = (appliedDocument.name === variant.name);
+          const isLast = (index === (appliedVariants.length - 1));
+          return (
+            <Chip
+              key={variant.name}
+              variant={isSelected ? undefined : 'outlined'}
+              className={isSelected ? classes.fileTypeChipSelected : classes.fileTypeChip}
+              style={{ marginRight: isLast ? '0px' : undefined }}
+              component="span"
+              size="small"
+              label={variantTypeTitleString}
+              disabled={isDownloading || isDownloadError}
+              onClick={(event: React.MouseEvent<HTMLElement>) => {
+                handleSelectedVariantChanged(variant);
+              }}
+            />
+          );
+        })}
+      </>
+    );
+  };
+  const renderSecondaryItem = (): JSX.Element => {
+    let sizeDisplay = (<span><i>n/a</i></span>);
+    if (appliedDocument.size) {
+      sizeDisplay = (
+        <span title={`file size: ${DocumentService.formatBytes(appliedDocument.size)}`}>
+          {DocumentService.formatBytes(appliedDocument.size)}
+        </span>
+      );
+    }
+    const fileNumber = (
+      <span
+        style={{ whiteSpace: 'break-spaces' }}
+        title={`file number: ${appliedDocument.name}`}
+      >
+        {appliedDocument.name}
+      </span>
+    );
+    if (atComponentSm || atComponentXs) {
+      if (hasAppliedVariants) {
+        return (
+          <span>
+            {fileNumber}
+            <span style={{ height: '5px', display: 'block' }} />
+            {renderTypes()}
+            <span style={{ height: '5px', display: 'block' }} />
+            {sizeDisplay}
+          </span>
+        );
+      }
+      return (
+        <span>
+          {fileNumber}
+          <span style={{ height: '5px', display: 'block' }} />
+          {renderTypes()}
+          {spacer}
+          {sizeDisplay}
+        </span>
+      );
+    }
+    return (
+      <span>
+        {renderTypes()}
+        {spacer}
+        {sizeDisplay}
+        {spacer}
+        {fileNumber}
+      </span>
+    );
+  };
+  const renderAction = (): JSX.Element|null => {
+    if (!(enableDownloadButton === true)) return null;
+    if (isFetchingVariants) {
+      return (
+        <ListItemSecondaryAction classes={listItemSecondaryActionClasses}>
+          <CircularProgress size={36} className={classes.variantFetchingProgress} />
+        </ListItemSecondaryAction>
+      );
+    }
+    if (atComponentXs) {
+      return (
+        <ListItemSecondaryAction classes={listItemSecondaryActionClasses}>
+          <Tooltip
+            placement="top"
+            title={`Download ${appliedDocument.name}`}
+          >
+            <div>
+              <IconButton
+                color="primary"
+                disabled={isDownloading || isDownloadError}
+                onClick={(): void => {
+                  handleDownloadStarted();
+                  DocumentService.downloadDocument(
+                    appliedDocument,
+                    (downloadDoc: NeonDocument): void => handleDownloadIdle(),
+                    (downloadDoc: NeonDocument): void => handleDownloadFailed(),
+                  );
+                }}
+              >
+                {isDownloading
+                  ? <CircularProgress size={18} />
+                  : <DownloadIcon fontSize="small" />}
+              </IconButton>
+            </div>
+          </Tooltip>
+        </ListItemSecondaryAction>
+      );
+    }
+    const button = !hasAppliedVariants
+      ? (
+        <Button
+          variant="outlined"
+          disabled={isDownloading || isDownloadError}
+          startIcon={isDownloading
+            ? <CircularProgress size={18} />
+            : <DownloadIcon fontSize="small" />}
+          onClick={(): void => {
+            handleDownloadStarted();
+            DocumentService.downloadDocument(
+              appliedDocument,
+              (downloadDoc: NeonDocument): void => handleDownloadIdle(),
+              (downloadDoc: NeonDocument): void => handleDownloadFailed(),
+            );
+          }}
+        >
+          Download
+        </Button>
+      ) : (
+        <SplitButton
+          name={`${appliedDocument.name}-document-list-item-download-split-button`}
+          selectedOption={`${typeTitleString}`}
+          selectedOptionDisplayCallback={(selectedOption: string): string => (
+            `Download ${selectedOption}`
+          )}
+          options={appliedVariants.map((variant: NeonDocument): string => (
+            DocumentService.getDocumentTypeTitle(variant)
+          ))}
+          onClick={(option: string) => {
+            const nextSelectedVariant: Nullable<NeonDocument> = DocumentService
+              .findFirstByDocumentTypeTitle(appliedVariants, option);
+            if (exists(nextSelectedVariant)) {
+              const coercedDownloadVariant = nextSelectedVariant as NeonDocument;
+              handleDownloadStarted();
+              DocumentService.downloadDocument(
+                coercedDownloadVariant,
+                (downloadDoc: NeonDocument): void => handleDownloadIdle(),
+                (downloadDoc: NeonDocument): void => handleDownloadFailed(),
+              );
+            }
+          }}
+          onChange={(option: string) => {
+            const nextSelectedVariant: Nullable<NeonDocument> = DocumentService
+              .findFirstByDocumentTypeTitle(appliedVariants, option);
+            if (exists(nextSelectedVariant)) {
+              handleSelectedVariantChanged(nextSelectedVariant as NeonDocument);
+            }
+          }}
+          buttonGroupProps={{
+            size: 'small',
+            variant: 'outlined',
+            color: 'primary',
+          }}
+          buttonMenuProps={{
+            size: 'small',
+            color: 'primary',
+            disabled: isDownloading || isDownloadError,
+          }}
+          buttonProps={{
+            size: 'small',
+            color: 'primary',
+            disabled: isDownloading || isDownloadError,
+            startIcon: isDownloading
+              ? <CircularProgress size={18} />
+              : <DownloadIcon fontSize="small" />,
+          }}
+        />
+      );
+    return (
+      <ListItemSecondaryAction classes={listItemSecondaryActionClasses}>
+        {button}
+      </ListItemSecondaryAction>
+    );
+  };
+  const renderDownloadError = (): JSX.Element|null => {
+    if (!isDownloadError) return null;
+    return (
+      <div className={classes.downloadErrorContainer}>
+        <WarningCard
+          title={`Document download is currently unavailable for "${appliedDocument.name}."`}
+          onActionClick={() => handleDownloadIdle()}
+        />
+      </div>
+    );
+  };
+  return (
+    <>
+      <ListItem
+        ref={containerRef as never}
+        key={id}
+        className={classes.listItem}
+        component="div"
+        ContainerComponent={containerComponent}
+        ContainerProps={{ className: classes.listItemContainer }}
+        title={makeDownloadableLink ? `Click to download ${document.name}` : undefined}
+        // @ts-ignore
+        button={makeDownloadableLink}
+        onClick={!makeDownloadableLink ? undefined : (): void => {
+          handleDownloadStarted();
+          DocumentService.downloadDocument(
+            appliedDocument,
+            (downloadDoc: NeonDocument): void => handleDownloadIdle(),
+            (downloadDoc: NeonDocument): void => handleDownloadFailed(),
+          );
+        }}
+      >
+        <ListItemIcon className={classes.listItemIcon}>
+          {/* @ts-ignore */}
+          <TypeIcon />
+        </ListItemIcon>
+        <ListItemText
+          primary={primary}
+          secondary={renderSecondaryItem()}
+        />
+        {renderAction()}
+      </ListItem>
+      {renderDownloadError()}
+    </>
+  );
+};
+
+const WrappedDocumentListItem = (Theme as any).getWrappedComponent(DocumentListItem);
+
+export default WrappedDocumentListItem;
diff --git a/src/lib_components/components/Documents/DocumentSelect.tsx b/src/lib_components/components/Documents/DocumentSelect.tsx
new file mode 100644
index 00000000..cb616cc6
--- /dev/null
+++ b/src/lib_components/components/Documents/DocumentSelect.tsx
@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+
+import FormControl from '@material-ui/core/FormControl';
+import Grid from '@material-ui/core/Grid';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import {
+  makeStyles,
+  createStyles,
+  Theme as MuiTheme,
+} from '@material-ui/core/styles';
+
+import DocumentListItem from './DocumentListItem';
+import DocumentService from '../../service/DocumentService';
+import DocumentViewer from './DocumentViewer';
+import NeonEnvironment from '../NeonEnvironment';
+import Theme from '../Theme/Theme';
+import WarningCard from '../Card/WarningCard';
+import { Nullable } from '../../types/core';
+import { StylesHook } from '../../types/muiTypes';
+import { NeonDocument } from '../../types/neonApi';
+import { exists, existsNonEmpty, isStringNonEmpty } from '../../util/typeUtil';
+
+const useStyles: StylesHook = makeStyles((muiTheme: MuiTheme) =>
+  // eslint-disable-next-line implicit-arrow-linebreak
+  createStyles({
+    container: {
+      width: '100%',
+    },
+    selectContainer: {
+      width: '100%',
+      padding: muiTheme.spacing(3, 0),
+    },
+    selectFormControl: {
+      width: '100%',
+    },
+  })) as StylesHook;
+
+export interface DocumentSelectProps {
+  documents: NeonDocument[];
+}
+
+const DocumentSelect: React.FC<DocumentSelectProps> = (props: DocumentSelectProps): JSX.Element => {
+  const classes = useStyles(Theme);
+  const { documents }: DocumentSelectProps = props;
+
+  const hasDocuments: boolean = existsNonEmpty(documents);
+  let initialValue: string = '';
+  if (hasDocuments) {
+    initialValue = documents[0].name;
+  }
+  const [
+    selectedDoc,
+    setSelectedDoc,
+  ]: [string, React.Dispatch<React.SetStateAction<string>>] = useState<string>(initialValue);
+
+  if (!hasDocuments) {
+    return (
+      <div className={classes.container}>
+        <WarningCard
+          title="No Documents"
+          message="No documents available to display"
+        />
+      </div>
+    );
+  }
+
+  const renderSelectedDocument = (): JSX.Element => {
+    const matchedDoc: Nullable<NeonDocument> = documents.find((doc: NeonDocument): boolean => (
+      exists(doc)
+        && isStringNonEmpty(doc.name)
+        && (doc.name.localeCompare(selectedDoc) === 0)
+    ));
+    if (!exists(matchedDoc)) {
+      return (
+        <WarningCard
+          title="Document Not Found"
+          message="Document could not be found"
+        />
+      );
+    }
+    const coercedMatchedDoc: NeonDocument = (matchedDoc as NeonDocument);
+    const fullUrlPath = DocumentService.isQuickStartGuide(coercedMatchedDoc)
+      ? `${NeonEnvironment.getFullApiPath('quickStartGuides')}`
+      : `${NeonEnvironment.getFullApiPath('documents')}`;
+    return (
+      <DocumentViewer document={coercedMatchedDoc} width={600} fullUrlPath={fullUrlPath} />
+    );
+  };
+
+  return (
+    <div className={classes.container}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <FormControl variant="outlined" className={classes.selectFormControl}>
+            <InputLabel htmlFor="document-select-input">
+              Select Document to View
+            </InputLabel>
+            <Select
+              fullWidth
+              id="document-select"
+              inputProps={{
+                name: 'Select Document to View',
+                id: 'document-select-input',
+              }}
+              label="Select Document to View"
+              aria-labelledby="document-select-label"
+              value={selectedDoc}
+              onChange={(event: React.ChangeEvent<{ value: unknown }>): void => {
+                const nextDoc: Nullable<NeonDocument> = documents.find(
+                  (doc: NeonDocument): boolean => (
+                    doc.name.localeCompare((event.target.value as string)) === 0
+                  ),
+                );
+                if (exists(nextDoc)) {
+                  setSelectedDoc((nextDoc as NeonDocument).name);
+                }
+              }}
+            >
+              {documents.map((doc: NeonDocument, index: number): JSX.Element => ((
+                <MenuItem key={doc.name} value={doc.name}>
+                  <DocumentListItem
+                    id={index}
+                    document={doc}
+                    makeDownloadableLink={false}
+                  />
+                </MenuItem>
+              )))}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={12}>
+          {renderSelectedDocument()}
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+const WrappedDocumentSelect = (Theme as any).getWrappedComponent(DocumentSelect);
+
+export default WrappedDocumentSelect;
diff --git a/src/lib_components/components/Documents/DocumentTabs.tsx b/src/lib_components/components/Documents/DocumentTabs.tsx
new file mode 100644
index 00000000..dd18790b
--- /dev/null
+++ b/src/lib_components/components/Documents/DocumentTabs.tsx
@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import {
+  makeStyles,
+  createStyles,
+  Theme as MuiTheme,
+} from '@material-ui/core/styles';
+
+import DocumentListItem from './DocumentListItem';
+import DocumentService from '../../service/DocumentService';
+import DocumentViewer from './DocumentViewer';
+import NeonEnvironment from '../NeonEnvironment';
+import Theme from '../Theme/Theme';
+import WarningCard from '../Card/WarningCard';
+import { StylesHook } from '../../types/muiTypes';
+import { NeonDocument } from '../../types/neonApi';
+import { existsNonEmpty } from '../../util/typeUtil';
+
+const useStyles: StylesHook = makeStyles((muiTheme: MuiTheme) =>
+  // eslint-disable-next-line implicit-arrow-linebreak
+  createStyles({
+    container: {
+      width: '100%',
+      display: 'flex',
+      margin: muiTheme.spacing(0, -0.5, -0.5, -0.5),
+      flexDirection: 'column',
+    },
+    tabPanels: {
+      width: '100%',
+      backgroundColor: '#fff',
+    },
+    tabContentContainer: {
+      width: '100%',
+      padding: muiTheme.spacing(3, 3, 3, 3),
+    },
+  })) as StylesHook;
+
+const useTabsStyles: StylesHook = makeStyles((muiTheme: MuiTheme) =>
+  // eslint-disable-next-line implicit-arrow-linebreak
+  createStyles({
+    scroller: {
+      backgroundColor: muiTheme.palette.grey[200],
+    },
+    scrollButtons: {
+      '&.Mui-disabled': {
+        opacity: 0.6,
+      },
+    },
+  })) as StylesHook;
+
+const useTabStyles: StylesHook = makeStyles((muiTheme: MuiTheme) =>
+  // eslint-disable-next-line implicit-arrow-linebreak
+  createStyles({
+    root: {
+      textTransform: 'none',
+      opacity: 1,
+      maxWidth: 464,
+    },
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '& svg': {
+        margin: `${muiTheme.spacing(0, 1, 0, 0)} !important`,
+      },
+    },
+    selected: {
+      borderBottom: 'none',
+    },
+  })) as StylesHook;
+
+interface DocumentTabModel {
+  index: number;
+  document: NeonDocument;
+}
+
+export interface DocumentTabsProps {
+  documents: NeonDocument[];
+}
+
+const DocumentTabs: React.FC<DocumentTabsProps> = (props: DocumentTabsProps): JSX.Element => {
+  const classes = useStyles(Theme);
+  const tabClasses = useTabStyles(Theme);
+  const tabsClasses = useTabsStyles(Theme);
+  const { documents }: DocumentTabsProps = props;
+
+  const initialTabIdx = 0;
+  const [
+    selectedTab,
+    setSelectedTab,
+  ]: [number, React.Dispatch<React.SetStateAction<number>>] = useState<number>(initialTabIdx);
+
+  if (!existsNonEmpty(documents)) {
+    return (
+      <div className={classes.container}>
+        <WarningCard
+          title="No Documents"
+          message="No documents available to display"
+        />
+      </div>
+    );
+  }
+
+  const docTabs: DocumentTabModel[] = documents.map(
+    (doc: NeonDocument, index: number): DocumentTabModel => ({
+      document: doc,
+      index,
+    }),
+  );
+
+  const renderTabs = (): JSX.Element => ((
+    <Tabs
+      orientation="horizontal"
+      scrollButtons="on"
+      variant="scrollable"
+      value={selectedTab}
+      aria-label="Document Tabs"
+      classes={tabsClasses}
+      onChange={(event, newTab) => { setSelectedTab(newTab); }}
+      TabIndicatorProps={{ style: { display: 'none' } }}
+    >
+      {docTabs.map((docTab: DocumentTabModel): JSX.Element => ((
+        <Tab
+          key={docTab.index}
+          value={docTab.index}
+          label={(
+            <DocumentListItem
+              id={docTab.index}
+              document={docTab.document}
+              makeDownloadableLink={false}
+            />
+          )}
+          aria-label={docTab.document.name}
+          classes={tabClasses}
+          id={`document-tabs-tab-${docTab.index}`}
+          aria-controls={`document-tabs-tabpanel-${docTab.index}`}
+        />
+      )))}
+    </Tabs>
+  ));
+
+  const renderTabContent = (documentTab: DocumentTabModel): JSX.Element => {
+    const { document, index }: DocumentTabModel = documentTab;
+    const fullUrlPath = DocumentService.isQuickStartGuide(document)
+      ? `${NeonEnvironment.getFullApiPath('quickStartGuides')}`
+      : `${NeonEnvironment.getFullApiPath('documents')}`;
+    return (
+      <div
+        key={index}
+        role="tabpanel"
+        id={`document-tabs-tabpanel-${index}`}
+        aria-labelledby={`document-tabs-tab-${index}`}
+        style={{ display: selectedTab === index ? 'block' : 'none' }}
+        className={classes.tabContentContainer}
+      >
+        <DocumentViewer document={document} width={600} fullUrlPath={fullUrlPath} />
+      </div>
+    );
+  };
+
+  const renderTabPanels = (): JSX.Element => (
+    <div className={classes.tabPanels}>
+      {docTabs.map((docTab: DocumentTabModel): JSX.Element => renderTabContent(docTab))}
+    </div>
+  );
+
+  return (
+    <div className={classes.container}>
+      {renderTabs()}
+      {renderTabPanels()}
+    </div>
+  );
+};
+
+const WrappedDocumentTabs = (Theme as any).getWrappedComponent(DocumentTabs);
+
+export default WrappedDocumentTabs;
diff --git a/src/lib_components/components/DocumentViewer/DocumentViewer.tsx b/src/lib_components/components/Documents/DocumentViewer.tsx
similarity index 65%
rename from src/lib_components/components/DocumentViewer/DocumentViewer.tsx
rename to src/lib_components/components/Documents/DocumentViewer.tsx
index 0fb88844..41c08d89 100644
--- a/src/lib_components/components/DocumentViewer/DocumentViewer.tsx
+++ b/src/lib_components/components/Documents/DocumentViewer.tsx
@@ -11,29 +11,35 @@ import {
   Theme as MuiTheme,
 } from '@material-ui/core/styles';
 
+import DocumentService from '../../service/DocumentService';
+import ErrorCard from '../Card/ErrorCard';
 import NeonEnvironment from '../NeonEnvironment';
 import Theme from '../Theme/Theme';
 import { StylesHook } from '../../types/muiTypes';
 import { NeonDocument } from '../../types/neonApi';
+import { isStringNonEmpty } from '../../util/typeUtil';
 
 const useStyles: StylesHook = makeStyles((muiTheme: MuiTheme) =>
   // eslint-disable-next-line implicit-arrow-linebreak
   createStyles({
     container: {
       width: '100%',
-      margin: muiTheme.spacing(3, 3, 3, 3),
+    },
+    iframe: {
+      border: 'none',
     },
   })) as StylesHook;
 
 export interface DocumentViewerProps {
   document: NeonDocument;
   width: number;
+  fullUrlPath?: string;
 }
 
 const noop = () => {};
 
 const breakpoints: number[] = [0, 675, 900, 1200];
-const ratios: string[] = ['8:11', '3:4', '3:4', '3:4'];
+const ratios: string[] = ['8:11', '3:4', '4:4', '4:3'];
 
 const calcAutoHeight = (width: number): number => {
   const breakIdx: number = breakpoints.reduce(
@@ -52,10 +58,15 @@ const DocumentViewer: React.FC<DocumentViewerProps> = (props: DocumentViewerProp
   const {
     document,
     width,
+    fullUrlPath,
   }: DocumentViewerProps = props;
+  const appliedUrlPath = isStringNonEmpty(fullUrlPath)
+    ? fullUrlPath
+    : NeonEnvironment.getFullApiPath('documents');
+  const dataUrl: string = `${appliedUrlPath}/${document.name}?inline=true&fallback=html`;
 
   const containerRef: React.MutableRefObject<HTMLDivElement|undefined> = useRef();
-  const embedRef: React.MutableRefObject<HTMLEmbedElement|undefined> = useRef();
+  const iframeRef: React.MutableRefObject<HTMLIFrameElement|undefined> = useRef();
   const [
     viewerWidth,
     setViewerWidth,
@@ -63,23 +74,23 @@ const DocumentViewer: React.FC<DocumentViewerProps> = (props: DocumentViewerProp
 
   const handleResizeCb = useCallback((): void => {
     const container: HTMLDivElement|undefined = containerRef.current;
-    const embed: HTMLEmbedElement|undefined = embedRef.current;
+    const iframeElement: HTMLIFrameElement|undefined = iframeRef.current;
     // Do nothing if either container or viz references fail ot point to a DOM node
-    if (!container || !embed) { return; }
+    if (!container || !iframeElement) { return; }
     // Do nothing if either refs have no offset parent
     // (meaning they're hidden from rendering anyway)
-    if ((container.offsetParent === null) || (embed.offsetParent === null)) { return; }
+    if ((container.offsetParent === null) || (iframeElement.offsetParent === null)) { return; }
     // Do nothing if container and viz have the same width
     // (resize event fired but no actual resize necessary)
     if (container.clientWidth === viewerWidth) { return; }
     const newWidth: number = container.clientWidth;
     setViewerWidth(newWidth);
-    embed.setAttribute('width', `${newWidth}`);
-    embed.setAttribute('height', `${calcAutoHeight(newWidth)}`);
-  }, [containerRef, embedRef, viewerWidth, setViewerWidth]);
+    iframeElement.setAttribute('width', `${newWidth}`);
+    iframeElement.setAttribute('height', `${calcAutoHeight(newWidth)}`);
+  }, [containerRef, iframeRef, viewerWidth, setViewerWidth]);
 
   useLayoutEffect(() => {
-    const element = embedRef.current;
+    const element = iframeRef.current;
     if (!element) { return noop; }
     const parent: HTMLElement|null = element.parentElement;
     if (!parent) { return noop; }
@@ -97,21 +108,36 @@ const DocumentViewer: React.FC<DocumentViewerProps> = (props: DocumentViewerProp
       resizeObserver.disconnect();
       resizeObserver = null;
     };
-  }, [embedRef, handleResizeCb]);
+  }, [iframeRef, handleResizeCb]);
+
+  const renderObject = (): JSX.Element => {
+    if (!DocumentService.isViewerSupported(document)) {
+      return (
+        <ErrorCard
+          title="Document Error"
+          message="This document type is not supported or could not be displayed"
+        />
+      );
+    }
+    return (
+      <iframe
+        ref={iframeRef as React.MutableRefObject<HTMLIFrameElement>}
+        src={dataUrl}
+        aria-label={document.description}
+        title={document.description}
+        width={viewerWidth}
+        height={calcAutoHeight(viewerWidth)}
+        className={classes.iframe}
+      />
+    );
+  };
 
   return (
     <div
       ref={containerRef as React.MutableRefObject<HTMLDivElement>}
       className={classes.container}
     >
-      <embed
-        ref={embedRef as React.MutableRefObject<HTMLEmbedElement>}
-        type={document.type}
-        src={`${NeonEnvironment.getFullApiPath('documents')}/${document.name}?inline=true`}
-        title={document.description}
-        width={viewerWidth}
-        height={calcAutoHeight(viewerWidth)}
-      />
+      {renderObject()}
     </div>
   );
 };
diff --git a/src/lib_components/components/Documents/StyleGuide.tsx b/src/lib_components/components/Documents/StyleGuide.tsx
new file mode 100644
index 00000000..de29bde5
--- /dev/null
+++ b/src/lib_components/components/Documents/StyleGuide.tsx
@@ -0,0 +1,263 @@
+import React, { useState } from 'react';
+
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+import CodeBlock from '../../../components/CodeBlock';
+import DocBlock from '../../../components/DocBlock';
+import ExampleBlock from '../../../components/ExampleBlock';
+
+import DialogBase from '../DialogBase/DialogBase';
+import DocumentList from './DocumentList';
+import DocumentListItem, { DocumentListItemModel } from './DocumentListItem';
+import DocumentSelect from './DocumentSelect';
+import DocumentTabs from './DocumentTabs';
+import DocumentViewer from './DocumentViewer';
+import Theme from '../Theme/Theme';
+import { NeonDocument } from '../../types/neonApi';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    margin: theme.spacing(3, 3, 3, 3),
+  },
+  divider: {
+    margin: theme.spacing(3, 0),
+  },
+  paper: {
+    width: '100%',
+    padding: Theme.spacing(3),
+  },
+}));
+
+export default function StyleGuide() {
+  const classes = useStyles(Theme);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [tabDialogOpen, setTabDialogOpen] = useState(false);
+  const exampleDoc: NeonDocument = {
+    name: 'NEON.DOC.000780vB.pdf',
+    type: 'application/pdf',
+    size: 993762,
+    description: 'NEON Algorithm Theoretical Basis Document (ATBD) – 2D Wind Speed and Direction',
+  };
+  const qsgDoc = {
+    name: 'NEON.QSG.DP1.00001.001v1.pdf',
+    type: 'application/pdf',
+    size: 170516,
+    description: 'Quick Start Guide for 2D wind speed and direction (DP1.00001.001)',
+  };
+  const neonDoc = {
+    name: 'NEON.DOC.000230vA.pdf',
+    type: 'application/pdf',
+    size: 599913,
+    description: 'NEON sensor command, control and configuration – Barometric pressure',
+  };
+  const invalidDoc = {
+    name: 'invalid.pdf',
+    type: 'invalid',
+    size: 0,
+    description: 'Invalid document',
+  };
+  const docs: NeonDocument[] = [qsgDoc, neonDoc, invalidDoc];
+  const docsList: DocumentListItemModel[] = [
+    {
+      ...qsgDoc,
+      variants: [],
+    },
+    {
+      ...neonDoc,
+      variants: [],
+    },
+    {
+      ...invalidDoc,
+      variants: [],
+    },
+  ];
+  return (
+    <>
+      <DocBlock>
+        A module for displaying documents inline.
+      </DocBlock>
+      <CodeBlock>
+        {`
+import DocumentViewer from 'portal-core-components/lib/components/Documents/DocumentViewer';
+        `}
+      </CodeBlock>
+
+      <Divider className={classes.divider} />
+      <Typography variant="h6" component="h4" gutterBottom>Example Document Viewer</Typography>
+      <DocBlock>
+        Displays a single embedded document.
+      </DocBlock>
+      <CodeBlock>
+        {`
+import DocumentViewer from 'portal-core-components/lib/components/Documents/DocumentViewer';
+
+const exampleDoc: NeonDocument = {
+  name: 'NEON.DOC.000780vB.pdf',
+  type: 'application/pdf',
+  size: 993762,
+  description: 'NEON Algorithm Theoretical Basis Document (ATBD) – 2D Wind Speed and Direction',
+};
+
+<DocumentViewer
+  document={exampleDoc}
+  width={800}
+/>
+        `}
+      </CodeBlock>
+      <ExampleBlock>
+        <DocumentViewer
+          document={exampleDoc}
+          width={800}
+        />
+      </ExampleBlock>
+
+      <Divider className={classes.divider} />
+      <Typography variant="h6" component="h4" gutterBottom>Example Document Item</Typography>
+      <DocBlock>
+        Displays a single document item.
+      </DocBlock>
+      <CodeBlock>
+        {`
+import DocumentListItem from 'portal-core-components/lib/components/Documents/DocumentListItem';
+
+<DocumentListItem document={document} enableDownloadButton enableVariantChips fetchVariants />
+        `}
+      </CodeBlock>
+      <ExampleBlock>
+        <div style={{ width: '100%' }}>
+          <Paper className={classes.paper} style={{ marginBottom: '10px' }}>
+            <DocumentListItem
+              document={qsgDoc}
+              containerComponent="div"
+              enableDownloadButton
+              enableVariantChips
+              fetchVariants
+            />
+          </Paper>
+          <Paper className={classes.paper} style={{ marginBottom: '10px' }}>
+            <DocumentListItem
+              document={neonDoc}
+              containerComponent="div"
+              makeDownloadableLink
+              enableDownloadButton
+              enableVariantChips
+            />
+          </Paper>
+          <Paper className={classes.paper} style={{ marginBottom: '10px' }}>
+            <DocumentListItem
+              document={invalidDoc}
+              containerComponent="div"
+              enableDownloadButton
+            />
+          </Paper>
+        </div>
+      </ExampleBlock>
+
+      <Divider className={classes.divider} />
+      <Typography variant="h6" component="h4" gutterBottom>Example Document List</Typography>
+      <DocBlock>
+        List for displaying and allowing download of numerous documents.
+      </DocBlock>
+      <CodeBlock>
+        {`
+import DocumentList from 'portal-core-components/lib/components/Documents/DocumentList';
+
+const docs: NeonDocument[] = [...];
+
+<DocumentList documents={docs} enableDownloadButton enableVariantChips fetchVariants />
+        `}
+      </CodeBlock>
+      <ExampleBlock>
+        <Paper className={classes.paper}>
+          <DocumentList
+            documents={docsList}
+            enableDownloadButton
+            enableVariantChips
+            fetchVariants
+          />
+        </Paper>
+      </ExampleBlock>
+
+      <Divider className={classes.divider} />
+      <Typography variant="h6" component="h4" gutterBottom>Example Document Tabs</Typography>
+      <DocBlock>
+        Tab selection for toggling and displaying numerous documents.
+      </DocBlock>
+      <CodeBlock>
+        {`
+import DocumentTabs from 'portal-core-components/lib/components/Documents/DocumentTabs';
+
+const docs: NeonDocument[] = [...];
+
+<DocumentTabs documents={docs} />
+        `}
+      </CodeBlock>
+      <ExampleBlock>
+        <DocumentTabs documents={docs} />
+      </ExampleBlock>
+
+      <Divider className={classes.divider} />
+      <Typography variant="h6" component="h4" gutterBottom>Example Document Selector</Typography>
+      <DocBlock>
+        Selector for toggling and displaying numerous documents.
+      </DocBlock>
+      <CodeBlock>
+        {`
+import DocumentSelect from 'portal-core-components/lib/components/Documents/DocumentSelect';
+
+const docs: NeonDocument[] = [...];
+
+<DocumentSelect documents={docs} />
+        `}
+      </CodeBlock>
+      <ExampleBlock>
+        <Paper className={classes.paper}>
+          <DocumentSelect documents={docs} />
+        </Paper>
+      </ExampleBlock>
+
+      <Divider className={classes.divider} />
+      <Typography variant="h6" component="h4" gutterBottom>Example Document Dialog</Typography>
+      <DocBlock>
+        Dialog for displaying documents.
+      </DocBlock>
+      <ExampleBlock>
+        <div style={{ textAlign: 'center' }}>
+          <Button variant="contained" onClick={() => setDialogOpen(true)}>
+            Open Document Dialog
+          </Button>
+          <br />
+          <br />
+          <Button variant="contained" onClick={() => setTabDialogOpen(true)}>
+            Open Document Tabs Dialog
+          </Button>
+          <DialogBase
+            open={dialogOpen}
+            title="View Document"
+            onClose={() => setDialogOpen(false)}
+            data-selenium="document-viewer-dialog"
+            nopaper
+          >
+            <DocumentViewer
+              document={exampleDoc}
+              width={800}
+            />
+          </DialogBase>
+          <DialogBase
+            open={tabDialogOpen}
+            title="View Documents"
+            onClose={() => setTabDialogOpen(false)}
+            data-selenium="document-tab-viewer-dialog"
+            nopaper
+          >
+            <DocumentTabs documents={docs} />
+          </DialogBase>
+        </div>
+      </ExampleBlock>
+    </>
+  );
+}
diff --git a/src/lib_components/components/DocumentViewer/index.d.ts b/src/lib_components/components/Documents/index.d.ts
similarity index 100%
rename from src/lib_components/components/DocumentViewer/index.d.ts
rename to src/lib_components/components/Documents/index.d.ts
diff --git a/src/lib_components/components/DocumentViewer/index.js b/src/lib_components/components/Documents/index.js
similarity index 100%
rename from src/lib_components/components/DocumentViewer/index.js
rename to src/lib_components/components/Documents/index.js
diff --git a/src/lib_components/components/DocumentViewer/package.json b/src/lib_components/components/Documents/package.json
similarity index 76%
rename from src/lib_components/components/DocumentViewer/package.json
rename to src/lib_components/components/Documents/package.json
index e6d1de5a..5e07b0f0 100644
--- a/src/lib_components/components/DocumentViewer/package.json
+++ b/src/lib_components/components/Documents/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "document-viewer",
+  "name": "documents",
   "main": "./DocumentViewer.tsx",
   "module": "./DocumentViewer.tsx"
 }
diff --git a/src/lib_components/components/NeonApi/NeonApi.js b/src/lib_components/components/NeonApi/NeonApi.js
index 898ea414..c0f8acf5 100644
--- a/src/lib_components/components/NeonApi/NeonApi.js
+++ b/src/lib_components/components/NeonApi/NeonApi.js
@@ -96,6 +96,57 @@ const getJsonObservable = (
   return mapResponse(ajax(request));
 };
 
+/**
+ * Gets the RxJS HEAD AjaxRequest
+ * @param {string} url The URL to make the API request to
+ * @param {Object|undefined} headers The headers to add to the request
+ * @param {boolean} includeToken Option to include the API token in the request
+ * @param {boolean} withCredentials Option to include credentials with a CORS request
+ * @return The RxJS HEAD AjaxRequest
+ */
+const headJsonAjaxRequest = (
+  url,
+  headers = undefined,
+  includeToken = true,
+  withCredentials = undefined,
+) => {
+  let appliedHeaders = headers || {};
+  if (includeToken) {
+    appliedHeaders = getApiTokenHeader(appliedHeaders);
+  }
+  const appliedWithCredentials = getAppliedWithCredentials(withCredentials);
+  return {
+    url,
+    method: 'HEAD',
+    responseType: 'json',
+    crossDomain: true,
+    withCredentials: appliedWithCredentials,
+    headers: {
+      ...appliedHeaders,
+    },
+  };
+};
+
+/**
+ * Gets the RxJS observable for making an API request to the specified URL
+ * with optional headers.
+ * @param {string} url The URL to make the API request to
+ * @param {Object|undefined} headers The headers to add to the request
+ * @param {boolean} includeToken Option to include the API token in the request
+ * @param {boolean} withCredentials Option to include credentials with a CORS request
+ * @return The RxJS Ajax Observable
+ */
+const headJsonObservable = (
+  url,
+  headers = undefined,
+  includeToken = true,
+  withCredentials = undefined,
+) => {
+  if (typeof url !== 'string' || !url.length) { return of(null); }
+  const request = headJsonAjaxRequest(url, headers, includeToken, withCredentials);
+  return ajax(request);
+};
+
 /**
  * Gets the RxJS observable for making a POST API request to the specified URL
  * with body and optional headers.
@@ -166,6 +217,17 @@ const NeonApi = {
   postJsonObservable: (url, body, headers = undefined, includeToken = true) => (
     postJsonObservable(url, body, headers, includeToken)
   ),
+  /**
+   * Gets the RxJS observable for making a HEAD API request to the specified URL
+   * with optional headers.
+   * @param {string} url The URL to make the API request to
+   * @param {Object|undefined} headers The headers to add to the request
+   * @param {boolean} includeToken Option to include the API token in the request
+   * @return The RxJS Ajax Observable
+   */
+  headJsonObservable: (url, headers = undefined, includeToken = true) => (
+    headJsonObservable(url, headers, includeToken)
+  ),
 
   /**
    * Convenience method for utiliizing the rxUtil => getJson function.
@@ -291,6 +353,32 @@ const NeonApi = {
       false,
     )
   ),
+
+  /**
+   * Gets the RxJS Observable for the document HEAD endpoint for a given name
+   * @param {string} name The document name
+   * @return The RxJS Ajax Observable
+   */
+  headDocumentObservable: (name) => (
+    headJsonObservable(`${NeonEnvironment.getFullApiPath('documents')}/${name}`)
+  ),
+  /**
+   * Gets the RxJS Observable for the quick start guides endpoint for a given name
+   * @param {string} name The quick start guide name
+   * @param {string} version The quick start guide version
+   * @return The RxJS Ajax Observable
+   */
+  getQuickStartGuideDetailObservable: (name, version) => (
+    getJsonObservable(`${NeonEnvironment.getFullApiPath('quickStartGuides')}/details/${name}/${version}`)
+  ),
+  /**
+   * Gets the RxJS Observable for the quick start guides HEAD endpoint for a given name
+   * @param {string} name The document name
+   * @return The RxJS Ajax Observable
+   */
+  headQuickStartGuideObservable: (name) => (
+    headJsonObservable(`${NeonEnvironment.getFullApiPath('quickStartGuides')}/${name}`)
+  ),
 };
 
 Object.freeze(NeonApi);
diff --git a/src/lib_components/components/NeonEnvironment/NeonEnvironment.ts b/src/lib_components/components/NeonEnvironment/NeonEnvironment.ts
index 9bbe930b..cd5c6ff4 100644
--- a/src/lib_components/components/NeonEnvironment/NeonEnvironment.ts
+++ b/src/lib_components/components/NeonEnvironment/NeonEnvironment.ts
@@ -157,6 +157,7 @@ const NeonEnvironment: INeonEnvironment = {
     data: (): string => '/data',
     prototype: (): string => '/prototype',
     documents: (): string => '/documents',
+    quickStartGuides: (): string => '/documents/quick-start-guides',
     products: (): string => '/products',
     productBundles: (): string => '/products/bundles',
     releases: (): string => '/releases',
diff --git a/src/lib_components/parser/DocumentParser.ts b/src/lib_components/parser/DocumentParser.ts
new file mode 100644
index 00000000..6a04b2fc
--- /dev/null
+++ b/src/lib_components/parser/DocumentParser.ts
@@ -0,0 +1,52 @@
+import { exists, resolveAny } from '../util/typeUtil';
+import { QuickStartGuideDocument, QuickStartGuideVersion } from '../types/neonApi';
+import { Nullable, UnknownRecord } from '../types/core';
+
+export interface IDocumentParser {
+  parseQuickStartGuideVersionResponse: (
+    response: UnknownRecord,
+  ) => Nullable<QuickStartGuideVersion>;
+  parseQuickStartGuideDocuments: (documents: UnknownRecord[]) => QuickStartGuideDocument[];
+  parseQuickStartGuideDocument: (document: UnknownRecord) => QuickStartGuideDocument;
+}
+
+const DocumentParser: IDocumentParser = {
+  parseQuickStartGuideVersionResponse: (
+    response: UnknownRecord,
+  ): Nullable<QuickStartGuideVersion> => {
+    if (!exists(response)) {
+      return null;
+    }
+    const data: UnknownRecord = resolveAny(response as never, 'data');
+    if (!exists(data)) {
+      return null;
+    }
+    return {
+      name: data.name as string,
+      version: data.version as number,
+      publishedDate: data.publishedDate as string,
+      documents: DocumentParser.parseQuickStartGuideDocuments(data.documents as UnknownRecord[]),
+    };
+  },
+  parseQuickStartGuideDocuments: (documents: UnknownRecord[]): QuickStartGuideDocument[] => {
+    if (!Array.isArray(documents)) {
+      return [];
+    }
+    return documents.map((document: UnknownRecord): QuickStartGuideDocument => (
+      DocumentParser.parseQuickStartGuideDocument(document)
+    ));
+  },
+  parseQuickStartGuideDocument: (document: UnknownRecord): QuickStartGuideDocument => ({
+    name: document.name as string,
+    description: document.description as string,
+    type: document.type as string,
+    size: document.size as number,
+    md5: document.md5 as string,
+    generationDate: document.generationDate as string,
+    url: document.url as string,
+  }),
+};
+
+Object.freeze(DocumentParser);
+
+export default DocumentParser;
diff --git a/src/lib_components/remoteAssets/drupal-header.html.js b/src/lib_components/remoteAssets/drupal-header.html.js
index 298f687a..c76f3759 100644
--- a/src/lib_components/remoteAssets/drupal-header.html.js
+++ b/src/lib_components/remoteAssets/drupal-header.html.js
@@ -866,7 +866,7 @@ export default html = `
                       <ul  class="menu menu--main" data-depth="2">
 
               <li  class="menu__item">
-          <a href="https://www.neonscience.org/resources/research-support/field-site-coordination" class="menu__link" data-drupal-link-system-path="node/6">Field Site Coordination</a>
+          <a href="https://www.neonscience.org/resources/research-support/field-site-coordination" class="menu__link" data-drupal-link-system-path="node/12209">Field Site Coordination</a>
 
                   </li>
               <li  class="menu__item">
@@ -967,6 +967,10 @@ export default html = `
           <a href="https://www.neonscience.org/ncar-neon-community-collaborations" class="menu__link" data-drupal-link-system-path="node/11843">NCAR-NEON-Community Collaborations</a>
 
                   </li>
+              <li  class="menu__item">
+          <a href="https://www.neonscience.org/neon-science-summit" class="menu__link" data-drupal-link-system-path="node/12057">NEON Science Summit</a>
+
+                  </li>
       
           </ul>
   
diff --git a/src/lib_components/service/DocumentService.ts b/src/lib_components/service/DocumentService.ts
new file mode 100644
index 00000000..44408205
--- /dev/null
+++ b/src/lib_components/service/DocumentService.ts
@@ -0,0 +1,476 @@
+import ArchiveIcon from '@material-ui/icons/Archive';
+import CodeIcon from '@material-ui/icons/Code';
+import DocumentIcon from '@material-ui/icons/DescriptionOutlined';
+import FileIcon from '@material-ui/icons/InsertDriveFile';
+import ImageIcon from '@material-ui/icons/Photo';
+import PresentationIcon from '@material-ui/icons/Tv';
+import SpreadsheetIcon from '@material-ui/icons/GridOn';
+
+import NeonEnvironment from '../components/NeonEnvironment/NeonEnvironment';
+import { exists, existsNonEmpty, isStringNonEmpty } from '../util/typeUtil';
+import { DataProductSpec, NeonDocument, QuickStartGuideDocument } from '../types/neonApi';
+import { Nullable } from '../types/core';
+
+export interface DocumentTypeListItemDef {
+  match: (type: string) => boolean;
+  title: (type?: string) => string;
+  Icon: React.ReactNode;
+}
+
+export interface ParsedQsgNameResult {
+  name: string;
+  matchedName: string;
+  matchedVersion: string;
+  matchedExtension: string;
+  parsedVersion: number;
+}
+
+export const VIEWER_SUPPORTED_DOC_TYPES: string[] = [
+  'application/pdf',
+  'text/html',
+  'text/markdown',
+  'text/plain',
+];
+
+const documentTypes: Record<string, DocumentTypeListItemDef> = {
+  pdf: {
+    match: (type: string): boolean => (type === 'application/pdf' || type.includes('pdf')),
+    title: (type?: string): string => 'PDF',
+    Icon: DocumentIcon,
+  },
+  markdown: {
+    match: (type: string): boolean => (type === 'text/markdown'),
+    title: (type?: string): string => 'Markdown',
+    Icon: DocumentIcon,
+  },
+  image: {
+    match: (type: string): boolean => (
+      ['image/gif', 'image/png', 'image/jpeg'].includes(type) || type.startsWith('image')
+    ),
+    title: (type?: string): string => (
+      isStringNonEmpty(type)
+        ? `Image (${((type as string).match(/\/(.*)$/) || [])[1] || 'unknown type'})`
+        : 'unknown type'
+    ),
+    Icon: ImageIcon,
+  },
+  csv: {
+    match: (type: string): boolean => (type === 'text/csv' || type.includes('csv')),
+    title: (type?: string): string => 'CSV',
+    Icon: SpreadsheetIcon,
+  },
+  text: {
+    match: (type: string): boolean => (type === 'text/plain'),
+    title: (type?: string): string => 'Plain text file',
+    Icon: DocumentIcon,
+  },
+  document: {
+    match: (type: string): boolean => ([
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    ].includes(type)),
+    title: (type?: string): string => 'Document',
+    Icon: DocumentIcon,
+  },
+  spreadsheet: {
+    match: (type: string): boolean => (type.includes('spreadsheet') || type.includes('excel')),
+    title: (type?: string): string => 'Spreadsheet',
+    Icon: SpreadsheetIcon,
+  },
+  presentation: {
+    match: (type: string): boolean => (type.includes('presentation') || type.includes('powerpoint')),
+    title: (type?: string): string => 'Presentation',
+    Icon: PresentationIcon,
+  },
+  archive: {
+    match: (type: string): boolean => (type.includes('zip')),
+    title: (type?: string): string => 'ZIP archive',
+    Icon: ArchiveIcon,
+  },
+  binary: {
+    match: (type: string): boolean => (type === 'application/octet-stream'),
+    title: (type?: string): string => 'Raw binary data',
+    Icon: FileIcon,
+  },
+  xml: {
+    match: (type: string): boolean => (type === 'application/xml'),
+    title: (type?: string): string => 'XML',
+    Icon: CodeIcon,
+  },
+  html: {
+    match: (type: string): boolean => (type === 'text/html'),
+    title: (type?: string): string => 'HTML',
+    Icon: CodeIcon,
+  },
+};
+
+const documentTypeKeys: string[] = Object.keys(documentTypes);
+
+const defaultDocumentType: DocumentTypeListItemDef = {
+  match: (type: string): boolean => true,
+  title: (type?: string): string => 'File type unavailable',
+  Icon: FileIcon,
+};
+
+const getFilenameFromContentDisposition = (response: Response): Nullable<string> => {
+  let filename: Nullable<string> = null;
+  const contentDisposition: string|null = response.headers.get('content-disposition');
+  if (isStringNonEmpty(contentDisposition)) {
+    const filenameSplit: string[]|undefined = contentDisposition?.split('filename=');
+    const splitLength = (filenameSplit ? filenameSplit.length : -1);
+    if (existsNonEmpty(filenameSplit) && (splitLength >= 2)) {
+      const quotedFilename: string = (filenameSplit as string[])[1];
+      filename = quotedFilename.replaceAll('"', '');
+    }
+  }
+  return filename;
+};
+
+export type DocumentCallback = (document: NeonDocument) => void;
+
+export interface IDocumentService {
+  formatBytes: (bytes: number) => string;
+  resolveDocumentType: (document: NeonDocument) => DocumentTypeListItemDef;
+  getDocumentTypeTitle: (document: NeonDocument) => string;
+  findFirstByDocumentTypeTitle: (
+    documents: NeonDocument[],
+    typeTitle: string,
+  ) => Nullable<NeonDocument>;
+  getDocumentTypeListItemDefs: () => Record<string, DocumentTypeListItemDef>;
+  getDocumentTypeListItemDefKeys: () => string[];
+  getDefaultDocumentTypeListItemDef: () => DocumentTypeListItemDef;
+  isQuickStartGuide: (doc: NeonDocument) => boolean;
+  isQuickStartGuideName: (name: Nullable<string>) => boolean;
+  getQuickStartGuideNameRegex: () => RegExp;
+  parseQuickStartGuideName: (name: string) => Nullable<ParsedQsgNameResult>;
+  isViewerSupported: (doc: NeonDocument) => boolean;
+  transformSpecs: (specs: DataProductSpec[]) => NeonDocument[];
+  transformSpec: (spec: DataProductSpec) => NeonDocument;
+  transformQuickStartGuideDocuments: (documents: QuickStartGuideDocument[]) => NeonDocument[];
+  transformQuickStartGuideDocument: (document: QuickStartGuideDocument) => NeonDocument;
+  applyDisplaySort: (
+    documents: NeonDocument[],
+    reverse?: boolean,
+    qsgPrecedence?: boolean,
+  ) => NeonDocument[];
+  downloadDocument: (
+    document: NeonDocument,
+    onSuccessCb?: DocumentCallback,
+    onErrorCb?: DocumentCallback,
+  ) => void;
+  /**
+   * Utilize save as APIs to trigger a document download.
+   * EXPERIMENTAL! Note that this utilizes not-yet-standard web APIs
+   * that will not work across all browsers.
+   * @param document
+   * @param onSuccessCb
+   * @param onErrorCb
+   * @return
+   */
+  saveDocument: (
+    document: NeonDocument,
+    onSuccessCb?: DocumentCallback,
+    onErrorCb?: DocumentCallback,
+  ) => void;
+}
+
+const DocumentService: IDocumentService = {
+  formatBytes: (bytes: number): string => {
+    if (!Number.isInteger(bytes) || bytes < 0) {
+      return '0.000 B';
+    }
+    const scales: string[] = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const log: number = Math.log(bytes) / Math.log(1024);
+    const scale: number = Math.floor(log);
+    const precision: number = Math.floor(3 - ((log - scale) * 3));
+    return `${(bytes / (1024 ** scale)).toFixed(precision)} ${scales[scale]}`;
+  },
+  resolveDocumentType: (document: NeonDocument): DocumentTypeListItemDef => {
+    let documentType: DocumentTypeListItemDef = DocumentService.getDefaultDocumentTypeListItemDef();
+    if (typeof document.type === 'string') {
+      const matchKey = DocumentService.getDocumentTypeListItemDefKeys()
+        .find((key) => DocumentService.getDocumentTypeListItemDefs()[key].match(document.type));
+      if (matchKey) {
+        documentType = DocumentService.getDocumentTypeListItemDefs()[matchKey];
+      }
+    }
+    return documentType;
+  },
+  getDocumentTypeTitle: (document: NeonDocument): string => {
+    const documentType: DocumentTypeListItemDef = DocumentService.resolveDocumentType(document);
+    const { title: typeTitle }: DocumentTypeListItemDef = documentType;
+    return typeTitle(document.type);
+  },
+  findFirstByDocumentTypeTitle: (
+    documents: NeonDocument[],
+    typeTitle: string,
+  ): Nullable<NeonDocument> => {
+    if (!existsNonEmpty(documents) || !isStringNonEmpty(typeTitle)) {
+      return null;
+    }
+    return documents.find((document: NeonDocument): boolean => {
+      const typeTitleString = DocumentService.getDocumentTypeTitle(document);
+      return typeTitle.localeCompare(typeTitleString) === 0;
+    });
+  },
+  getDocumentTypeListItemDefs: (): Record<string, DocumentTypeListItemDef> => documentTypes,
+  getDocumentTypeListItemDefKeys: (): string[] => documentTypeKeys,
+  getDefaultDocumentTypeListItemDef: (): DocumentTypeListItemDef => defaultDocumentType,
+  isQuickStartGuide: (doc: NeonDocument): boolean => (
+    exists(doc) && DocumentService.isQuickStartGuideName(doc.name)
+  ),
+  isQuickStartGuideName: (name: Nullable<string>): boolean => (
+    isStringNonEmpty(name) && (name as string).startsWith('NEON.QSG.')
+  ),
+  getQuickStartGuideNameRegex: (): RegExp => (
+    new RegExp(/^(?<name>NEON[.]QSG[.]DP[0-9]{1}[.][0-9]{5}[.][0-9]{3})(?<version>v(?<versionNumber>[0-9]+))*(?<extension>[.](?<extensionName>[a-z]+))*$/)
+  ),
+  parseQuickStartGuideName: (name: string): Nullable<ParsedQsgNameResult> => {
+    const regex = DocumentService.getQuickStartGuideNameRegex();
+    if (!regex) return null;
+    const matches: RegExpExecArray|null = regex.exec(name);
+    if (!matches) return null;
+    if (matches.length <= 0) return null;
+    return {
+      name,
+      matchedName: matches[1],
+      matchedVersion: matches[2],
+      matchedExtension: matches[4],
+      parsedVersion: isStringNonEmpty(matches[3])
+        ? parseInt(matches[3], 10)
+        : -1,
+    };
+  },
+  isViewerSupported: (doc: NeonDocument): boolean => (
+    exists(doc)
+    && isStringNonEmpty(doc.type)
+    && VIEWER_SUPPORTED_DOC_TYPES.includes(doc.type)
+  ),
+  transformSpecs: (specs: DataProductSpec[]): NeonDocument[] => {
+    if (!existsNonEmpty(specs)) {
+      return [];
+    }
+    return specs.map((spec: DataProductSpec): NeonDocument => (
+      DocumentService.transformSpec(spec)
+    ));
+  },
+  transformSpec: (spec: DataProductSpec): NeonDocument => ({
+    name: spec.specNumber,
+    type: spec.specType,
+    size: spec.specSize,
+    description: spec.specDescription,
+  }),
+  transformQuickStartGuideDocuments: (documents: QuickStartGuideDocument[]): NeonDocument[] => {
+    if (!existsNonEmpty(documents)) {
+      return [];
+    }
+    return documents.map((document: QuickStartGuideDocument): NeonDocument => (
+      DocumentService.transformQuickStartGuideDocument(document)
+    ));
+  },
+  transformQuickStartGuideDocument: (document: QuickStartGuideDocument): NeonDocument => ({
+    name: document.name,
+    type: document.type,
+    size: document.size,
+    description: document.description,
+  }),
+  applyDisplaySort: (
+    documents: NeonDocument[],
+    reverse?: boolean,
+    qsgPrecedence?: boolean,
+  ): NeonDocument[] => {
+    if (!existsNonEmpty(documents)) {
+      return [];
+    }
+    const appliedReverse: boolean = (reverse === true);
+    const appliedQsgPrecedence: boolean = (qsgPrecedence === true);
+    const sortedDocs: NeonDocument[] = [...documents];
+    sortedDocs.sort((a: NeonDocument, b: NeonDocument): number => {
+      if (!exists(a) && !exists(b)) {
+        return 0;
+      }
+      if (!exists(a)) {
+        return appliedReverse ? -1 : 1;
+      }
+      if (!exists(b)) {
+        return appliedReverse ? 1 : -1;
+      }
+      if (appliedQsgPrecedence) {
+        const aQsg = DocumentService.isQuickStartGuide(a);
+        const bQsg = DocumentService.isQuickStartGuide(b);
+        if (!aQsg || !bQsg) {
+          if (aQsg) {
+            return appliedReverse ? 1 : -1;
+          }
+          if (bQsg) {
+            return appliedReverse ? -1 : 1;
+          }
+        }
+      }
+      if (!isStringNonEmpty(a.description) && !isStringNonEmpty(b.description)) {
+        return 0;
+      }
+      if (!isStringNonEmpty(a.description)) {
+        return appliedReverse ? -1 : 1;
+      }
+      if (!isStringNonEmpty(b.description)) {
+        return appliedReverse ? 1 : -1;
+      }
+      const descriptionCompare = a.description.localeCompare(b.description);
+      if (descriptionCompare === 0) {
+        if (!isStringNonEmpty(a.name) && !isStringNonEmpty(b.name)) {
+          return 0;
+        }
+        if (!isStringNonEmpty(a.name)) {
+          return appliedReverse ? -1 : 1;
+        }
+        if (!isStringNonEmpty(b.name)) {
+          return appliedReverse ? 1 : -1;
+        }
+        return a.name.localeCompare(b.name);
+      }
+      return descriptionCompare;
+    });
+    return sortedDocs;
+  },
+  downloadDocument: (
+    document: NeonDocument,
+    onSuccessCb?: DocumentCallback,
+    onErrorCb?: DocumentCallback,
+  ): void => {
+    const apiPath = DocumentService.isQuickStartGuide(document)
+      ? `${NeonEnvironment.getFullApiPath('quickStartGuides')}/${document.name}`
+      : `${NeonEnvironment.getFullApiPath('documents')}/${document.name}`;
+    fetch(apiPath, { method: 'HEAD' })
+      .then((response: Response): void => {
+        if (!response.ok) {
+          throw new Error('Invalid HEAD response');
+        }
+        let filename: Nullable<string> = getFilenameFromContentDisposition(response);
+        if (!isStringNonEmpty(filename)) {
+          filename = document.name;
+        }
+        fetch(apiPath)
+          .then((downloadResponse: Response): Promise<Blob> => {
+            if (!downloadResponse.ok || !downloadResponse.body) {
+              throw new Error('Invalid download response');
+            }
+            return downloadResponse.blob();
+          })
+          .then((blob: Blob): void => {
+            try {
+              const link = window.document.createElement('a');
+              link.href = URL.createObjectURL(blob);
+              link.setAttribute('download', filename as string);
+              window.document.body.appendChild(link);
+              link.click();
+              window.document.body.removeChild(link);
+              if (onSuccessCb) {
+                onSuccessCb(document);
+              }
+            } catch (e: unknown) {
+              // eslint-disable-next-line no-console
+              console.error(e);
+              if (onErrorCb) {
+                onErrorCb(document);
+              }
+            }
+          })
+          .catch((err: unknown): void => {
+            // eslint-disable-next-line no-console
+            console.error(err);
+            if (onErrorCb) {
+              onErrorCb(document);
+            }
+          });
+      })
+      .catch((err: unknown): void => {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        if (onErrorCb) {
+          onErrorCb(document);
+        }
+      });
+  },
+  /**
+   * Utilize save as APIs to trigger a document download.
+   * EXPERIMENTAL! Note that this utilizes not-yet-standard web APIs
+   * that will not work across all browsers.
+   * @param document
+   * @param onSuccessCb
+   * @param onErrorCb
+   * @return
+   */
+  saveDocument: (
+    document: NeonDocument,
+    onSuccessCb?: DocumentCallback,
+    onErrorCb?: DocumentCallback,
+  ): void => {
+    if (typeof window.showSaveFilePicker !== 'function') {
+      // eslint-disable-next-line no-console
+      console.error('Operation not supported');
+      if (onErrorCb) {
+        onErrorCb(document);
+      }
+    }
+    const apiPath = DocumentService.isQuickStartGuide(document)
+      ? `${NeonEnvironment.getFullApiPath('quickStartGuides')}/${document.name}`
+      : `${NeonEnvironment.getFullApiPath('documents')}/${document.name}`;
+    fetch(apiPath, { method: 'HEAD' })
+      .then((response: Response): void => {
+        if (!response.ok) {
+          throw new Error('Invalid HEAD response');
+        }
+        let filename: Nullable<string> = getFilenameFromContentDisposition(response);
+        if (!isStringNonEmpty(filename)) {
+          filename = document.name;
+        }
+        const saveOpts: SaveFilePickerOptions = {
+          suggestedName: filename as string,
+        };
+        window.showSaveFilePicker(saveOpts)
+          .then((fileHandle: FileSystemFileHandle): Promise<FileSystemWritableFileStream> => (
+            fileHandle.createWritable()
+          ))
+          .then((writable: FileSystemWritableFileStream): void => {
+            fetch(apiPath)
+              .then((downloadResponse: Response): Promise<void> => {
+                if (!downloadResponse.ok || !downloadResponse.body) {
+                  throw new Error('Invalid download response');
+                }
+                return downloadResponse.body.pipeTo(writable);
+              })
+              .then((value: void|never): void => {
+                if (onSuccessCb) {
+                  onSuccessCb(document);
+                }
+              })
+              .catch((err: unknown): void => {
+                // eslint-disable-next-line no-console
+                console.error(err);
+                if (onErrorCb) {
+                  onErrorCb(document);
+                }
+              });
+          })
+          .catch((err: unknown): void => {
+            // eslint-disable-next-line no-console
+            console.error(err);
+            if (onErrorCb) {
+              onErrorCb(document);
+            }
+          });
+      })
+      .catch((err: unknown): void => {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        if (onErrorCb) {
+          onErrorCb(document);
+        }
+      });
+  },
+};
+
+Object.freeze(DocumentService);
+
+export default DocumentService;
diff --git a/src/lib_components/types/neonApi.ts b/src/lib_components/types/neonApi.ts
index 9c50884b..d4545812 100644
--- a/src/lib_components/types/neonApi.ts
+++ b/src/lib_components/types/neonApi.ts
@@ -25,6 +25,14 @@ export interface Release extends IReleaseLike {
   dataProducts: UnknownRecord[];
 }
 
+export interface DataProductSpec {
+  specId: string;
+  specNumber: string;
+  specType: string;
+  specSize: number;
+  specDescription: string;
+}
+
 export interface NeonDocument {
   name: string;
   type: string;
@@ -41,3 +49,20 @@ export interface DataProductRelease extends IReleaseLike {
   url: string;
   productDoi: DataProductReleaseDoi;
 }
+
+export interface QuickStartGuideDocument {
+  name: string;
+  description: string;
+  type: string;
+  size: number;
+  md5: string;
+  generationDate: string;
+  url: string;
+}
+
+export interface QuickStartGuideVersion {
+  name: string;
+  version: number;
+  publishedDate: string;
+  documents: QuickStartGuideDocument[];
+}