index.html.erb

<article class="sc-font-normal sc-text-base" aria-labelledby="showcase_article_title">
  <p id="showcase_article_title" class="sc-m-0 sc-font-normal sc-text-xl">👋  Welcome to <span class="sc-italic">Showcase</span> — your UI Pattern Library!</p>

  <section>
    <h2 class="sc-font-semibold sc-text-2xl">What is this thing?</h2>
    <p>This resource is intended to be a hub for all-things UI for your developers, with the goal of <span class="italic font-semibold">sharing knowledge</span>, <span class="italic font-semibold">promoting reuse of existing code</span>, and <span class="italic font-semibold">ensuring consistency</span> across your application.</p>
  </section>

  <section>
    <h2 class="sc-font-semibold sc-text-2xl">How do I use it?</h2>
    <p>On each preview, you can add a series of usage examples for each component, style, or pattern. In the samples blocks, you'll see a live preview, as well as the source used to produce the example.</p>
    <p>At the bottom of most previews, you will see a table, listing any options for configuring the partial or component.</p>
  </section>

  <section>
    <h2 class="sc-font-semibold sc-text-2xl">But I don't see the thing I need 🤔</h2>
    <p>If you don't see the pattern or component here, that doesn't mean it doesn't aleady exist or can't be created with some combination of existing building blocks.</p>
  </section>

  <section>
    <h2 class="sc-font-semibold sc-text-2xl">I have questions, who do I reach out to?</h2>
    <p>If you need help or have questions, please reach out to <%#= Showcase.links.support %>.</p>
  </section>

  <section>
    <h2 class="sc-font-semibold sc-text-2xl">Additional resources</h2>
    <ul class="sc-list-none sc-p-0">
      <li>
        <%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank", class: "sc-link" %>
      </li>
      <li>
        <%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank", class: "sc-link" %>
      </li>
    </ul>
  </section>
</article>