@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tm/content/__fixtures__/index.ts

@@ -0,0 +1,884 @@
+import { html } from 'lit-html';
+
+export const ContentExamples = () => html`
+    <!-- INTRO -->
+    <h2>Learning Objectives</h2>
+    <p>
+        Learning objectives are a great way to summarize expectations to users.
+    </p>
+    <ul>
+        <li>Understand the vision for what content look like</li>
+        <li>Explain the different types of text elements used in a unit</li>
+        <li>Explain how to properly use each text element</li>
+        <li>
+            Use text elements to create content that is easy to read, consumable
+            and consistent!
+        </li>
+    </ul>
+
+    <h2>The future is now</h2>
+
+    <p>
+        This is "example" content to help visulize the <em>future </em>of units,
+        documentation, blogs and any other type of content in Trailhead. This
+        unit will present all text elements available and guidelines for use. If
+        I (Cameron) have forgotten one, please let me know! Also, please forgive
+        the many spelling errors.
+    </p>
+
+    <!-- HEADINGS -->
+    <h2>Headings (h1, h2, h3)</h2>
+
+    <p>
+        Heading are foundational. Proper usage of headings is essential to good
+        accessibility and readability. All h2 headings are autogenerated in the
+        table of contents in the sidebar.
+    </p>
+    <p>
+        Technically only 2 levels of headings are supported: h2 & h3. Anything
+        beyond h3 <strong>should not be used</strong> and the content should
+        instead be broken into higher level sections. (If you happen to use an
+        h4-h6, it will be styled the same as an h3).
+    </p>
+    <p>
+        H1 is used only for the title (Use the Page Header component). There
+        should only be <strong>one</strong> h1 per page.
+    </p>
+
+    <dl>
+        <dt><h2>Headings 2</h2></dt>
+        <dd>
+            H2's are the most common header used to devide content sections into
+            bite sized chunks.
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><h3>Headings 3</h3></dt>
+        <dd>
+            H3's are used to create additional sections and
+            <strong>should only be used if contained within an h2</strong>.
+        </dd>
+    </dl>
+
+    <p>
+        Remember! Do not include text styling like <em>em</em>,
+        <strong>strong</strong>, <samp>samp</samp>, <a>a</a>, <kbd>kbd</kbd>,
+        etc. within a header.
+    </p>
+
+    <!-- PARAGRAPHS -->
+    <h2>Paragraphs (p)</h2>
+
+    <p>
+        Paragraphs make up the bulk of content (obvs). They are the bread and
+        butter. In general, paragraphs should be chunked into readible sections.
+        P.S. Emojis are cool to add sometimes, but please dont over due it! 🙌
+    </p>
+
+    <!-- TEXT STYLING -->
+    <h2>Text Styling</h2>
+
+    <p>
+        Paragraphs often contain many text styling to provide emphasis or
+        provide clarity. Remember! You should use correct semantics.
+        <strong
+            >Do not use tags to achieve certain styling that does not fit proper
+            usage</strong
+        >.
+    </p>
+
+    <dl>
+        <dt><em>em, i</em></dt>
+        <dd>
+            Renders as italic text. This is used for a subtle emphasis of a word
+            or statement. For example: "It is <em>recommended</em> you save at
+            this point."
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><strong>strong, b</strong></dt>
+        <dd>
+            Renders as bold text. This is used for a bold emphasis of a word or
+            statement. For example: "It is
+            <strong>strongly recommended</strong> you save at this point."
+        </dd>
+    </dl>
+
+    <dl>
+        <code>code</code>
+        <dd>
+            Defines a piece of computer code you want to display inline. For
+            example: "The following code will start the robot:
+            <code>function Panel(element, canClose, closeHandler)</code>"
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><samp>samp</samp></dt>
+        <dd>
+            Defines text that should be interpreted as sample output from an
+            app. For example: "After clicking enter, you should recive the
+            message:
+            <samp>File Not Found! Please Contact Support.</samp>"
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><kbd>kbd</kbd></dt>
+        <dd>
+            Defines keyboard input or menu selection. For example: "Click
+            <kbd>File</kbd> in the menu." or "For Field Label, enter
+            <kbd>Technical Site</kbd>."
+        </dd>
+    </dl>
+
+    <dl>
+        <var>var</var>
+        <dd>
+            Should be used for variables in a mathematical expression or code.
+            For example: "The volume of a box is <var>l</var> × <var>w</var> ×
+            <var>h</var>, where <var>l</var> represents the length,
+            <var>w</var> the width and <var>h</var> the height of the box.
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><dfn>dfn</dfn></dt>
+        <dd>
+            Defines an inline term within a paragraph. For example: "A
+            <dfn>validator</dfn> is a program that checks for syntax errors in
+            code or documents."
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><del>del, s</del> & <ins>ins</ins></dt>
+        <dd>
+            This formatting is acceptable if we need to archive previously
+            displayed text. It should <strong>almost always</strong> be followed
+            by <code>&lt;ins&gt;</code>. For example: "This great features is
+            planning to be released <del>Winter '19</del>
+            <ins>Winter '20</ins>."
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><abbr title="Abbreviation">abbr</abbr></dt>
+        <dd>
+            Used to wrap around an abbreviation or acronym. If if you use
+            <code>&lt;abbr&gt;</code>, you <strong>must</strong> provide a full
+            expansion of the term with a <code>&lt;title&gt;</code> attribute.
+            For example: "We use
+            <abbr title="Hypertext Markup Language">HTML</abbr> to structure our
+            web documents."
+        </dd>
+    </dl>
+
+    <dl>
+        <dt><sup>sup</sup> & <sub>sub</sub></dt>
+        <dd>
+            Occasionally you may need to use superscript and subscript when
+            marking up items like dates, chemical formulae, and mathematical
+            equations so they have the correct meaning. The
+            <code>&lt;sup&gt;</code> and <code>&lt;sub&gt;</code> elements
+            handle this job. For example: "My birthday is on the 25<sup>th</sup>
+            of May 2001. Caffeine's chemical formula is
+            C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>."
+        </dd>
+    </dl>
+
+    <dl>
+        <dt>
+            <small>small</small>
+        </dt>
+        <dd>
+            Represents small print like copyright and legal text. This should
+            rarely be used. For example:
+            <p>
+                <small
+                    >Copyright: Rights of ALBERT EINSTEIN are used with
+                    permission of The Hebrew University of Jerusalem.
+                    Represented exclusively by Greenlight.</small
+                >
+            </p>
+        </dd>
+    </dl>
+
+    <dl>
+        <dt>
+            <mark>mark</mark>
+        </dt>
+        <dd>
+            Mark highlights text for reference or notation purposes. Highlighted
+            text is pretty aggressive so <em>please</em> just use
+            <strong>strong</strong>.
+        </dd>
+    </dl>
+
+    <dl>
+        <dt>
+            <u>underline</u>
+        </dt>
+        <dd>
+            Technically this should be used to represend mispelled words. We
+            don't misspell words so this should not be used. 😀
+        </dd>
+    </dl>
+
+    <!-- CODE BLOCKS -->
+    <h2>Code Blocks</h2>
+
+    <h3>Component (Coming Soon)</h3>
+    <p>
+        Our code block component brings code samples to life with code
+        highlighted in differened colors for readability and actions like copy &
+        paste built in.
+    </p>
+
+    <h3>HTML</h3>
+    <p>
+        Technically you could also use <code>pre code</code>. But we would
+        recommened using our code block component for richer output
+    </p>
+
+    <pre><code>
+      function Panel(element, canClose, closeHandler) {
+        this.element = element;
+        this.canClose = canClose;
+        this.closeHandler = function () { if (closeHandler) closeHandler() };
+      }
+    </code></pre>
+
+    <!-- QUOTES -->
+    <h2>Quotes (blockquote & q)</h2>
+
+    <p>
+        Quotes are a wonderful way to highlight an important sentance to two of
+        the content. We have two quote options to choose from: block quote and
+        pull quotes.
+    </p>
+
+    <p>
+        Additionally, it is recommened you include a "cite" for additionaly
+        context.
+    </p>
+
+    <h3>Component (Coming Soon)</h3>
+    <p>
+        Our quote component allows you to add a picture of the quote authoer.
+        Cite images are cropped to be a perfect circle.
+    </p>
+
+    <!-- Block Quote -->
+    <h3>HTML Blockquote</h3>
+    <p>
+        Block quotes are also set off from the main text as a distinct block.
+        However, they refer to some external citation which isn’t already
+        mentioned in the article. <strong>Do not use a cite.</strong>
+    </p>
+    <blockquote>
+        One of the biggest values of 1:1s is discovering where employees are
+        struggling or stuck, and helping them find a path forward. Not by
+        telling them how you'd do it, but by guiding them to come up with their
+        own solution
+    </blockquote>
+
+    <!-- Pull Quote -->
+    <h3>HTML Pull quotes</h3>
+    <p>
+        Pull quotes are short excerpts from the presented text. They are used to
+        pull a text passage out of the reader’s flow and give it a more dominant
+        position in the unit.
+    </p>
+    <q
+        >As a marathon runner, I think of 1:1s as a way to ensure we are aligned
+        on the best path to achieve the goal, as well as a point to pick up
+        water to hydrate to ensure we are prepared to go the distance."
+        <cite>Jon Plax, Senior Director, Salesforce</cite></q
+    >
+
+    <!-- EMBEDDED MEDIA -->
+    <h2>Embeded Media</h2>
+
+    <p>
+        Media makes units fun and more engaging. There are many types of media
+        objects you can include!
+    </p>
+
+    <h3>Inline Image Component (Coming Soon)</h3>
+    <p>
+        Inline images provide an extra visual to help guide users for what they
+        are looking for.
+    </p>
+
+    <h3>Image</h3>
+    <p>
+        Images are a great tool to help users visualize the written
+        instructions. Large images will span 100% width. Small images will be
+        left aligned. By default, a border will be added the image (Do not add
+        borders to your image! We will add the border with code.). You can use
+        many different types of images like .jpg, .png, .svg and .gif!
+    </p>
+
+    <img src="/images/photo-1508144753681-9986d4df99b3.webp" />
+
+    <h3>Image with Footnote</h3>
+    <p>
+        Use captions only when they're absolutely needed for clarity. If clear
+        introductions precede graphics or tables, captions aren't needed. Avoid
+        using captions for inline graphics or simple icons.
+    </p>
+
+    <p>
+        When using the <code>&lt;figcaption&gt;</code> element, be sure to wrap
+        the image with <code>&lt;figure&gt;</code>
+    </p>
+
+    <figure>
+        <img src="/images/lex.png" />
+        <figcaption>Screenshot of details on a Salesforce Lead</figcaption>
+    </figure>
+
+    <h3>YouTube & Vidyard Video Component (Coming Soon)</h3>
+    <p>
+        Video is a great way to embed interactive content. You can embed YouTube
+        or use the Vidyard player.
+    </p>
+
+    <!-- LIST -->
+    <h2>Lists</h2>
+
+    <p>
+        Lists are great ways to organize information in a clear and structured
+        way. We have two lists options to choose from: rdered lists and
+        unordered lists (well three, because you can mix and match).
+    </p>
+
+    <p>
+        Even though you can technically go up to 5 levels, it is
+        <strong>best to keep to 3 levels</strong>. Never go more then 5 levels
+        deep.
+    </p>
+
+    <p>
+        In general, avoid putting to much media, code boxes, messages, quotes
+        and other elaborate elements in a list. It's not a hard rule, but it
+        generally looks better.
+    </p>
+
+    <!-- Ordered List -->
+    <h3>Ordered list</h3>
+    <p>
+        Ordered list items are marked with numbers or letters. They are perfect
+        to use when showing steps or order.
+    </p>
+
+    <ol>
+        <li>Level one: Step one</li>
+        <li>
+            Level one: Step two
+            <ol>
+                <li>Level two: Step one</li>
+                <li>
+                    Level two: Step two
+                    <ol>
+                        <li>Level three: Step one</li>
+                        <li>
+                            Level three: Step two
+                            <ol>
+                                <li>Level four: Step one</li>
+                                <li>
+                                    Level four: Step two
+                                    <ol>
+                                        <li>Level five: Step one</li>
+                                        <li>Level five: Step two</li>
+                                    </ol>
+                                </li>
+                            </ol>
+                        </li>
+                    </ol>
+                </li>
+            </ol>
+        </li>
+    </ol>
+
+    <!-- Unordered list -->
+    <h3>Unordered list</h3>
+    <p>
+        Ordered list items are marked with numbers or letters. They are perfect
+        to use when showing steps or order.
+    </p>
+
+    <ul>
+        <li>Level one: Step one</li>
+        <li>
+            Level one: Step two
+            <ul>
+                <li>Level two: Step one</li>
+                <li>
+                    Level two: Step two
+                    <ul>
+                        <li>Level three: Step one</li>
+                        <li>
+                            Level three: Step two
+                            <ul>
+                                <li>Level four: Step one</li>
+                                <li>
+                                    Level four: Step two
+                                    <ul>
+                                        <li>Level five: Step one</li>
+                                        <li>Level five: Step two</li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <!-- Mixed -->
+    <h3>Mixed</h3>
+    <p>In certain situations, it may make sense to use both.</p>
+
+    <ol>
+        <li>Level one: Step one</li>
+        <li>
+            Level one: Step two
+            <ul>
+                <li>Level two: Step one</li>
+                <li>
+                    Level two: Step two
+                    <ol>
+                        <li>Level three: Step one</li>
+                        <li>
+                            Level three: Step two
+                            <ul>
+                                <li>Level four: Step one</li>
+                                <li>
+                                    Level four: Step two
+                                    <ol>
+                                        <li>Level five: Step one</li>
+                                        <li>Level five: Step two</li>
+                                    </ol>
+                                </li>
+                            </ul>
+                        </li>
+                    </ol>
+                </li>
+            </ul>
+        </li>
+    </ol>
+    <h3>Steps using List</h3>
+    <p>
+        A common pattern is to display steps with supporting visuals like images
+        and tables.
+    </p>
+
+    <ol>
+        <li>
+            Navigation menu—available when you tap Salesforce App Nav from the
+            mobile app.
+            <img class="img-list" src="/images/mobile_1.png" />
+        </li>
+
+        <li>
+            Repeat steps in folders:
+            <ul>
+                <li>Admin Lightning Experience Reports</li>
+                <li>Marketing Reports</li>
+                <li>Marketing Reports</li>
+            </ul>
+        </li>
+
+        <li>
+            Fill in the folder information: (List item with table)
+            <table>
+                <thead>
+                    <tr>
+                        <th>Field</th>
+                        <th>Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Email Template Folder Label</td>
+                        <td>Discount Request Responses</td>
+                    </tr>
+                    <tr>
+                        <td>Folder Unique Name</td>
+                        <td>(this field auto-populates)</td>
+                    </tr>
+                    <tr>
+                        <td>Public Folder access</td>
+                        <td>Read/Write</td>
+                    </tr>
+                </tbody>
+            </table>
+        </li>
+    </ol>
+
+    <!-- Definition List -->
+    <h3>Definition List</h3>
+    <p>
+        Definition lists are perfect for defining terms. Think like a
+        dictionary. Definition lists have been restyled from the past to ensure
+        they are used properly.
+    </p>
+    <p>
+        It can be easy to confuse when a definition list should be used vs. an
+        h3. In general, reserve dl for a specific and concise definition. Use h3
+        for a more verbose section about a certian topic.
+    </p>
+    <dl>
+        <dt>Term 1</dt>
+        <dd>Definition</dd>
+        <dt>Term 2</dt>
+        <dd>Definition</dd>
+        <dt>Term 3</dt>
+        <dd>Definition</dd>
+    </dl>
+
+    <!-- A Real World List -->
+    <h3>A Real World List</h3>
+    <p>
+        This section has a little sprinkle of some of the elements we have
+        discussed thus far.
+    </p>
+    <ol class="ol steps enumList">
+        <li>Scroll to the bottom of this page.</li>
+        <li>
+            Click the arrow next to Launch and select
+            <strong>Create a Trailhead Playground</strong>. Don’t skip this
+            step! You need to use a fresh and clean Trailhead Playground for
+            this module.
+        </li>
+        <li>
+            Once your TP is created (it takes a minute!), press
+            <strong>Launch</strong>
+        </li>
+        <li>
+            In your TP’s URL, replace everything following lightning.force.com
+            with:
+            <kbd>/packagingSetupUI/ipLanding.app?apvId=04tB00000009UeX</kbd>.
+            Your URL should look similar to
+            <samp
+                >https://playful-raccoon-21646-dev-ed.lightning.force.com/packagingSetupUI/ipLanding.app?apvId=04tB00000009UeX</samp
+            >.
+        </li>
+        <li>
+            Select <strong>Install for All Users</strong> and grant access to
+            all third-party applications.
+        </li>
+        <li>
+            Once the installation is complete, click <strong>Done</strong> and
+            then open the App Launcher in the upper-left corner.
+        </li>
+
+        <li>
+            You can also access and preview Visualforce pages by searching
+            <kbd>Visualforce Pages</kbd> from the Quick Find bar in Setup.
+        </li>
+    </ol>
+
+    <!-- MESSAGE BOXES -->
+    <h2>Message Box Component (Coming Soon)</h2>
+    <p>Messages are an excellent way to call out something of importance.</p>
+
+    <!-- TABLES -->
+    <h2>Tables</h2>
+    <p>
+        Tables are an arrangement of information in rows and columns containing
+        cells that make comparing and contrasting information easier.
+    </p>
+
+    <p>
+        Tables should alwasy include a table header (<code>&lt;th&gt;</code>).
+    </p>
+
+    <p>
+        In general, avoid putting media, code boxes, messages, quotes and other
+        elaborate elements in a table. It's not a hard rule, but it generally
+        looks better.
+    </p>
+
+    <h3>Top Header</h3>
+    <p>
+        The top header should be the default go to for tables. It is the most
+        recognizable and easy to consume.
+    </p>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Function</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>AVG()</td>
+                <td>Returns the average value of a numeric field.</td>
+            </tr>
+            <tr>
+                <td>COUNT() and COUNT(fieldName) and COUNT_DISTINCT()</td>
+                <td>Returns the number of rows matching the query criteria.</td>
+            </tr>
+            <tr>
+                <td>MIN()</td>
+                <td>Returns the minimum value of a field.</td>
+            </tr>
+            <tr>
+                <td>MAX()</td>
+                <td>Returns the maximum value of a field.</td>
+            </tr>
+            <tr>
+                <td>SUM()</td>
+                <td>Returns the total sum of a numeric field.</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h3>Left Header</h3>
+    <p>In certain situations, a left header makes more sense.</p>
+    <table>
+        <tbody>
+            <tr>
+                <th>First Name</th>
+                <td>John</td>
+                <td>Peter</td>
+                <td>John</td>
+            </tr>
+            <tr>
+                <th>Last Name</th>
+                <td>Carter</td>
+                <td>Parker</td>
+                <td>Rambo</td>
+            </tr>
+            <tr>
+                <th>Email</th>
+                <td>johncarter@mail.com</td>
+                <td>peterparker@mail.com</td>
+                <td>johnrambo@mail.com</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h3>Span header</h3>
+    <p>
+        In certain situations, spanning a header is a good way to organize
+        information.
+    </p>
+    <table class="featureTable sort_table">
+        <tbody>
+            <tr>
+                <th rowspan="3">
+                    <strong>Publish</strong>
+                    <br />
+                </th>
+                <td>
+                    Emojis
+                    <br />
+                </td>
+                <td>
+                    With this release, you can search and select specific emojis
+                    for hip and dynamic content for social networks that support
+                    emoji use.
+                    <br />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    @mention
+                    <br />
+                </td>
+                <td>
+                    We have made improvements to the @mention capability. As
+                    Internet Explorer 11 now supports this functionality, we now
+                    display more matching results.
+                    <br />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Facebook carousel posts
+                    <br />
+                </td>
+                <td>
+                    You can now embed up to five images or videos with the
+                    carousel format and customize the headlines and links for
+                    each image or video in the post. You can also save carousel
+                    posts as shared content.
+                    <br />
+                </td>
+            </tr>
+            <tr>
+                <th rowspan="3">
+                    <strong>Engage</strong>
+                    <br />
+                </th>
+                <td>
+                    In-reply to information
+                    <br />
+                </td>
+                <td>
+                    With this release, you can now see in-reply to information
+                    on each post, making it easier to keep track of
+                    conversations in Engage.
+                    <br />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Bitly link shortening
+                    <br />
+                </td>
+                <td>
+                    You can now shorten links in a reply using the Post
+                    Inspector Palette in Engage. If you have added your Bitly
+                    account to their workspace, you can use Bitly to shorten
+                    links and track link metrics through bitly.com.
+                    <br />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Macros
+                    <br />
+                </td>
+                <td>
+                    Through Engage column or Analyze Dashboard, you can use
+                    macros to simplify tagging processes and engaging with
+                    posts. See the Analyze section for more on macros.
+                    <br />
+                </td>
+            </tr>
+            <tr>
+                <th rowspan="3">
+                    <strong>Analyze</strong>
+                    <br />
+                </th>
+                <td>
+                    Macros
+                    <br />
+                </td>
+                <td>
+                    With this release, you can apply multiple workflow actions
+                    to any post with a single click. You can also send cases to
+                    Service Cloud and leads to Sales Cloud and view this
+                    information within the post feed.
+                    <br />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Advanced card configuration
+                    <br />
+                </td>
+                <td>
+                    By using these with Analyze dashboards, you can focus in on
+                    the exact metrics important to you. You can apply filters to
+                    individual cards and rename them to provide context for your
+                    stakeholders.
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h3>Footnote</h3>
+    <p>
+        In general, avoid using table captions. In certain circumstances,
+        captions are good to use when you have multiple tables and need to
+        reference them to your reader. To add a caption to a table, use the
+        <code>&lt;caption&gt;</code> tag.
+    </p>
+
+    <table>
+        <caption>
+            Table 1. Colors and objects
+        </caption>
+        <thead>
+            <tr>
+                <th>Color</th>
+                <th>Looks Like</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Blue</td>
+                <td>Sky</td>
+            </tr>
+            <tr>
+                <td>Red</td>
+                <td>Lava</td>
+            </tr>
+            <tr>
+                <td>Green</td>
+                <td>Grass</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h3>Checkmarks</h3>
+    <p>Many times checkmarks may be used to say yes.</p>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Feature</th>
+                <th>Lightning</th>
+                <th>Aloha</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Fast</td>
+                <td><span class="check">✅</span></td>
+                <td><span class="check">✅</span></td>
+            </tr>
+            <tr>
+                <td>Affordable</td>
+                <td><span class="check"></span></td>
+                <td><span class="check">✅</span></td>
+            </tr>
+            <tr>
+                <td>Fun</td>
+                <td><span class="check">✅</span></td>
+                <td><span class="check"></span></td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h2>Download Links</h2>
+    <p>
+        <a href="/images/photo-1508144753681-9986d4df99b3.webp" download
+            >Download file</a
+        >
+    </p>
+
+    <h2>Concluding Thoughts</h2>
+    <p>
+        These guidelines will ultimately help people consume content better.
+        Consistency throughout the product will allow our users to feel
+        comfortable and familiar with our content. Constraints and rules allow
+        us to maintain that consistency. That said, I want us to feel free to
+        evolve our patterns to fit the needs of our writers. That includes
+        changing or adding new elements.
+    </p>
+
+    <small
+        >Copyright: Rights of ALBERT EINSTEIN are used with permission of The
+        Hebrew University of Jerusalem. Represented exclusively by Greenlight.
+        👈 Use this for adding a copyright.</small
+    >
+
+    <h2>Resources Component (Coming Soon)</h2>
+    <p>
+        Resources cap the end of content. It should be a simple list of links
+        with no levels. Each resource will have an icon (we will have to
+        extreact a few from SLDS we would like to use.)
+    </p>
+`;