commit 265541edc3c013c455b4d83caf60ba80b41275b8
Author: Chintan Desai <chintan@wezbyte.com>
Date:   Wed May 22 00:26:01 2024 -0400

    sample files from a smithsonian project

diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..0a3af40
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,7 @@
+# Browsers that we support
+
+last 1 version
+> 1%
+maintained node versions
+not dead
+ie 11
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..cf0dff6
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,5 @@
+# Unix-style newlines with a newline ending every file
+[*]
+indent_style = space
+indent_size = 2
+insert_final_newline = true
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..db181dd
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+**/*.min.js
diff --git a/.eslintrc.yml b/.eslintrc.yml
new file mode 100644
index 0000000..2a4eaec
--- /dev/null
+++ b/.eslintrc.yml
@@ -0,0 +1,36 @@
+extends:
+  - airbnb
+  - prettier
+  - prettier/react
+  - plugin:prettier/recommended
+plugins:
+  - react
+  - prettier
+  - jest
+env:
+  es6: true
+  browser: true
+  jest/globals: true
+globals:
+  expect: true
+  it: true
+  describe: true
+  Drupal: true
+parser: babel-eslint
+rules:
+  strict: 0
+  react/jsx-filename-extension: [1, { 'extensions': ['.js', '.jsx'] }]
+  import/no-extraneous-dependencies: 0
+  react/prefer-stateless-function: 0
+  prettier/prettier: error
+  jsx-a11y/label-has-for:
+    - 2
+    - required:
+        some:
+          - nesting
+          - id
+overrides:
+  - files:
+      - '*.stories.js'
+    rules:
+      react/no-danger: 0
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7b1db20
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Ignore compiled files.
+dist
+
+# Yarn/NPM
+node_modules/
+yarn.lock
+
+# Storybook
+.out
+
+# System
+.DS_Store
+
+# Git deploy
+.publish
+
+# Composer
+composer.lock
+/vendor/
+
+# Jest
+.coverage
+
+# Storybook Public
+/storybook
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..5fca0d5
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+scripts-prepend-node-path=true
diff --git a/Thumbs.db b/Thumbs.db
new file mode 100644
index 0000000..484269f
Binary files /dev/null and b/Thumbs.db differ
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..188f4d7
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,24 @@
+module.exports = (api) => {
+  api.cache(true);
+
+  const presets = [
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        corejs: 3,
+        useBuiltIns: 'usage',
+      },
+    ],
+    [
+      'minify',
+      {
+        builtIns: false
+      }
+    ]
+  ];
+
+  const comments = false;
+
+  return { presets, comments };
+};
diff --git a/cdesai_emulsify.breakpoints.yml b/cdesai_emulsify.breakpoints.yml
new file mode 100644
index 0000000..4fac4a2
--- /dev/null
+++ b/cdesai_emulsify.breakpoints.yml
@@ -0,0 +1,13 @@
+# Breakpoints - change based on site need
+cdesai_emulsify.small:
+  label: small
+  mediaQuery: 'all and (min-width: 0px)'
+  weight: 0
+cdesai_emulsify.medium:
+  label: medium
+  mediaQuery: 'all and (min-width: 768px)'
+  weight: 1
+cdesai_emulsify.large:
+  label: large
+  mediaQuery: 'all and (min-width: 1200px)'
+  weight: 2
diff --git a/cdesai_emulsify.info.yml b/cdesai_emulsify.info.yml
new file mode 100644
index 0000000..39abad1
--- /dev/null
+++ b/cdesai_emulsify.info.yml
@@ -0,0 +1,48 @@
+name: CDesai Sample
+type: theme
+description: Theme based on Emulsify.
+base theme: stable
+core: 8.x
+core_version_requirement: ^8 || ^9
+
+# Libraries (These are loaded on every page. Use https://www.drupal.org/developing/api/8/assets#twig whenever possible.)
+libraries:
+  - 'cdesai_emulsify/global'
+
+# Libraries override allows you to remove libraries added by other projects.
+libraries-override:
+  sample_layouts/twocol: false
+  sample_layouts/threecol: false
+
+# CKEditor stylesheet loads in wysiwyg to give content editors a better experience
+ckeditor_stylesheets:
+  - dist/style.css
+
+regions:
+  header: Header
+  content: Content
+  sidebar: 'Sidebar'
+  footer: Footer
+
+logo: images/logo.png
+
+# MUST install `components` module: `drush dl components && drush en components -y``
+component-libraries:
+  foundations:
+    paths:
+      - source/01-foundations
+  layouts:
+    paths:
+      - source/02-layouts
+  elements:
+    paths:
+      - source/03-elements
+  components:
+    paths:
+      - source/04-components
+  templates:
+    paths:
+      - source/05-templates
+  content:
+    paths:
+      - source/06-content
diff --git a/cdesai_emulsify.theme b/cdesai_emulsify.theme
new file mode 100644
index 0000000..70281a2
--- /dev/null
+++ b/cdesai_emulsify.theme
@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * @file
+ * Functions to support theming.
+ */
+
+require_once dirname(__FILE__) . '/includes/block.inc';
+require_once dirname(__FILE__) . '/includes/breadcrumb.inc';
+require_once dirname(__FILE__) . '/includes/collections.inc';
+require_once dirname(__FILE__) . '/includes/field.inc';
+require_once dirname(__FILE__) . '/includes/node.inc';
+require_once dirname(__FILE__) . '/includes/page.inc';
+require_once dirname(__FILE__) . '/includes/paragraph.inc';
+require_once dirname(__FILE__) . '/includes/view.inc';
diff --git a/includes/block.inc b/includes/block.inc
new file mode 100644
index 0000000..2927f99
--- /dev/null
+++ b/includes/block.inc
@@ -0,0 +1,29 @@
+<?php
+/**
+ * @file
+ * Block-related functions.
+ */
+
+use Drupal\block\Entity\Block;
+
+/**
+ * Implements hook_preprocess_block().
+ * http://kristiankaa.dk/article/drupal8-region-specific-menu-theme-hook-suggestion
+ */
+function cdesai_emulsify_preprocess_block(&$variables) {
+  if(isset($variables['attributes']['id'])) {
+    $variables['content']['#attributes']['block'] = $variables['attributes']['id'];
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function cdesai_emulsify_theme_suggestions_menu_alter(array &$suggestions, array $variables) {
+  // Remove the block and replace dashes with underscores in the block ID to
+  // use for the hook name.
+  if (isset($variables['attributes']['block'])) {
+    $hook = str_replace(array('block-', '-'), array('', '_'),    $variables['attributes']['block']);
+    $suggestions[] = $variables['theme_hook_original'] . '__' . $hook;
+  }
+}
diff --git a/includes/field.inc b/includes/field.inc
new file mode 100644
index 0000000..9dfc47e
--- /dev/null
+++ b/includes/field.inc
@@ -0,0 +1,18 @@
+<?php
+
+/**
+ * Implements hook_theme_suggestions_field_alter().
+ */
+function cdesai_emulsify_theme_suggestions_field_alter(array &$suggestions, array $variables) {
+  $suggestions[] = 'field__' . $variables['element']['#entity_type'] . '__' . $variables['element']['#field_name'] . '__' . $variables['element']['#view_mode'];
+  $suggestions[] = 'field__' . $variables['element']['#entity_type'] . '__' . $variables['element']['#field_name'] . '__' . $variables['element']['#bundle'] . '__' . $variables['element']['#view_mode'];
+}
+
+/**
+ * Implements hook_preprocess_field__HOOK().
+ */
+function cdesai_emulsify_preprocess_field__paragraph__field_title__horizontal_tab(&$variables) {
+  if (!empty($variables['element']['#id_prefix'])) {
+    $variables['id_prefix'] = $variables['element']['#id_prefix'];
+  }
+}
diff --git a/includes/node.inc b/includes/node.inc
new file mode 100644
index 0000000..3e9e19d
--- /dev/null
+++ b/includes/node.inc
@@ -0,0 +1,67 @@
+<?php
+/**
+ * @file
+ * Node-related functions.
+ */
+
+/**
+ * Implements hook_preprocess_node__BUNDLE().
+ */
+function cdesai_emulsify_preprocess_node__event(&$variables) {
+  // final date to be used - if no end_date available, then use start_date
+  $date_to_use = NULL;
+  $content = $variables['content'];
+  $view_mode = $variables['view_mode'];
+
+  // check to see if a date has been entered at all
+  if (isset($content['field_daterange'][0])) {
+
+    if (isset($start_date)) {
+      // set date to use as start date, but if end date is available use that instead.
+      $date_to_use = $start_date;
+      if (!empty($end_date)) {
+        $date_to_use = $end_date;
+      }
+
+      // convert date_to_use string to date object
+      $dateToUseObj = DateTime::createFromFormat("l, F j, Y - h:ia", $date_to_use);
+      if ($dateToUseObj) {
+        // convert date object to timestamp
+        $date_timestamp = $dateToUseObj->getTimestamp();
+        // convert current time to timestamp
+        $current_timestamp = strtotime("now");
+        // returns TRUE if past event, FALSE otherwise
+        $variables['event_is_past'] = $current_timestamp > $date_timestamp ?: FALSE;
+
+        // break up the start and end dates
+        $startDateObj = DateTime::createFromFormat("l, F j, Y - h:ia", $start_date);
+        $event_start_date = $startDateObj->format($dateFormat);
+        $event_start_time = $startDateObj->format('g:ia');
+
+        if (!empty($end_date)) {
+          $endDateObj = DateTime::createFromFormat("l, F j, Y - h:ia", $end_date);
+          $event_end_date = $endDateObj->format($dateFormat . ', Y');
+          $event_end_time = $endDateObj->format('g:ia');
+
+          // default to display both the start and end dates
+          $variables['event_date'] = $event_start_date . ' - ' . $event_end_date;
+          // if the start date and end date are equal, display only the end date
+          if ($startDateObj->format($dateFormat . ', Y') == $event_end_date) {
+            $variables['event_date'] = $event_end_date;
+          }
+          // append the start and end times.
+          $variables['event_time'] = $event_start_time . ' - ' . $event_end_time;
+          // If the start and end time are the same, display "All Day" instead.
+          if ($event_start_time == $event_end_time && $event_start_date == $event_end_date) {
+            $variables['event_time'] = t('All Day');
+          }
+        } else {
+          // If no end date, show only the start date and the text "All Day".
+          $variables['event_date'] = $event_start_date;
+          $variables['event_time'] = t('All Day');
+        }
+      }
+    }
+  }
+
+}
diff --git a/includes/page.inc b/includes/page.inc
new file mode 100644
index 0000000..b35a9ba
--- /dev/null
+++ b/includes/page.inc
@@ -0,0 +1,12 @@
+<?php
+
+/**
+ * Implements_hook_preprocess_html().
+ */
+function cdesai_emulsify_preprocess_html(&$vars) {
+  if (!empty($vars['head_title']['title'])) {
+    $vars['page']['#share_title'] = $vars['head_title']['title'];
+  } elseif (!empty($vars['head_title']['name'])) {
+    $vars['page']['#share_title'] = $vars['head_title']['name'];
+  }
+}
diff --git a/includes/paragraph.inc b/includes/paragraph.inc
new file mode 100644
index 0000000..f4df167
--- /dev/null
+++ b/includes/paragraph.inc
@@ -0,0 +1,156 @@
+<?php
+/**
+ * @file
+ * Paragraph-related functions.
+ */
+
+use Drupal\node\NodeInterface;
+use Drupal\taxonomy\Entity\Term;
+
+/**
+ * Implements Implements hook_preprocess_paragraph().
+ */
+function cdesai_emulsify_preprocess_paragraph(&$variables) {
+  // allow page_type and sub_page_type variables
+  // to be used within Twig to control styling on a per
+  // paragraph basis, e.g., currently used for TAR pages.
+  $paragraph = $variables['elements']['#paragraph'];
+  $renderer = \Drupal::service('renderer');
+  $parent = $paragraph->getParentEntity();
+  $renderer->addCacheableDependency($variables, $parent);
+  // Check if the node is on a page with the page type field.
+  if ($parent instanceof NodeInterface &&
+    $parent->bundle() == 'page' &&
+    $parent->hasField('field_page_type') &&
+    !$parent->get('field_page_type')->isEmpty()
+  ) {
+    $pageTypes = $parent->get('field_page_type')->referencedEntities();
+    $pageTypeTerm = reset($pageTypes);
+    $renderer->addCacheableDependency($variables, $pageTypeTerm);
+    // If the term is a child term, set the parent to page type.
+    if ($pageTypeTerm->parent->target_id !== "0") {
+      $parentTerm = Term::load($pageTypeTerm->parent->target_id);
+      $renderer->addCacheableDependency($variables, $parentTerm);
+      $variables['page_type'] = $parentTerm->getName();
+      $variables['sub_page_type'] = $pageTypeTerm->getName();
+    }
+    // Otherwise, set the term to page type.
+    else {
+      $variables['page_type'] = $pageTypeTerm->getName();
+    }
+  }
+}
+
+/**
+ * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE().
+ */
+function cdesai_emulsify_preprocess_paragraph__excerpt(&$variables) {
+  $content = &$variables['content'];
+
+  // check for field_url and update the link text to 'View Source'
+  // when the link text value contains the same value as the URL,
+  // which is the default behavior when no link text is provided.
+  if (isset($content['field_url']) & !empty($content['field_url'])) {
+    if (isset($content['field_url'][0]['#title'])) {
+      $urlString = $content['field_url'][0]['#url']->toString();
+      if ($content['field_url'][0]['#title'] == $urlString) {
+        $content['field_url'][0]['#title'] = 'View Source';
+      }
+    }
+  }
+
+}
+
+/**
+ * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE().
+ */
+function cdesai_emulsify_preprocess_paragraph__media_item(&$variables) {
+  $content = &$variables['content'];
+  $parent = $variables['elements']['#paragraph']->getParentEntity();
+  if (isset($content['field_caption_hide'][0]['#markup'])) {
+    switch ($content['field_caption_hide'][0]['#markup']) {
+      case 'No':
+        if (!isset($content['field_caption'][0])) {
+          // check for media and if the field body is not empty
+          if (isset($content['field_media'][0])) {
+            $media = $content['field_media'][0]['#media'];
+            if ($media->hasField('field_body') && !$media->get('field_body')->isEmpty()) {
+              $field_body = $media->get('field_body')->getValue();
+              $paragraph = &$variables['paragraph'];
+              // copy field body to field caption
+              $paragraph->field_caption->value = $field_body[0]['value'];
+              // render field_caption with parent view_mode
+              $content['field_caption'] = $paragraph->field_caption->view($variables['view_mode']);
+              $content['field_caption'][0]['#format'] = 'limited_html';
+            }
+          }
+        }
+      break;
+      case 'Yes':
+        // hide caption is checked
+        if (isset($content['field_caption'][0])) {
+          unset($content['field_caption'][0]);
+        }
+      break;
+    }
+  }
+  // Remove the default alignment from media items unless added to a Basic
+  // paragraph.
+  if ($parent->getEntityTypeId() != 'paragraph' ||
+    $parent->bundle() != 'basic') {
+    $content['field_media_alignment'] = false;
+  }
+}
+
+/**
+ * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE().
+ */
+function cdesai_emulsify_preprocess_paragraph__header(&$variables) {
+  /** @var \Drupal\paragraphs\ParagraphInterface $paragraph */
+  $paragraph = $variables['paragraph'];
+  $parent = $paragraph->getParentEntity();
+
+  if ($parent->hasField('field_date') && $parent->get('field_date')->count() > 0) {
+    $date = $parent->get('field_date')->get(0)->getValue();
+    // See /admin/config/regional/date-time for date formats.
+    $variables['header_date'] = \Drupal::service('date.formatter')->format(strtotime($date['value']), 'header_date');
+  }
+
+  // Get the URL of the parent node for teaser headers.
+  if ($variables['view_mode'] == 'teaser_header') {
+    if ($parent instanceof NodeInterface) {
+      $variables['node_url'] = $parent->toUrl()->toString();
+      $renderer = \Drupal::service('renderer');
+      $renderer->addCacheableDependency($variables, $parent);
+    }
+  }
+}
+
+/**
+ * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE().
+ */
+function cdesai_emulsify_preprocess_paragraph__horizontal_tabs(&$variables) {
+  // Get title fields of all nested tabs for use in the tab list,
+  // and set a unique prefix for tab element IDs to avoid collisions when
+  // multiple tabs are included on a page.
+  $tabs = \Drupal\Core\Render\Element::children($variables['content']['field_tabs']);
+  $tabId = \Drupal\Component\Utility\Html::getUniqueId('tab');
+  foreach ($tabs as $tabIndex) {
+    $paragraph = $variables['content']['field_tabs'][$tabIndex]['#paragraph'];
+    if ($paragraph->hasField('field_title')) {
+      $title = $paragraph->get('field_title');
+      $variables['content']['tab_titles'][$tabIndex] = $title->view('horizontal_tab');
+      $variables['content']['tab_titles'][$tabIndex]['#id_prefix'] = $tabId;
+    }
+    $variables['content']['field_tabs'][$tabIndex]['#id_prefix'] = $tabId;
+  }
+}
+
+/**
+ * Implements hook_preprocess_paragraph__PARAGRAPH_TYPE().
+ */
+function cdesai_emulsify_preprocess_paragraph__tab__horizontal_tab(&$variables) {
+  if (!empty($variables['elements']['#id_prefix'])) {
+    $variables['id_prefix'] = $variables['elements']['#id_prefix'];
+  }
+}
diff --git a/includes/view.inc b/includes/view.inc
new file mode 100644
index 0000000..ab922ca
--- /dev/null
+++ b/includes/view.inc
@@ -0,0 +1,93 @@
+<?php
+
+/**
+ * Implements hook_preprocess_views_view().
+ */
+function cdesai_emulsify_preprocess_views_view(&$vars) {
+  // Add the view title to selected views.
+  if (in_array($vars['id'], [
+    'page_teaser_topic',
+    'media_resources_tar',
+    'events_by_series',
+    'events_teaser_small',
+    'news_teaser_small',
+    'news_related_card',
+  ])) {
+    $vars['title'] = [
+      '#markup' => $vars['view']->getTitle(),
+    ];
+  }
+
+  // Add classes to the more link to selected views.
+  if (in_array($vars['id'], [
+    'events_teaser_small',
+    'news_teaser_small',
+    'media_resources_tar',
+    'page_teaser_topic',
+  ]) && !empty($vars['more'])) {
+    $vars['more']['#options']['attributes']['class'][] = 'arrow-link';
+    $vars['more']['#options']['attributes']['class'][] = 'view__more-link';
+  }
+  elseif (in_array($vars['id'], [
+    'publication_teaser',
+    'news_teaser',
+    'news_related_card',
+    'page_teaser',
+  ]) && !empty($vars['more'])) {
+    $vars['more']['#options']['attributes']['class'][] = 'button';
+    $vars['more']['#options']['attributes']['class'][] = 'button--secondary';
+  }
+}
+
+/**
+ * Implements hook_preprocess_views_view__HOOK().
+ */
+function cdesai_emulsify_preprocess_views_view__events_by_series(&$vars) {
+  if (!empty($vars['attachment_before']) &&
+    !empty($vars['attachment_before'][0])
+  ) {
+    $attachment_before = $vars['attachment_before'][0]['#view'];
+    $vars['attachment_before_rows'] = $attachment_before->total_rows;
+  }
+}
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ */
+function cdesai_emulsify_form_views_exposed_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $formState) {
+  // Group start and end date within a fieldset.
+  if (!empty($form['#id']) &&
+    in_array($form['#id'], ['views-exposed-form-news-teaser-list-search-news']) &&
+    !empty($form['published_date'])
+  ) {
+    $published_date_range = [
+      '#type' => 'fieldset',
+      '#name' => 'published_date_range',
+      '#title' => t('Published Date'),
+      'published_date' => $form['published_date'],
+    ];
+    // Since the order of the displayed exposed form options more or less
+    // follows the array order, insert the new fieldset next to the start date.
+    $published_date_index = array_search('published_date', array_keys($form));
+    $form = array_merge(
+      array_slice($form, 0, $published_date_index),
+      ['published_date_range' => $published_date_range],
+      array_slice($form, $published_date_index)
+    );
+    unset($form['published_date']);
+  }
+}
+
+/**
+ * Implements hook_preprocess_views_exposed_form
+ */
+function cdesai_emulsify_preprocess_views_exposed_form(&$vars) {
+  $form = &$vars['form'];
+  if (!empty($form['published_date_range'])) {
+    // Views doesn't add labels to exposed form elements until the preprocess
+    // function, so we do the same thing here for elements moved into a fieldset.
+    // @see template_preprocess_views_exposed_form
+    $form['published_date_range']['published_date']['min']['#title'] = t('Start');
+    $form['published_date_range']['published_date']['max']['#title'] = t('End');
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..777fb01
--- /dev/null
+++ b/package.json
@@ -0,0 +1,125 @@
+{
+  "name": "emulsify-drupal",
+  "version": "1.0.0",
+  "description": "Storybook development + Webpack Build + Drupal 8 theme",
+  "keywords": [
+    "component library",
+    "design system",
+    "drupal",
+    "pattern library",
+    "storybook",
+    "styleguide"
+  ],
+  "author": "Evan Willhite <evan@fourkitchens.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@storybook/addon-a11y": "6.0.21",
+    "@storybook/addon-actions": "6.0.21",
+    "@storybook/addon-docs": "^6.1.14",
+    "@storybook/addon-links": "6.0.21",
+    "@storybook/addons": "6.0.21",
+    "@storybook/react": "6.0.21",
+    "@storybook/storybook-deployer": "^2.8.6",
+    "@tailwindcss/postcss7-compat": "^2.0.2",
+    "add-attributes-twig-extension": "^0.1.0",
+    "autoprefixer": "^9.8.6",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.1.0",
+    "babel-preset-minify": "^0.5.0",
+    "bem-twig-extension": "^0.1.1",
+    "breakpoint-sass": "^2.7.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^4.3.0",
+    "eslint": "^7.9.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.20.6",
+    "fibers": "^5.0.0",
+    "file-loader": "^6.1.0",
+    "focus-visible": "^5.2.0",
+    "fs": "^0.0.1-security",
+    "glob": "^7.1.4",
+    "gsap": "^3.6.1",
+    "imagemin-webpack-plugin": "^2.4.2",
+    "js-yaml-loader": "^1.2.2",
+    "macy": "^2.5.1",
+    "node-sass": "^4.14.1",
+    "node-sass-glob-importer": "^5.3.2",
+    "normalize.css": "^8.0.1",
+    "postcss": "^7.0.35",
+    "postcss-custom-properties": "^9.1.1",
+    "ramda": "^0.27.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "sass": "^1.32.13",
+    "sass-loader": "^10.0.2",
+    "style-loader": "^1.2.1",
+    "stylelint": "^13.7.1",
+    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-webpack-plugin": "^2.0.0",
+    "svg-sprite-loader": "^5.0.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "twig": "^1.15.2",
+    "twig-drupal-filters": "^3.1.0",
+    "twig-loader": "https://github.com/fourkitchens/twig-loader",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-merge": "^5.1.4"
+  },
+  "scripts": {
+    "commit": "git-cz",
+    "lint": "eslint ./source",
+    "a11y": "npm run build-storybook && ./scripts/a11y.js -r",
+    "storybook": "start-storybook --ci -s ./dist,./images -p 6006",
+    "build-storybook": "build-storybook -s ./dist,./images -o storybook",
+    "deploy-storybook": "storybook-to-ghpages -o .out",
+    "webpack": "webpack --watch --config ./webpack/webpack.dev.js --display-error-details",
+    "build": "webpack --config ./webpack/webpack.prod.js --display-error-details",
+    "develop": "concurrently --raw \"npm run webpack\" \"npm run storybook\"",
+    "test": "jest --coverage",
+    "twatch": "jest --no-coverage --watch --verbose",
+    "coverage": "yarn test && open-cli .coverage/lcov-report/index.html",
+    "format": "prettier --write \"**/*.{js,yml,scss,md}\"",
+    "lint-staged": "lint-staged",
+    "deploy": "npm run build && npm run build-storybook"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.10.1",
+    "@storybook/addon-viewport": "^6.1.15",
+    "@storybook/theming": "^6.2.1",
+    "@testing-library/react": "^10.2.1",
+    "@whitespace/storybook-addon-html": "^4.2.0",
+    "babel-jest": "^26.3.0",
+    "chalk": "^4.0.0",
+    "commitizen": "^4.1.2",
+    "concurrently": "^5.3.0",
+    "core-js": "3",
+    "cz-conventional-changelog": "3.3.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jest": "^23.20.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "husky": "^4.2.5",
+    "jest": "^26.4.2",
+    "lint-staged": "^10.2.11",
+    "micromodal": "^0.4.6",
+    "mini-css-extract-plugin": "^0.11.3",
+    "open-cli": "^6.0.1",
+    "pa11y": "^5.3.0",
+    "postcss-focus-visible": "^5.0.0",
+    "postcss-loader": "^3.0.0",
+    "prettier": "2.1.1",
+    "react-test-renderer": "^16.13.1",
+    "tiny-slider": "^2.9.3",
+    "twig-testing-library": "^1.1.1",
+    "yaml": "^1.10.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..ab92c68
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    'postcss-focus-visible': {},
+    autoprefixer: {},
+  },
+};
\ No newline at end of file
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..de2f53c
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+};
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000..43e603e
Binary files /dev/null and b/screenshot.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..6259f56
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,130 @@
+module.exports = {
+  theme: {
+    colors: {
+      purple: {
+        DEFAULT: '#612A60',
+        dark: '#3F0C39',
+      },
+      orange: {
+        light: '#EDAA1A',
+        DEFAULT: '#DA4926',
+        dark: '#9E3D1F',
+      },
+      teal: {
+        DEFAULT: '#1C8B81',
+      },
+      gray: {
+        100: '#F3F3F3',
+        200: '#DDDDDD',
+        300: '#8C8B8C',
+        400: '#636363',
+        500: '#333333',
+        warm: '#3A3633',
+        smoke: '#48535B',
+      },
+      white: {
+        DEFAULT: '#FFFFFF',
+      },
+      black: {
+        DEFAULT: '#000000',
+      },
+    },
+    fontSize: {
+      xxs: '12px',
+      xs: '14px',
+      sm: '16px',
+      'base-sm': '18px',
+      base: '20px',
+      md: '24px',
+      'md-lg': '28px',
+      lg: '32px',
+      xl: '36px',
+      xxl: '40px',
+      '3xl': '48px',
+      '4xl': '56px',
+      display: '80px',
+    },
+    lineHeight: {
+      'x-tight': '1.05',
+      tight: '1.15',
+      narrow: '1.33',
+      base: '1.5',
+      loose: '2',
+    },
+    fontFamily: {
+      sans: ['freight-sans-pro', 'Helvetica', 'Arial', 'sans-serif'],
+      serif: ['freight-text-pro', 'Georgia', 'serif'],
+    },
+    screens: {
+      'mobile-sm': '360px',
+      mobile: '480px',
+      tablet: '640px',
+      'tablet-lg': '880px',
+      'hide-mobile-menu': '900px',
+      desktop: '1024px',
+      'desktop-lg': '1200px',
+      'desktop-xl': '1350px',
+    },
+    spacing: {
+      0: '0',
+      '1px': '1px',
+      '2px': '2px',
+      '3px': '3px',
+      xxs: '4px',
+      xs: '8px',
+      sm: '16px',
+      base: '24px',
+      md: '40px',
+      lg: '56px',
+      xl: '80px',
+      xxl: '96px',
+      '3xl': '160px',
+      '4xl': '20rem',
+      full: '100%',
+    },
+    borderWidth: {
+      DEFAULT: '1px',
+      0: '0',
+      2: '2px',
+      3: '3px',
+      4: '4px',
+      6: '6px',
+      8: '8px',
+    },
+    boxShadow: {
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      DEFAULT: '0 2px 8px rgba(0,0,0,0.4);',
+      md: '0 3px 12px -1px rgba(0, 0, 0, 0.15)',
+      lg:
+        '0 29px 70px -40px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      none: 'none',
+    },
+    extend: {
+      borderRadius: {
+        '4xl': '2rem',
+      },
+      maxWidth: {
+        '1/4': '25%',
+        '1/3': '33.33%',
+        '1/2': '50%',
+        '2/3': '66.66%',
+        '3/4': '75%',
+      },
+      outline: {
+        blue: '2px solid #0000ff',
+        white: '1px dashed #ffffff',
+        orange: '1px dashed #DA4926',
+      },
+      letterSpacing: {
+        loose: '1px',
+      },
+    },
+  },
+  variants: {
+    extend: {
+      outline: ['focus-visible'],
+      opacity: ['disabled'],
+      backgroundColor: ['active'],
+    },
+  },
+};
diff --git a/templates/block/block--facet-block.html.twig b/templates/block/block--facet-block.html.twig
new file mode 100644
index 0000000..a93bf63
--- /dev/null
+++ b/templates/block/block--facet-block.html.twig
@@ -0,0 +1,6 @@
+{% if content.0['#items'] is not null %}
+  {% include "@components/facets/facet-group.twig" with {
+    facet_group_title: label,
+    facet_group_items: content
+  }%}
+{% endif %}
\ No newline at end of file
diff --git a/templates/block/block--filterbycontenttype.html.twig b/templates/block/block--filterbycontenttype.html.twig
new file mode 100644
index 0000000..f2ddd67
--- /dev/null
+++ b/templates/block/block--filterbycontenttype.html.twig
@@ -0,0 +1,3 @@
+{% include '@components/horizontal-facets/horizontal-facets.twig' with {
+  facets: content.0['#items']
+}%}
\ No newline at end of file
diff --git a/templates/block/block--mainnavigation.html.twig b/templates/block/block--mainnavigation.html.twig
new file mode 100644
index 0000000..410ed85
--- /dev/null
+++ b/templates/block/block--mainnavigation.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ */
+#}
+
+{# Label. If not displayed, we still provide it for screen readers. #}
+{% if not configuration.label_display %}
+  {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+{% endif %}
+{{ title_prefix }}
+{% include "@elements/text/headings/_heading.twig" with {
+  "heading_level": 2,
+  "heading": label,
+} %}
+{{ title_suffix }}
+
+{# Menu. #}
+{% block content %}
+  {{ content }}
+{% endblock %}
diff --git a/templates/block/block--submenu.html.twig b/templates/block/block--submenu.html.twig
new file mode 100644
index 0000000..89a418f
--- /dev/null
+++ b/templates/block/block--submenu.html.twig
@@ -0,0 +1,5 @@
+{% include "@components/subnav/subnav.twig" with {
+  subnav_title: label,
+  subnav_menu: content,
+  header_id: 'subnav-header-' ~ attributes.id,
+}%}
diff --git a/templates/block/block--views-exposed-filter-block.html.twig b/templates/block/block--views-exposed-filter-block.html.twig
new file mode 100644
index 0000000..c81b3a1
--- /dev/null
+++ b/templates/block/block--views-exposed-filter-block.html.twig
@@ -0,0 +1,2 @@
+
+{{ content }}
\ No newline at end of file
diff --git a/templates/block/block.html.twig b/templates/block/block.html.twig
new file mode 100644
index 0000000..f0a2529
--- /dev/null
+++ b/templates/block/block.html.twig
@@ -0,0 +1,37 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+<div {{ bem('block') }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes.addClass('h2') }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>
diff --git a/templates/content/node--publication--full.html.twig b/templates/content/node--publication--full.html.twig
new file mode 100644
index 0000000..a778f61
--- /dev/null
+++ b/templates/content/node--publication--full.html.twig
@@ -0,0 +1,23 @@
+{% set image %}
+  {% if content.field_header.0['#paragraph'].field_image is not empty %}
+    {% set url = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value) %}
+    {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %}
+    <img src="{{ url }}" alt="{{ alt }}"/>
+  {% else %}
+    <img src="/themes/custom/cdesai_emulsify/images/default.jpg" alt="sample placeholder image" />
+  {% endif %} 
+{% endset %}
+
+{% include '@templates/publication.twig' with {
+  publication_header: content.field_header|field_value,
+  publication_media: image,
+  publication_purchase_url: content.field_url.0['#url'],
+  publication_author: content.field_authors|field_value,
+  publication_editor: content.field_editors|field_value,
+  publication_publisher: content.field_publisher|field_value,
+  publication_year: content.field_year|field_value,
+  publication_series: content.field_series|field_value,
+  publication_type: content.field_publication_type|field_value,
+  publication_body: content.body,
+  publication_related_content: false
+}%}
\ No newline at end of file
diff --git a/templates/content/node--publication--search-result.html.twig b/templates/content/node--publication--search-result.html.twig
new file mode 100644
index 0000000..b33ebb0
--- /dev/null
+++ b/templates/content/node--publication--search-result.html.twig
@@ -0,0 +1,26 @@
+{# Set image from page header if it exists #}
+{% if content.field_header.0['#paragraph'].field_image is not empty %}
+  {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %}
+  {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %}
+  {% set image %}
+    <img src="{{ src }}" alt="{{ alt ? alt : '' }}" />
+  {% endset %}
+{% endif %}
+
+{# Trim summary #}
+{% if content.field_summary.0['#context'].value|length > 250 %}
+  {% set summary %}
+    {{ content.field_summary.0['#context'].value|slice(0, 250) }}...
+  {% endset %}
+{% else %}
+  {% set summary = content.field_summary|field_value %}
+{% endif %}
+
+{% include "@components/search-listing/search-listing.twig" with {
+  listing_eyebrow: 'Publication'|t,
+  listing_title: label,
+  listing_meta: false,
+  listing_summary: summary,
+  listing_media: image ? image : false,
+  listing_url: url,
+}%}
\ No newline at end of file
diff --git a/templates/content/node--publication--teaser-list.html.twig b/templates/content/node--publication--teaser-list.html.twig
new file mode 100644
index 0000000..1290791
--- /dev/null
+++ b/templates/content/node--publication--teaser-list.html.twig
@@ -0,0 +1,28 @@
+{% set image %}
+  {% if content.field_header|render|striptags('<img>')|trim %}
+    {{ content.field_header }}
+  {% else %}
+    <img src="/themes/custom/cdesai_emulsify/images/default.jpg" alt="" aria-hidden="true" />
+  {% endif %}
+{% endset %}
+
+{% embed "@components/teaser/teaser--listing/teaser--listing.twig" with {
+  teaser_media: image,
+  teaser_url: url,
+  teaser_link_text: 'View publication details'|t,
+  teaser_link_title: label,
+  modifier_classes: attributes.class|join(' ')|trim,
+  drupal_attributes: attributes|without('class'),
+} %}
+  {% block content %}
+    {{ title_suffix.contextual_links }}
+    {{ content.field_year }}
+    {% include '@components/teaser/_teaser-title.twig' with {
+      title_tag: 'h4',
+      teaser_title: label,
+      modifier_classes: false,
+      drupal_attributes: false,
+    } %}
+    {{ content|without('field_header', 'field_year') }}
+  {% endblock %}
+{% endembed %}
diff --git a/templates/content/node--publication--teaser.html.twig b/templates/content/node--publication--teaser.html.twig
new file mode 100644
index 0000000..d644cea
--- /dev/null
+++ b/templates/content/node--publication--teaser.html.twig
@@ -0,0 +1,21 @@
+{% set image %}
+  {% if content.field_header.0['#paragraph'].field_image is not empty %}
+    {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %}
+    {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %}
+    <img src="{{ src }}" alt="{{ alt ? alt : '' }}"/>
+  {% else %}
+    <img src="/themes/custom/cdesai_emulsify/images/default.jpg" alt="sample placeholder image" />
+  {% endif %}
+{% endset %}
+
+{% include "@components/teaser/teaser.twig" with {
+  modifier_classes: attributes.class|join(' ')|trim,
+  drupal_attributes: attributes|without('class'),
+  teaser_image: image,
+  teaser_eyebrow: content.field_year|field_value,
+  teaser_title: label|field_value,
+  teaser_body: content.field_summary|field_value,
+  teaser_link_class: 'arrow-link',
+  teaser_link_url: url,
+  teaser_link_text: 'Read More'
+}%}
diff --git a/templates/content/node--story--full.html.twig b/templates/content/node--story--full.html.twig
new file mode 100644
index 0000000..337e3c6
--- /dev/null
+++ b/templates/content/node--story--full.html.twig
@@ -0,0 +1,7 @@
+{% include "@templates/story.twig" with {
+  story_has_footer: tags is not empty ? true : false,
+  story_header: content.field_header|field_value,
+  story_content: content.field_content|field_value,
+  story_tags: content.field_keywords|field_value,
+  story_related_stories: drupal_view('story_related_card')
+}%}
diff --git a/templates/content/node--story--related-card.html.twig b/templates/content/node--story--related-card.html.twig
new file mode 100644
index 0000000..1cc1428
--- /dev/null
+++ b/templates/content/node--story--related-card.html.twig
@@ -0,0 +1,15 @@
+{% set image %}
+  {% if content.field_header|render|striptags('<img>')|trim is not empty %}
+    {{ content.field_header }}
+  {% else %}
+    <img src="/themes/custom/cdesai_emulsify/images/default.jpg" alt="" aria-hidden="true" />
+  {% endif %}
+{% endset %}
+
+{% include "@components/related-content/_related-content-item.twig" with {
+  title: label,
+  url: url,
+  date: content|without('field_header'),
+  media: image,
+  header_id: 'related-card-' ~ node.id(),
+}%}
diff --git a/templates/content/node--story--search-result.html.twig b/templates/content/node--story--search-result.html.twig
new file mode 100644
index 0000000..a92179f
--- /dev/null
+++ b/templates/content/node--story--search-result.html.twig
@@ -0,0 +1,26 @@
+{# Set image from page header if it exists #}
+{% if content.field_header.0['#paragraph'].field_image is not empty %}
+  {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %}
+  {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %}
+  {% set image %}
+    <img src="{{ src }}" alt="{{ alt ? alt : '' }}" />
+  {% endset %}
+{% endif %}
+
+{# Trim summary #}
+{% if content.field_summary.0['#context'].value|length > 250 %}
+  {% set summary %}
+    {{ content.field_summary.0['#context'].value|slice(0, 250) }}...
+  {% endset %}
+{% else %}
+  {% set summary = content.field_summary|field_value %}
+{% endif %}
+
+{% include "@components/search-listing/search-listing.twig" with {
+  listing_eyebrow: 'Story'|t,
+  listing_title: label,
+  listing_meta: false,
+  listing_summary: summary,
+  listing_media: image ? image : false,
+  listing_url: url,
+}%}
\ No newline at end of file
diff --git a/templates/content/node--story--teaser-list.html.twig b/templates/content/node--story--teaser-list.html.twig
new file mode 100644
index 0000000..d37f0ef
--- /dev/null
+++ b/templates/content/node--story--teaser-list.html.twig
@@ -0,0 +1,26 @@
+{% set image %}
+  {% if content.field_header|render|striptags('<img>')|trim %}
+    {{ content.field_header }}
+  {% else %}
+    <img src="/themes/custom/cdesai_emulsify/images/default.jpg" alt="" aria-hidden="true" />
+  {% endif %}
+{% endset %}
+
+{% embed "@components/teaser/teaser--listing/teaser--listing.twig" with {
+  teaser_media: image,
+  teaser_url: url,
+  teaser_link_text: 'Read story'|t,
+  teaser_link_title: label,
+  modifier_classes: attributes.class|join(' ')|trim,
+  drupal_attributes: attributes|without('class'),
+} %}
+  {% block content %}
+    {{ title_suffix.contextual_links }}
+    {{ content.field_series }}
+    {% include '@components/teaser/_teaser-title.twig' with {
+      title_tag: 'h4',
+      teaser_title: label,
+    } %}
+    {{ content|without('field_header', 'field_series') }}
+  {% endblock %}
+{% endembed %}
diff --git a/templates/content/node--story--teaser.html.twig b/templates/content/node--story--teaser.html.twig
new file mode 100644
index 0000000..06e7695
--- /dev/null
+++ b/templates/content/node--story--teaser.html.twig
@@ -0,0 +1,19 @@
+{% set image %}
+  {% if content.field_header.0['#paragraph'].field_image is not empty %}
+    {% set src = file_url(content.field_header.0['#paragraph'].field_image.entity.field_media_image.entity.uri.value|image_style('medium_4x3')) %}
+    {% set alt = content.field_header.0['#paragraph'].field_image.entity.field_media_image.alt %}
+    <img src="{{ src }}" alt="{{ alt ? alt : '' }}"/>
+  {% else %}
+    <img src="/themes/custom/cdesai_emulsify/images/default.jpg" alt="sample placeholder image" />
+  {% endif %} 
+{% endset %}
+
+{% include "@components/teaser/teaser.twig" with {
+  teaser_image: image,
+  teaser_eyebrow: content.field_series|field_value,
+  teaser_title: label|field_value,
+  teaser_body: content.field_summary|field_value,
+  teaser_link_class: 'arrow-link',
+  teaser_link_url: url,
+  teaser_link_text: 'Read More'
+}%}
\ No newline at end of file
diff --git a/templates/content/node.html.twig b/templates/content/node.html.twig
new file mode 100644
index 0000000..f2874e7
--- /dev/null
+++ b/templates/content/node.html.twig
@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ */
+#}
+
+<article {{ bem("node") }}>
+
+  {{ title_prefix }}
+  <h2>{{ label }}</h2>
+  {{ title_suffix }}
+
+  {% if display_submitted %}
+    <footer>
+      {{ author_picture }}
+      <div{{ author_attributes }}>
+        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+        {{ metadata }}
+      </div>
+    </footer>
+  {% endif %}
+
+  <div{{ content_attributes }}>
+    {{ content }}
+  </div>
+
+</article>
+
diff --git a/templates/content/page-title.html.twig b/templates/content/page-title.html.twig
new file mode 100644
index 0000000..b31aa93
--- /dev/null
+++ b/templates/content/page-title.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override for page titles.
+ *
+ * Available variables:
+ * - title_attributes: HTML attributes for the page title element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title: The page title, for use in the actual content.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ */
+#}
+
+{{ title_prefix }}
+{% if title %}
+  <h1>{{ title }}</h1>
+{% endif %}
+{{ title_suffix }}
diff --git a/templates/content/table.html.twig b/templates/content/table.html.twig
new file mode 100644
index 0000000..1a4df59
--- /dev/null
+++ b/templates/content/table.html.twig
@@ -0,0 +1,109 @@
+{#
+/**
+ * @file
+ * Theme override to display a table.
+ *
+ * Available variables:
+ * - attributes: HTML attributes to apply to the <table> tag.
+ * - caption: A localized string for the <caption> tag.
+ * - colgroups: Column groups. Each group contains the following properties:
+ *   - attributes: HTML attributes to apply to the <col> tag.
+ *     Note: Drupal currently supports only one table header row, see
+ *     https://www.drupal.org/node/893530 and
+ *     http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_table/7#comment-5109.
+ * - header: Table header cells. Each cell contains the following properties:
+ *   - tag: The HTML tag name to use; either 'th' or 'td'.
+ *   - attributes: HTML attributes to apply to the tag.
+ *   - content: A localized string for the title of the column.
+ *   - field: Field name (required for column sorting).
+ *   - sort: Default sort order for this column ("asc" or "desc").
+ * - sticky: A flag indicating whether to use a "sticky" table header.
+ * - rows: Table rows. Each row contains the following properties:
+ *   - attributes: HTML attributes to apply to the <tr> tag.
+ *   - data: Table cells.
+ *   - no_striping: A flag indicating that the row should receive no
+ *     'even / odd' styling. Defaults to FALSE.
+ *   - cells: Table cells of the row. Each cell contains the following keys:
+ *     - tag: The HTML tag name to use; either 'th' or 'td'.
+ *     - attributes: Any HTML attributes, such as "colspan", to apply to the
+ *       table cell.
+ *     - content: The string to display in the table cell.
+ *     - active_table_sort: A boolean indicating whether the cell is the active
+         table sort.
+ * - footer: Table footer rows, in the same format as the rows variable.
+ * - empty: The message to display in an extra row if table does not have
+ *   any rows.
+ * - no_striping: A boolean indicating that the row should receive no striping.
+ * - header_columns: The number of columns in the header.
+ *
+ * @see template_preprocess_table()
+ */
+#}
+<table{{ attributes.addClass('table') }}>
+  {% if caption %}
+    <caption>{{ caption }}</caption>
+  {% endif %}
+
+  {% for colgroup in colgroups %}
+    {% if colgroup.cols %}
+      <colgroup{{ colgroup.attributes }}>
+        {% for col in colgroup.cols %}
+          <col{{ col.attributes }} />
+        {% endfor %}
+      </colgroup>
+    {% else %}
+      <colgroup{{ colgroup.attributes }} />
+    {% endif %}
+  {% endfor %}
+
+  {% if header %}
+    <thead>
+      <tr>
+        {% for cell in header %}
+          <{{ cell.tag }}{{ cell.attributes.addClass('table__heading-cell') }}>
+            {{- cell.content -}}
+          </{{ cell.tag }}>
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+
+  {% if rows %}
+    <tbody>
+      {% for row in rows %}
+        <tr{{ row.attributes.addClass('table__row') }}>
+          {% for cell in row.cells %}
+            <{{ cell.tag }}{{ cell.attributes.addClass('table__cell') }}>
+              {{- cell.content -}}
+            </{{ cell.tag }}>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+    </tbody>
+  {% elseif empty %}
+    <tbody>
+      <tr class="table__row">
+        <td colspan="{{ header_columns }}" class="table__cell">{{ empty }}</td>
+      </tr>
+    </tbody>
+  {% endif %}
+  {% if footer %}
+    <tfoot>
+      {% for row in footer %}
+        <tr{{ row.attributes }}>
+          {%
+            set footer_cell_classes = [
+              'table__heading-cell',
+              'table__footer-cell',
+            ]
+          %}
+          {% for cell in row.cells %}
+            <{{ cell.tag }}{{ cell.attributes.addClass(footer_cell_classes) }}>
+              {{- cell.content -}}
+            </{{ cell.tag }}>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+    </tfoot>
+  {% endif %}
+</table>
diff --git a/templates/fields/field--node--field-date--teaser-small.html.twig b/templates/fields/field--node--field-date--teaser-small.html.twig
new file mode 100644
index 0000000..65bb17f
--- /dev/null
+++ b/templates/fields/field--node--field-date--teaser-small.html.twig
@@ -0,0 +1,20 @@
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {% include '@components/teaser/teaser--small/_teaser-eyebrow.twig' with {
+        drupal_attributes: item.attributes|without('class'),
+        teaser_eyebrow: item.content,
+      } %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {% include '@components/teaser/teaser--small/_teaser-eyebrow.twig' with {
+      drupal_attributes: attributes|without('class'),
+      teaser_eyebrow: item.content,
+    } %}
+  {% endfor %}
+{% endif %}
diff --git a/templates/fields/field--node--field-daterange--teaser.html.twig b/templates/fields/field--node--field-daterange--teaser.html.twig
new file mode 100644
index 0000000..e71cdfc
--- /dev/null
+++ b/templates/fields/field--node--field-daterange--teaser.html.twig
@@ -0,0 +1,26 @@
+{% macro display_date(date_content, attributes) %}
+  {% set rendered = date_content|render|striptags|trim %}
+  {% set dates = rendered|split(',') %}
+  {% include '@components/teaser/teaser--event/_teaser-date.twig' with {
+    teaser_start: dates.0|trim,
+    teaser_end: dates|length > 1 ? dates.1|trim : false,
+    drupal_attributes: attributes|without('class'),
+    modifier_classes: attributes.class|join(' ')|trim
+  } %}
+{% endmacro %}
+
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {{ _self.display_date(item.content, item.attributes) }}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {{ _self.display_date(item.content, attributes) }}
+  {% endfor %}
+{% endif %}
diff --git a/templates/fields/field--node--field-location--teaser.html.twig b/templates/fields/field--node--field-location--teaser.html.twig
new file mode 100644
index 0000000..e5516d5
--- /dev/null
+++ b/templates/fields/field--node--field-location--teaser.html.twig
@@ -0,0 +1,22 @@
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {% include '@components/teaser/teaser--event/_teaser-location.twig' with {
+        drupal_attributes: item.attributes|without('class'),
+        teaser_location: item.content,
+        teaser_location_label: not label_hidden ? label : false,
+      } %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {% include '@components/teaser/teaser--event/_teaser-location.twig' with {
+      drupal_attributes: attributes|without('class'),
+      teaser_location: item.content,
+      teaser_location_label: not label_hidden ? label : false,
+    } %}
+  {% endfor %}
+{% endif %}
diff --git a/templates/fields/field--node--field-summary--teaser-list.html.twig b/templates/fields/field--node--field-summary--teaser-list.html.twig
new file mode 100644
index 0000000..b3a7a02
--- /dev/null
+++ b/templates/fields/field--node--field-summary--teaser-list.html.twig
@@ -0,0 +1,20 @@
+{% if label_display == 'visually_hidden' %}
+  <div{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</div>
+{% endif %}
+{% if multiple %}
+  <div{{ attributes }}>
+    {% for item in items %}
+      {% include '@components/teaser/_teaser-body.twig' with {
+        drupal_attributes: item.attributes|without('class'),
+        teaser_body: item.content,
+      } %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% for item in items %}
+    {% include '@components/teaser/_teaser-body.twig' with {
+      drupal_attributes: attributes|without('class'),
+      teaser_body: item.content,
+    } %}
+  {% endfor %}
+{% endif %}
diff --git a/templates/fields/field--paragraph--field-description.html.twig b/templates/fields/field--paragraph--field-description.html.twig
new file mode 100644
index 0000000..cf82fe0
--- /dev/null
+++ b/templates/fields/field--paragraph--field-description.html.twig
@@ -0,0 +1,32 @@
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <p{{ item.attributes }}>{{ item.content }}</p>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <p{{ attributes }}>{{ item.content }}</p>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <h3{{ title_attributes.addClass(title_classes) }}>{{ label }}</h3>
+    {% if multiple %}
+      <div>
+    {% endif %}
+    {% for item in items %}
+      <p{{ item.attributes }}>{{ item.content }}</p>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/templates/fields/field--text-long.html.twig b/templates/fields/field--text-long.html.twig
new file mode 100644
index 0000000..4f1cbe8
--- /dev/null
+++ b/templates/fields/field--text-long.html.twig
@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+
+ @TODO: THIS CAN BE REMOVED IF BEM CLASSES CAN BE APPLIED IN WYSIWYG
+#}
+
+{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %}
diff --git a/templates/fields/field--text-with-summary.html.twig b/templates/fields/field--text-with-summary.html.twig
new file mode 100644
index 0000000..41efa5f
--- /dev/null
+++ b/templates/fields/field--text-with-summary.html.twig
@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+
+ @TODO: THIS CAN BE REMOVED IF WYWSIWYG BEM CLASSES CAN BE APPLIED
+#}
+
+{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %}
diff --git a/templates/fields/field.html.twig b/templates/fields/field.html.twig
new file mode 100644
index 0000000..a10384d
--- /dev/null
+++ b/templates/fields/field.html.twig
@@ -0,0 +1,70 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div>
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/templates/form/checkboxes.html.twig b/templates/form/checkboxes.html.twig
new file mode 100644
index 0000000..68b72b6
--- /dev/null
+++ b/templates/form/checkboxes.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override for a 'checkboxes' #type form element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The rendered checkboxes.
+ *
+ * @see template_preprocess_checkboxes()
+ */
+ @todo: remove this file once https://www.drupal.org/node/1819284 is resolved.
+ This is identical to core/modules/system/templates/container.html.twig
+#}
+{% include "@elements/forms/_checkboxes.twig" %}
diff --git a/templates/form/field-multiple-value-form.html.twig b/templates/form/field-multiple-value-form.html.twig
new file mode 100644
index 0000000..ffabdb5
--- /dev/null
+++ b/templates/form/field-multiple-value-form.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override for an individual form element.
+ *
+ * Available variables for all fields:
+ * - multiple: Whether there are multiple instances of the field.
+ *
+ * Available variables for single cardinality fields:
+ * - elements: Form elements to be rendered.
+ *
+ * Available variables when there are multiple fields.
+ * - table: Table of field items.
+ * - description: The description element containing the following properties:
+ *   - content: The description content of the form element.
+ *   - attributes: HTML attributes to apply to the description container.
+ * - button: "Add another item" button.
+ *
+ * @see template_preprocess_field_multiple_value_form()
+ */
+#}
+{% include "@elements/forms/_multi-value.twig" %}
diff --git a/templates/form/fieldset.html.twig b/templates/form/fieldset.html.twig
new file mode 100644
index 0000000..976fd61
--- /dev/null
+++ b/templates/form/fieldset.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Theme override for a fieldset element and its children.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the fieldset element.
+ * - errors: (optional) Any errors for this fieldset element, may not be set.
+ * - required: Boolean indicating whether the fieldeset element is required.
+ * - legend: The legend element containing the following properties:
+ *   - title: Title of the fieldset, intended for use as the text of the legend.
+ *   - attributes: HTML attributes to apply to the legend.
+ * - description: The description element containing the following properties:
+ *   - content: The description content of the fieldset.
+ *   - attributes: HTML attributes to apply to the description container.
+ * - children: The rendered child elements of the fieldset.
+ * - prefix: The content to add before the fieldset children.
+ * - suffix: The content to add after the fieldset children.
+ *
+ * @see template_preprocess_fieldset()
+ */
+#}
+{% include "@elements/forms/_fieldset.twig" %}
diff --git a/templates/form/form-element-label.html.twig b/templates/form/form-element-label.html.twig
new file mode 100644
index 0000000..473dccc
--- /dev/null
+++ b/templates/form/form-element-label.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override for a form element label.
+ *
+ * Available variables:
+ * - title: The label's text.
+ * - title_display: Elements title_display setting.
+ * - required: An indicator for whether the associated form element is required.
+ * - attributes: A list of HTML attributes for the label.
+ *
+ * @see template_preprocess_form_element_label()
+ */
+#}
+{% include "@elements/forms/_form-label.twig" %}
diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig
new file mode 100644
index 0000000..4cff540
--- /dev/null
+++ b/templates/form/form-element.html.twig
@@ -0,0 +1,59 @@
+{#
+/**
+ * @file
+ * Theme override for a form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - errors: (optional) Any errors for this form element, may not be set.
+ * - prefix: (optional) The form element prefix, may not be set.
+ * - suffix: (optional) The form element suffix, may not be set.
+ * - required: The required marker, or empty if the associated form element is
+ *   not required.
+ * - type: The type of the element.
+ * - name: The name of the element.
+ * - label: A rendered label element.
+ * - label_display: Label display setting. It can have these values:
+ *   - before: The label is output before the element. This is the default.
+ *     The label includes the #title and the required marker, if #required.
+ *   - after: The label is output after the element. For example, this is used
+ *     for radio and checkbox #type elements. If the #title is empty but the
+ *     field is #required, the label will contain only the required marker.
+ *   - invisible: Labels are critical for screen readers to enable them to
+ *     properly navigate through forms but can be visually distracting. This
+ *     property hides the label for everyone except screen readers.
+ *   - attribute: Set the title attribute on the element to create a tooltip but
+ *     output no label element. This is supported only for checkboxes and radios
+ *     in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
+ *     It is used where a visual label is not needed, such as a table of
+ *     checkboxes where the row and column provide the context. The tooltip will
+ *     include the title and required marker.
+ * - description: (optional) A list of description properties containing:
+ *    - content: A description of the form element, may not be set.
+ *    - attributes: (optional) A list of HTML attributes to apply to the
+ *      description content wrapper. Will only be set when description is set.
+ * - description_display: Description display setting. It can have these values:
+ *   - before: The description is output before the element.
+ *   - after: The description is output after the element. This is the default
+ *     value.
+ *   - invisible: The description is output after the element, hidden visually
+ *     but available to screen readers.
+ * - disabled: True if the element is disabled.
+ * - title_display: Title display setting.
+ *
+ * @see template_preprocess_form_element()
+ */
+#}
+{%
+  set classes = [
+    'js-form-item',
+    'form-item',
+    'js-form-type-' ~ type|clean_class,
+    'form-item-' ~ name|clean_class,
+    'js-form-item-' ~ name|clean_class,
+    title_display not in ['after', 'before'] ? 'form-no-label',
+    disabled == 'disabled' ? 'form-disabled',
+    errors ? 'form-item--error',
+  ]
+%}
+{% include "@elements/forms/_form-element.twig" %}
diff --git a/templates/form/input.html.twig b/templates/form/input.html.twig
new file mode 100644
index 0000000..d06db43
--- /dev/null
+++ b/templates/form/input.html.twig
@@ -0,0 +1,13 @@
+{#
+/**
+ * @file
+ * Theme override for an 'input' #type form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ *
+ * @see template_preprocess_input()
+ */
+#}
+{% include "@elements/forms/_input.twig" %}
diff --git a/templates/form/radios.html.twig b/templates/form/radios.html.twig
new file mode 100644
index 0000000..ae7608b
--- /dev/null
+++ b/templates/form/radios.html.twig
@@ -0,0 +1,13 @@
+{#
+/**
+ * @file
+ * Theme override for a 'radios' #type form element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The rendered radios.
+ *
+ * @see template_preprocess_radios()
+ */
+#}
+{% include "@elements/forms/_radios.twig" %}
diff --git a/templates/form/select.html.twig b/templates/form/select.html.twig
new file mode 100644
index 0000000..fd28b7c
--- /dev/null
+++ b/templates/form/select.html.twig
@@ -0,0 +1,13 @@
+{#
+/**
+ * @file
+ * Theme override for a select element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the select tag.
+ * - options: The option element children.
+ *
+ * @see template_preprocess_select()
+ */
+#}
+{% include "@elements/forms/_select-element.twig" %}
diff --git a/templates/form/textarea.html.twig b/templates/form/textarea.html.twig
new file mode 100644
index 0000000..c4c8b87
--- /dev/null
+++ b/templates/form/textarea.html.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Theme override for a 'textarea' #type form element.
+ *
+ * Available variables
+ * - wrapper_attributes: A list of HTML attributes for the wrapper element.
+ * - attributes: A list of HTML attributes for the textarea element.
+ * - resizable: An indicator for whether the textarea is resizable.
+ * - required: An indicator for whether the textarea is required.
+ * - value: The textarea content.
+ *
+ * @see template_preprocess_textarea()
+ */
+#}
+{% include "@elements/forms/_textarea.twig" %}
diff --git a/templates/layout/page--user.html.twig b/templates/layout/page--user.html.twig
new file mode 100644
index 0000000..5a190d3
--- /dev/null
+++ b/templates/layout/page--user.html.twig
@@ -0,0 +1,28 @@
+{% extends '@layouts/site-container/site-container.twig' %}
+  {% block site_content %}
+
+    {{ page.header }}
+    {{ drupal_entity('block', 'submenu') }}
+    {{ page.navigation }}
+    {{ page.breadcrumb }}
+    {{ page.highlighted }}
+    {{ page.help }}
+
+    <main id="main" class="main" role="main" tabindex="-1">
+      <div class="l-constrain mt-xl mb-3xl">
+        {{ page.content }}
+      </div>
+    </main>
+
+    {{ page.footer }}
+
+  {% endblock %}
+  {% block additional_content %}
+    {% if not is_front %}
+      {% include '@components/social-sharing/social-sharing.twig' with {
+        share_url: url('<current>'),
+        share_title: share_title,
+        share_id: 'social-sharing',
+      } %}
+    {% endif %}
+  {% endblock %}
diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
new file mode 100644
index 0000000..a41507a
--- /dev/null
+++ b/templates/layout/page.html.twig
@@ -0,0 +1,33 @@
+{% extends '@layouts/site-container/site-container.twig' %}
+  {% block site_content %}
+
+    {{ page.header }}
+    {{ drupal_entity('block', 'submenu') }}
+    {{ page.navigation }}
+    {{ page.breadcrumb }}
+    {{ page.highlighted }}
+    {{ page.help }}
+
+    <main id="main" class="main" role="main" tabindex="-1">
+      {{ page.preface }}
+      {{ page.content }}
+      {% if not is_front %}
+        <a href="#social-sharing" class="visually-hidden focusable">
+          {{ 'Share this page'|t }}
+        </a>
+      {% endif %}
+      {{ page.postscript }}
+    </main>
+
+    {{ page.footer }}
+
+  {% endblock %}
+  {% block additional_content %}
+    {% if not is_front %}
+      {% include '@components/social-sharing/social-sharing.twig' with {
+        share_url: url('<current>'),
+        share_title: share_title,
+        share_id: 'social-sharing',
+      } %}
+    {% endif %}
+  {% endblock %}
diff --git a/templates/layout/region--footer.html.twig b/templates/layout/region--footer.html.twig
new file mode 100644
index 0000000..041745d
--- /dev/null
+++ b/templates/layout/region--footer.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region div.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{% include "@layouts/footer/footer.twig" with {
+  footer_social_menu: drupal_menu('social-media'),
+  footer_legal_menu: drupal_menu('footer')
+}%}
diff --git a/templates/layout/region--header.html.twig b/templates/layout/region--header.html.twig
new file mode 100644
index 0000000..3622200
--- /dev/null
+++ b/templates/layout/region--header.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region div.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{% include "@layouts/header/header.twig" with {
+  header_menu: drupal_menu('main'),
+  header_search: false
+}%}
diff --git a/templates/media/media--audio.html.twig b/templates/media/media--audio.html.twig
new file mode 100644
index 0000000..d8a432b
--- /dev/null
+++ b/templates/media/media--audio.html.twig
@@ -0,0 +1,8 @@
+{% set attributes = attributes.setAttribute('aria-label', name) %}
+
+{% include "@components/media/media--audio.twig" with {
+  audio: content.field_media_audio_file|field_value,
+  thumbnail: content.field_media_image|field_value,
+  modifier_classes: attributes.class|join(' ')|trim,
+  drupal_attributes: attributes|without('class'),
+}%}
diff --git a/templates/media/media--image--gallery.html.twig b/templates/media/media--image--gallery.html.twig
new file mode 100644
index 0000000..1be1d9b
--- /dev/null
+++ b/templates/media/media--image--gallery.html.twig
@@ -0,0 +1 @@
+{{ content.field_media_image|field_value }}
\ No newline at end of file
diff --git a/templates/media/media--image.html.twig b/templates/media/media--image.html.twig
new file mode 100644
index 0000000..8e4556e
--- /dev/null
+++ b/templates/media/media--image.html.twig
@@ -0,0 +1,7 @@
+{% set attributes = attributes.setAttribute('aria-label', name) %}
+
+{% include "@components/media/media--image.twig" with {
+  image: content.field_media_image|field_value,
+  modifier_classes: attributes.class|join(' ')|trim,
+  drupal_attributes: attributes|without('class'),
+}%}
diff --git a/templates/media/responsive-image.html.twig b/templates/media/responsive-image.html.twig
new file mode 100644
index 0000000..49395f8
--- /dev/null
+++ b/templates/media/responsive-image.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a responsive image.
+ *
+ * Available variables:
+ * - sources: The attributes of the <source> tags for this <picture> tag.
+ * - img_element: The controlling image, with the fallback image in srcset.
+ * - output_image_tag: Whether or not to output an <img> tag instead of a
+ *   <picture> tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_responsive_image()
+ *
+ * @ingroup themeable
+ */
+#}
+{% include "@elements/images/image/responsive-image.twig" %}
diff --git a/templates/navigation/breadcrumb.html.twig b/templates/navigation/breadcrumb.html.twig
new file mode 100644
index 0000000..024aefa
--- /dev/null
+++ b/templates/navigation/breadcrumb.html.twig
@@ -0,0 +1,11 @@
+{#
+/**
+ * @file
+ * Theme override for a breadcrumb trail.
+ *
+ * Available variables:
+ * - breadcrumb: Breadcrumb trail items.
+ */
+#}
+
+{% include "@components/breadcrumbs/breadcrumbs.twig" %}
diff --git a/templates/navigation/menu--footer.html.twig b/templates/navigation/menu--footer.html.twig
new file mode 100644
index 0000000..17a1e14
--- /dev/null
+++ b/templates/navigation/menu--footer.html.twig
@@ -0,0 +1,4 @@
+{% include "@components/menus/menu.twig" with {
+  menu_name: 'legal',
+  items: items,
+}%}
\ No newline at end of file
diff --git a/templates/navigation/menu--main.html.twig b/templates/navigation/menu--main.html.twig
new file mode 100644
index 0000000..c0bc52a
--- /dev/null
+++ b/templates/navigation/menu--main.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Theme override to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+
+{{ attach_library('cdesai_emulsify/main_menu') }}
+
+{% include "@components/menus/main-menu/main-menu.twig" with {
+  menu_items: items,
+}%}
\ No newline at end of file
diff --git a/templates/navigation/menu-local-action.html.twig b/templates/navigation/menu-local-action.html.twig
new file mode 100644
index 0000000..83c167c
--- /dev/null
+++ b/templates/navigation/menu-local-action.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override for a single local action link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - link: A rendered link element.
+ *
+ * @see template_preprocess_menu_local_action()
+ */
+#}
+{% include "@elements/lists/_list-item.twig" with {
+  list_item_content: link
+} %}
diff --git a/templates/navigation/menu.html.twig b/templates/navigation/menu.html.twig
new file mode 100644
index 0000000..0b885d8
--- /dev/null
+++ b/templates/navigation/menu.html.twig
@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+{% include "@components/menus/menu.twig" %}
diff --git a/templates/navigation/pager.html.twig b/templates/navigation/pager.html.twig
new file mode 100644
index 0000000..e09ae22
--- /dev/null
+++ b/templates/navigation/pager.html.twig
@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Theme override to display a pager.
+ *
+ * Available variables:
+ * - items: List of pager items.
+ *   The list is keyed by the following elements:
+ *   - first: Item for the first page; not present on the first page of results.
+ *   - previous: Item for the previous page; not present on the first page
+ *     of results.
+ *   - next: Item for the next page; not present on the last page of results.
+ *   - last: Item for the last page; not present on the last page of results.
+ *   - pages: List of pages, keyed by page number.
+ *   Sub-sub elements:
+ *   items.first, items.previous, items.next, items.last, and each item inside
+ *   items.pages contain the following elements:
+ *   - href: URL with appropriate query parameters for the item.
+ *   - attributes: A keyed list of HTML attributes for the item.
+ *   - text: The visible text used for the item link, such as "‹ Previous"
+ *     or "Next ›".
+ * - current: The page number of the current page.
+ * - ellipses: If there are more pages than the quantity allows, then an
+ *   ellipsis before or after the listed pages may be present.
+ *   - previous: Present if the currently visible list of pages does not start
+ *     at the first page.
+ *   - next: Present if the visible list of pages ends before the last page.
+ *
+ * @see template_preprocess_pager()
+ */
+#}
+{% include "@components/pager/pager.twig" %}
diff --git a/templates/paragraphs/paragraph--accordion.html.twig b/templates/paragraphs/paragraph--accordion.html.twig
new file mode 100644
index 0000000..6db5ed2
--- /dev/null
+++ b/templates/paragraphs/paragraph--accordion.html.twig
@@ -0,0 +1,12 @@
+{{ attach_library('cdesai_emulsify/accordion') }}
+
+{% set hidden = content.field_hide.0['#markup'] == 'Yes' ? true : false %}
+
+{% if not hidden %}
+  {% include "@components/accordion/accordion-group.twig" with {
+    modifier_classes: content.field_tabs|field_value|length > 5 ? 'accordion-group--small' : false,
+    accordion_group_items: content.field_tabs|field_value,
+    accordion_group_title: content.field_title|field_value,
+    accordion_group_intro: content.field_description|field_value,
+  }%}
+{% endif %}
diff --git a/templates/paragraphs/paragraph--aside.html.twig b/templates/paragraphs/paragraph--aside.html.twig
new file mode 100644
index 0000000..46658b9
--- /dev/null
+++ b/templates/paragraphs/paragraph--aside.html.twig
@@ -0,0 +1,11 @@
+{{ attach_library('cdesai_emulsify/aside') }}
+
+{% set alignment_class %}
+  aside--{{ content.field_alignment.0['#markup']|lower }}
+{% endset %}
+
+{% include "@components/aside/aside.twig" with {
+  modifier_classes: alignment_class,
+  aside_title: content.field_title|field_value,
+  aside_content: content.field_body|field_value
+}%}
\ No newline at end of file
diff --git a/templates/paragraphs/paragraph--horizontal-tabs.html.twig b/templates/paragraphs/paragraph--horizontal-tabs.html.twig
new file mode 100644
index 0000000..84c38f3
--- /dev/null
+++ b/templates/paragraphs/paragraph--horizontal-tabs.html.twig
@@ -0,0 +1,26 @@
+{% set classes = [
+  'l-paragraph',
+] %}
+
+<div{{ attributes.addClass(classes) }}>
+  <div class="l-constrain">
+    {% embed '@components/horizontal-tabs/horizontal-tabs.twig' with {
+      modifier_classes: content.tab_titles|length <= 3 ? 'horizontal-tabs--large' : false,
+      alignment_class: content.tab_titles|length <= 2 ? 'justify-evenly' : false,
+      horizontal_tabs_label: content.field_label|field_value,
+      horizontal_tabs_title: content.field_title|field_value,
+      horizontal_tabs_subtitle: content.field_description|field_value
+    }%}
+
+      {% block tablist %}
+        {{ content.tab_titles }}
+      {% endblock %}
+
+      {% block tab_panels %}
+        {{ content.field_tabs|field_value }}
+      {% endblock %}
+
+    {% endembed %}
+  </div>
+</div>
+ 
\ No newline at end of file
diff --git a/templates/paragraphs/paragraph--media--media-gallery.html.twig b/templates/paragraphs/paragraph--media--media-gallery.html.twig
new file mode 100644
index 0000000..ab8a276
--- /dev/null
+++ b/templates/paragraphs/paragraph--media--media-gallery.html.twig
@@ -0,0 +1,7 @@
+{{ attach_library('cdesai_emulsify/gallery') }}
+
+{% include "@components/gallery/gallery.twig" with {
+  gallery_title: content.field_title|field_value,
+  gallery_subtitle: content.field_description|field_value,
+  gallery_items: content.field_slides|field_value
+}%}
\ No newline at end of file
diff --git a/templates/paragraphs/paragraph.html.twig b/templates/paragraphs/paragraph.html.twig
new file mode 100644
index 0000000..b18bfa8
--- /dev/null
+++ b/templates/paragraphs/paragraph.html.twig
@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   - id: The paragraph ID.
+ *   - bundle: The type of the paragraph, for example, "image" or "text".
+ *   - authorid: The user ID of the paragraph author.
+ *   - createdtime: Formatted creation date. Preprocess functions can
+ *     reformat it by calling format_date() with the desired parameters on
+ *     $variables['paragraph']->getCreatedTime().
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{%
+  set classes = [
+    paragraph.bundle|clean_class
+  ]
+%}
+
+<div{{ attributes.addClass(classes) }}>
+  {{ content }}
+</div>