import { Meta, Unstyled } from '@storybook/addon-docs';
import '../../src/css/index.scss';
import Cards from '../../src/templates/components/cards';

<Meta title="Getting Started/Introduction" />

<style>
  {`
  .text-panel {
    background: white;
    margin: 24px auto;
    padding: 24px 12px 24px 12px;
  }

  .text-panel button {
    background: none;
    text-decoration: underline;
    font-size: 18px;
  }

  button:hover {
    text-decoration: none;
  }

  .layout {
    margin-top: 48px;
  }

  `}
</style>

# Storm ID: Umbraco component library

A set of design tools, source code, and project documentation that provides components to accelerate the design and build of Umbraco user interfaces.

<section class="layout">
  <div class="text-panel">
    <Cards type="2-col" cardList={[{title: "Front-end development", summary:"Documentation on how to set up a front-end prototype using the Umbraco component library", href: "/?path=/docs/getting-started-front-end--docs"}]} />
  </div>
</section>