@explorer-1/vue 0.0.0

package/src/docs/foundation/FontVariants.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="Fonts md:grid-cols-2 grid gap-2 mt-4">
+    <div>
+      <h3
+        id="primary"
+        class="inline-block align-top mr-4 font-primary"
+      >
+        Metropolis
+        <br />
+        <code class="text-base">.font-primary</code>
+      </h3>
+      <ol class="list-none inline-block">
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-primary font-light"> Metropolis light </span>
+            <code>.font-light</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-primary font-normal"> Metropolis normal </span>
+            <code>.font-normal</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-primary font-medium"> Metropolis medium </span>
+            <code>.font-medium</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-primary font-semibold"> Metropolis semi bold </span>
+            <code>.font-semibold</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-primary font-bold">Metropolis bold</span>
+            <code>.font-bold</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-primary font-extrabold"> Metropolis extra bold </span>
+            <code>.font-extrabold</code>
+          </span>
+        </li>
+      </ol>
+    </div>
+    <div>
+      <h3
+        id="secondary"
+        class="inline-block align-top mr-4 font-secondary"
+      >
+        Archivo Narrow
+        <br />
+        <code class="text-base">.font-secondary</code>
+      </h3>
+      <ol class="list-none inline-block">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-secondary font-semibold"> Archivo Narrow semi bold </span>
+            <code>.font-semibold</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-secondary font-bold"> Archivo Narrow bold </span>
+            <code>.font-bold</code>
+          </span>
+        </li>
+        <li></li>
+      </ol>
+    </div>
+  </div>
+</template>

package/src/docs/foundation/color.docs.mdx

