import { Meta } from '@storybook/blocks'; import Code from './assets/code-brackets.svg'; import Colors from './assets/colors.svg'; import Comments from './assets/comments.svg'; import Direction from './assets/direction.svg'; import Flow from './assets/flow.svg'; import Plugin from './assets/plugin.svg'; import Repo from './assets/repo.svg'; import StackAlt from './assets/stackalt.svg';
<style> {` .subheading { --mediumdark: '#999999'; font-weight: 700; font-size: 13px; color: #999; letter-spacing: 6px; line-height: 24px; text-transform: uppercase; margin-bottom: 12px; margin-top: 40px; } .link-list { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; row-gap: 10px; } @media (min-width: 620px) { .link-list { row-gap: 20px; column-gap: 20px; grid-template-columns: 1fr 1fr; } } @media all and (-ms-high-contrast:none) { .link-list { display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: 1fr 1fr; } } .link-item { display: block; padding: 20px; border: 1px solid #00000010; border-radius: 5px; transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; color: #333333; display: flex; align-items: flex-start; } .link-item:hover { border-color: #1EA7FD50; transform: translate3d(0, -3px, 0); box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; } .link-item:active { border-color: #1EA7FD; transform: translate3d(0, 0, 0); } .link-item strong { font-weight: 700; display: block; margin-bottom: 2px; } .link-item img { height: 40px; width: 40px; margin-right: 15px; flex: none; } .link-item span, .link-item p { margin: 0; font-size: 14px; line-height: 20px; } .tip { display: inline-block; border-radius: 1em; font-size: 11px; line-height: 12px; font-weight: 700; background: #E7FDD8; color: #66BF3C; padding: 4px 12px; margin-right: 10px; vertical-align: top; } .tip-wrapper { font-size: 13px; line-height: 20px; margin-top: 40px; margin-bottom: 40px; } .tip-wrapper code { font-size: 12px; display: inline-block; } `} </style>Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source. A project developed by @productdevbook. Oku is a community that provides vue and nuxt power not only from 1 product but also from many products.
Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source. Github Repo
stories/Introduction.stories.mdx