@@ -0,0 +1,112 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+
+<Meta title="Foundation/Colors" />
+
+# Colors
+
+- [Brand Colors](#brand-colors)
+- [Functional Gray Tones](#functional-gray-tones)
+- [Semantic Colors](#semantic-colors)
+- [Tokens](#tokens)
+
+<span id="brand-colors"></span>
+
+## Brand Colors
+
+Each of these foundation colors has specific usage scenarios.
+
+| Color                                     | Name           | Token            |
+| :---------------------------------------- | :------------- | :--------------- |
+| <div class="bg-jpl-red-light p-4"></div>  | JPL Red Light  | `jpl-red-light`  |
+| <div class="bg-jpl-red p-4"></div>        | JPL Red        | `jpl-red`        |
+| <div class="bg-jpl-red-dark p-4"></div>   | JPL Red Dark   | `jpl-red-dark`   |
+| <div class="bg-jpl-red-darker p-4"></div> | JPL Red Darker | `jpl-red-darker` |
+| <div class="bg-jpl-aqua p-4"></div>       | JPL Aqua       | `aqua`           |
+| <div class="bg-blue p-4"></div>           | Blue           | `blue`           |
+| <div class="bg-dark-blue p-4"></div>      | Dark Blue      | `dark-blue`      |
+| <div class="bg-green p-4"></div>          | Green          | `green`          |
+
+### Reserved for Internal Use
+
+These colors should not be used on public-facing JPL websites.
+
+| Color                                          | Name                | Token                 |
+| :--------------------------------------------- | :------------------ | :-------------------- |
+| <div class="bg-jpl-sky-blue-light p-4"></div>  | JPL Sky Blue Light  | `jpl-sky-blue-light`  |
+| <div class="bg-jpl-sky-blue p-4"></div>        | JPL Sky Blue        | `jpl-sky-blue`        |
+| <div class="bg-jpl-sky-blue-dark p-4"></div>   | JPL Sky Blue Dark   | `jpl-sky-blue-dark`   |
+| <div class="bg-jpl-sky-blue-darker p-4"></div> | JPL Sky Blue Darker | `jpl-sky-blue-darker` |
+
+### Reserved for EDU Use
+
+These colors should not be used on public-facing JPL websites.
+
+| Color                                        | Name              | Token               |
+| :------------------------------------------- | :---------------- | :------------------ |
+| <div class="bg-jpl-purple-light p-4"></div>  | JPL Purple Light  | `jpl-purple-light`  |
+| <div class="bg-jpl-purple p-4"></div>        | JPL Purple        | `jpl-purple`        |
+| <div class="bg-jpl-purple-dark p-4"></div>   | JPL Purple Dark   | `jpl-purple-dark`   |
+| <div class="bg-jpl-purple-darker p-4"></div> | JPL Purple Darker | `jpl-purple-darker` |
+| <div class="bg-jpl-teal-light p-4"></div>    | JPL Teal Light    | `jpl-teal-light`    |
+| <div class="bg-jpl-teal p-4"></div>          | JPL Teal          | `jpl-teal`          |
+| <div class="bg-jpl-teal-dark p-4"></div>     | JPL Teal Dark     | `jpl-teal-dark`     |
+| <div class="bg-jpl-teal-darker p-4"></div>   | JPL Teal Darker   | `jpl-teal-darker`   |
+
+<span id="functional-gray-tones"></span>
+
+## Functional Gray Tones
+
+Grayscale colors are used throughout the site for text and layout.
+
+| Color                                     | Name           | Token            | Value     |
+| :---------------------------------------- | :------------- | :--------------- | :-------- |
+| <div class="bg-white p-4"></div>          | White          | `white`          | `#FFFFFF` |
+| <div class="bg-off-white p-4"></div>      | Off White      | `off-white`      | `#FAFAFA` |
+| <div class="bg-gray-light p-4"></div>     | Gray Light     | `gray-light`     | `#F5F5F5` |
+| <div class="bg-gray-light-mid p-4"></div> | Gray Light Mid | `gray-light-mid` | `#D8D8D8` |
+| <div class="bg-gray-mid p-4"></div>       | Gray Mid       | `gray-mid`       | `#949494` |
+| <div class="bg-gray-mid-dark p-4"></div>  | Gray Mid Dark  | `gray-mid-dark`  | `#6F6F6F` |
+| <div class="bg-gray-dark p-4"></div>      | Gray Dark      | `gray-dark`      | `#222222` |
+| <div class="bg-black p-4"></div>          | Black          | `black`          | `#000000` |
+
+Although several gradations are available via Tailwind CSS classes, make sure to only use the intended colors for text:
+
+- <div class="w-3 h-3 bg-gray-dark inline-block"></div>
+  <code>.text-gray-dark</code>
+- <div class="w-3 h-3 bg-gray-mid-dark inline-block"></div>
+  <code>.text-gray-mid-dark</code>
+- <div class="w-3 h-3 bg-gray-mid inline-block"></div>
+  <code>.text-gray-mid</code>
+
+<span id="semantic-colors"></span>
+
+## Semantic Colors
+
+Recommended for use in forms, alerts, or any element meant to communicate a state.
+
+**Note:** Color should never be the _only_ means used to convey state information;
+it must always be accompanied by text or iconography that makes it clear for colorblind users.
+
+| Color                                          | Name                | Token                 | Value     |
+| :--------------------------------------------- | :------------------ | :-------------------- | :-------- |
+| <div class="bg-alert-gold p-4"></div>          | Alert Gold          | `alert-gold`          | `#FFBA32` |
+| <div class="bg-alert-gold-light p-4"></div>    | Alert Gold Light    | `alert-gold-light`    | `#FFF9EB` |
+| <div class="bg-disabled-gray p-4"></div>       | Disabled Gray       | `disabled-gray`       | `#D8D8D8` |
+| <div class="bg-error-red p-4"></div>           | Error Red           | `error-red`           | `#C1152E` |
+| <div class="bg-error-red-light p-4"></div>     | Error Red Light     | `error-red-light`     | `#FFE8EB` |
+| <div class="bg-focus-blue p-4"></div>          | Focus Blue          | `focus-blue`          | `#1871C9` |
+| <div class="bg-focus-blue-light p-4"></div>    | Focus Blue Light    | `focus-blue-light`    | `#E8F1FA` |
+| <div class="bg-success-green p-4"></div>       | Success Green       | `success-green`       | `#33A17B` |
+| <div class="bg-success-green-light p-4"></div> | Success Green Light | `success-green-light` | `#E1F5EE` |
+
+<span id="tokens"></span>
+
+## Tokens
+
+All colors are available via Tailwind CSS classes using tokens:
+
+```
+.bg-{token}
+.text-{token}
+.border-{token}
+```

package/src/docs/foundation/grid.docs.mdx

@@ -0,0 +1,189 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import * as Stories from './grid.stories'
+
+<Meta of={Stories} />
+
+# Grid and Layout
+
+We use a 12-column grid paired with our [Responsive Design](?path=/docs/guides-responsive-design--docs) strategy to create all of our page and component layouts.
+
+> The examples on this page assume you are viewing this page on a desktop. Examples may not appear correct on smaller screens.
+
+- [BaseGrid](#basegrid)
+  - [Example Usage](#example-usage)
+- [Mixed Bleed](#mixed-bleed)
+  - [Example Usage](#example-usage-1)
+- [Page layout recommendations](#page-layout-recommendations)
+- [Full Page Example](#full-page-example)
+
+<span id="basegrid"></span>
+
+## BaseGrid
+
+There is a globally available `.BaseGrid` class that is the basis of our main grid, which contains `12` columns with a gutter of `gap-6`.
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.BaseGrid}
+/>
+
+Although `.BaseGrid` is always used with or wrapped by a `.container`, `.BaseGrid` itself does not include any margins or container behavior. This is to allow for maximum flexibility when using this class in your components:
+
+```css
+.BaseGrid {
+  @apply grid grid-cols-12 gap-6;
+}
+```
+
+Adjustments like margins and container can be applied as needed, such as:
+
+```html
+<div class="BaseGrid container mx-auto">Centered 12 col grid bound by container</div>
+```
+
+If you just need a container and no grid, you can simply omit the `BaseGrid`:
+
+```html
+<div class="container mx-auto">Content with no grid</div>
+```
+
+<span id="example-usage"></span>
+
+### Example Usage
+
+Some common component layouts:
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.ComponentA}
+/>
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.ComponentB}
+/>
+
+---
+
+<span id="mixed-bleed"></span>
+
+## Mixed Bleed
+
+Some components only bleed to one side of the screen. There is a `.MixedBleedGrid` class available for use that sets named grid lines. Note that these grid lines assume `.container` has zero padding.
+
+| Named Line        | Description                          |
+| :---------------- | :----------------------------------- |
+| `bleed-start`     | Left edge of the viewport            |
+| `container-start` | Left edge of the standard container  |
+| `indent-col-2`    | Aligns with column 2 in `BaseGrid`   |
+| `indent-col-3`    | Aligns with column 3 in `BaseGrid`   |
+| `container-end`   | Right edge of the standard container |
+| `bleed-end`       | Right edge of the viewport           |
+
+These named lines are used to construct the following `col-start-` and `col-end-` classes:
+
+```css
+@responsive {
+  .col-start-bleed {
+    grid-column-start: bleed-start;
+  }
+  .col-end-container-start {
+    grid-column-end: container-start;
+  }
+  .col-start-container {
+    grid-column-start: container-start;
+  }
+  .col-start-indent-col-2 {
+    grid-column-start: indent-col-2;
+  }
+  .col-start-indent-col-3 {
+    grid-column-start: indent-col-3;
+  }
+  .col-end-container {
+    grid-column-end: container-end;
+  }
+  .col-start-container-end {
+    grid-column-start: container-end;
+  }
+  .col-end-bleed {
+    grid-column-end: bleed-end;
+  }
+}
+```
+
+Note the usage of `.px-0` in addition to `.container` in the example below:
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.MixedBleedGridLines}
+/>
+
+<span id="example-usage-1"></span>
+
+### Example Usage
+
+Responsive styles within MixedBleed will need to be determined on a case-by-base basis. Usage of this class is best followed by observing existing usage and examples.
+
+#### Simple mixed bleed
+
+Starts at `indent-col-2` (col-2 of the `BaseGrid`) and bleeds fully to the right.
+
+```html
+<div class="MixedBleedGrid">
+  <div class="col-start-indent-col-2 col-end-bleed">Indented to col-2 and bleeds right</div>
+</div>
+```
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.MixedBleed}
+/>
+
+#### Complex mixed bleed
+
+When elements of an indented MixedBleed area must align with the BaseGrid, we need to get a bit more creative. We will still use mixed bleed grid lines, but we will not use `BaseGrid` within since the container is already indented. We instead need to use a custom grid for this use-case. Luckily, with Tailwind CSS, this is fairly straightforward. The nested grid should contain the number of columns offset by the amount that is already indented, and no `gap` should be used.
+
+```html
+<div class="MixedBleedGrid">
+  <div class="col-start-indent-col-3 col-end-container bg-black">
+    <div class="grid grid-cols-10">
+      <div class="col-start-2 col-end-7">Text aligned with apparent col 4</div>
+      <div class="col-start-7 col-end-11">Text aligned with apparent col 9</div>
+    </div>
+  </div>
+  <div class="col-start-container-end col-end-bleed bg-black"></div>
+</div>
+```
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.MixedBleedComplex}
+/>
+
+<span id="page-layout-recommendations"></span>
+
+## Page layout recommendations
+
+Explorer 1 components vary in width. This can make page layouts challenging if the entire content area is bound by a single `.container` div, a strategy that is commonly used on other websites. For Explorer 1, we recommend avoiding this strategy and instead giving each section or component on the page its own set of layout markup.
+
+[Blocks](?path=/docs/components-blocks-overview--docs) provided by Explorer 1 are compatible with this strategy. However, if a block notes that "layout assumptions have been made," this means that the entire layout for that block is already included in the markup, and you shouldn't include any additional layout. Doing so could break the display of that block.
+
+View the code below for an example of how to give each section its own set of layout markup. You can also see this strategy employed in the [Full Page Example](#full-page-example).
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.PageLayout}
+/>
+
+<br />
+
+<span id="full-page-example"></span>
+
+## Full Page Example
+
+An example of the foundations of a full page layout.
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.FullPageExample}
+/>

package/src/docs/foundation/grid.stories.js

@@ -0,0 +1,263 @@
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+export default {
+  title: 'Foundation/Grid and Layout',
+  component: LayoutHelper,
+  tags: ['!autodocs']
+}
+
+export const BaseGrid = {
+  args: {},
+  render: () => ({
+    template: `<div class="max-w-screen-3xl mx-auto">
+  <div class="BaseGrid container mx-auto mb-10 bg-gray-light-mid">
+    <div class="text-center text-white bg-gray-mid-dark p-4">1</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">2</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">3</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">4</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">5</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">6</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">7</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">8</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">9</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">10</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">11</div>
+    <div class="text-center text-white bg-gray-mid-dark p-4">12</div>
+  </div>
+  <div class="container mx-auto">
+    <div class="text-white bg-gray-mid-dark p-4">
+      Container, but no grid
+    </div>
+  </div>
+</div>`
+  })
+}
+
+export const ComponentA = {
+  args: {},
+  render: () => ({
+    template: `<div class="BaseGrid container mx-auto border border-jpl-red-light">
+  <div class="col-start-4 col-end-10 bg-black text-white px-4 py-10">
+    Starts at col 4 and ends at the col 10 line.
+  </div>
+</div>`
+  })
+}
+
+export const ComponentB = {
+  args: {},
+  render: () => ({
+    template: `<div class="BaseGrid container mx-auto border border-jpl-red-light">
+  <div class="col-start-2 col-end-8 bg-black text-white px-4 py-10">
+    Primary content
+  </div>
+  <div class="col-start-8 col-end-12 bg-black text-white px-4 py-10">
+    Secondary content
+  </div>
+</div>`
+  })
+}
+
+export const MixedBleedGridLines = {
+  args: {},
+  render: () => ({
+    template: `<div class="max-w-screen-3xl mx-auto bg-white">
+  <div class="BaseGrid container px-0 mx-auto bg-gray-light-mid mb-5">
+    <div class="text-center text-white bg-gray-mid-dark py-4">1</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">2</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">3</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">4</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">5</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">6</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">7</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">8</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">9</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">10</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">11</div>
+    <div class="text-center text-white bg-gray-mid-dark py-4">12</div>
+  </div>
+  <div class="MixedBleedGrid">
+    <div class="col-start-bleed col-end-bleed py-5 mb-5 text-sm border-l border-jpl-red">
+      <code>[bleed-start]<br>
+      .col-start-bleed</code>
+    </div>
+    <div class="col-start-container col-end-bleed py-5 mb-5 text-sm border-l border-jpl-red">
+      <code>[container-start]<br>
+      .col-start-container</code>
+    </div>
+    <div class="col-start-indent-col-2 col-end-bleed py-5 mb-5 text-sm border-l border-jpl-red">
+      <code>[indent-col-2]<br>
+      .col-start-indent-col-2</code>
+    </div>
+    <div class="col-start-indent-col-3 col-end-bleed py-5 mb-5 text-sm border-l border-jpl-red">
+      <code>[indent-col-3]<br>
+      .col-start-indent-col-3</code>
+    </div>
+    <div class="col-start-bleed col-end-container py-5 mb-5 text-sm border-r border-jpl-red text-right">
+      <code>[container-end]<br>
+      .col-end-container<br>
+      .col-start-container-end</code>
+    </div>
+    <div class="col-start-bleed col-end-bleed py-5 mb-5 text-sm border-r border-jpl-red text-right">
+      <code>[bleed-end]<br>
+      .col-end-bleed</code>
+    </div>
+  </div>
+</div>`
+  })
+}
+
+export const MixedBleed = {
+  args: {},
+  render: () => ({
+    template: `<div class="MixedBleedGrid">
+  <div class="col-start-indent-col-2 col-end-bleed text-white bg-black px-4 py-10">
+    Gallery Container (inner layout not dependent on grid)
+  </div>
+</div>`
+  })
+}
+
+export const MixedBleedComplex = {
+  args: {},
+  render: () => ({
+    template: `<div>
+  <div class="MixedBleedGrid mb-10">
+    <div class="col-start-indent-col-3 col-end-container text-white bg-black">
+      <div class="grid grid-cols-10 border border-jpl-red-light">
+        <div class="col-start-2 col-end-7 text-white px-4 py-10">
+          Text aligned with apparent col 4
+        </div>
+        <div class="col-start-7 col-end-11 px-4 py-10">
+          Text aligned with apparent col 9
+        </div>
+      </div>
+    </div>
+    <div class="col-start-container-end col-end-bleed bg-black"></div>
+  </div>
+</div>`
+  })
+}
+
+export const PageLayout = {
+  args: {},
+  render: () => ({
+    template: `<!-- first section -->
+<div class="bg-gray-light mb-5">
+  <div class="max-w-screen-3xl mx-auto bg-black text-white p-6">
+    Component with content bound <code>.max-w-screen-3xl</code> but with a background color that extends beyond <code>3xl</code>
+  </div>
+</div>
+<!-- second section -->
+<div class="container lg:BaseGrid mx-auto mb-5">
+  <div class="col-start-3 col-end-11 bg-gray-light p-6">
+    Component filling columns 3-10 on large screens and above.
+  </div>
+</div>
+<!-- third section -->
+<div class="container BaseGrid mx-auto mb-5">
+  <div class="col-start-2 col-end-12 lg:col-start-4 lg:col-end-10 bg-gray-light p-6">
+    Component filling columns 4-9 on large screens and above and columns 2-11 on smaller screens.
+  </div>
+</div>
+<!-- fourth section -->
+<div class="container mx-auto bg-gray-light p-6 mb-5">
+  Component with content bound by <code>.container</code>
+</div>
+<!-- fifth section -->
+<div class="max-w-screen-3xl mx-auto bg-gray-light p-6 mb-5">
+  Component with content bound by <code>.max-w-screen-3xl</code>
+</div>
+<!-- sixth section -->
+<div class="container lg:BaseGrid mx-auto">
+  <div class="col-start-3 col-end-11 bg-gray-light p-6">
+    Another component filling columns 3-10 on large screens and above.
+  </div>
+</div>`
+  })
+}
+
+export const FullPageExample = {
+  args: {},
+  render: () => ({
+    template: `<div class="bg-black text-white py-5 mb-10">
+  <div class="max-w-screen-2xl mx-auto border border-white p-3">
+    Top Hat
+  </div>
+  </div>
+  <div class="bg-black mb-20 py-10">
+  <div class="container mx-auto text-white">
+      Page title with full bleed background<br>
+      Lorem ipsum dolor sit amet<br>
+      Consectatur
+  </div>
+  </div>
+  <div class="MixedBleedGrid mb-20">
+  <div class="col-start-indent-col-2 col-end-container bg-gray-light-mid py-10 border border-jpl-red-light">
+    <div class="grid grid-cols-11 gap-5">
+      <div class="col-start-2 col-end-7">
+        Countdown Timer
+      </div>
+      <div class="col-start-7 col-end-12">
+        Distance to Target
+      </div>
+    </div>
+  </div>
+  <div class="col-start-container-end col-end-bleed bg-gray-light-mid"></div>
+  </div>
+  <div class="BaseGrid container mx-auto mb-20 py-10">
+  <div class="col-start-2 col-end-8">
+    About the mission
+  </div>
+  <div class="col-start-8 col-end-12">
+    Instrument list
+  </div>
+  </div>
+  <div class="bg-black mb-20">
+  <div class="BaseGrid container mx-auto">
+    <div class="col-start-6 col-end-11 text-white border-b border-white py-5 my-10">
+      Full bleed background with BaseGrid inner container
+    </div>
+  </div>
+  </div>
+  <div class="BaseGrid container mx-auto mb-20">
+  <div class="col-start-2 col-end-7 py-10">
+    Mission Data
+  </div>
+  <div class="col-start-7 col-end-12 bg-black py-10 text-white text-center">
+    Square Image
+  </div>
+  </div>
+  <div class="BaseGrid container mx-auto mb-20">
+  <div class="col-start-3 col-end-11 py-10 text-center border-t border-b">
+    Blockquote
+  </div>
+  </div>
+  <div class="MixedBleedGrid mb-20">
+  <div class="col-start-indent-col-2 col-end-bleed px-5 py-10 border border-jpl-red-light">
+    Gallery Container
+  </div>
+  </div>
+  <div class="BaseGrid container mx-auto mb-2">
+  <div class="col-start-2 col-end-9 p-5 bg-gray-light-mid ">
+    Link 1
+  </div>
+  </div>
+  <div class="BaseGrid container mx-auto mb-20">
+  <div class="col-start-2 col-end-9 p-5 bg-gray-light-mid ">
+    Link 2
+  </div>
+  </div>
+  <div class="bg-gray-light-mid">
+  <div class="MixedBleedGrid mb-20">
+    <div class="col-start-indent-col-2 col-end-bleed px-5 py-10 border border-jpl-red-light">
+      Gallery Container
+    </div>
+  </div>
+  </div>
+  <div class="bg-black py-20">
+  <div class="container mx-auto text-white">
+      Footer
+  </div>
+</div>`
+  })
+}