Anvil/stories/Typography.mdx

70 lines
1.8 KiB
Text
Raw Normal View History

{/\*
- Describe the typography in use.
- Copyright (C) 2024 André Jaenisch
- SPDX-FileCopyrightText: 2024 André Jaenisch
- SPDX-License-Identifier: AGPL-3.0-or-later
-
- This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
\*/}
import { Meta } from '@storybook/blocks';
<Meta title="Typography" />
export const SampleText = 'Lorem ipsum dolor sit amet, consectetur';
# Typography
Given that this project uses Tailwind via Skeleton.dev, the usual Storybook
Typeset cannot be used. Instead this is how it will actually be styled:
## Heading
<h1 class="h1">H1: {SampleText}</h1>
<h2 class="h2">H2: {SampleText}</h2>
<h3 class="h3">H3: {SampleText}</h3>
<h4 class="h4">H4: {SampleText}</h4>
<h5 class="h5">H5: {SampleText}</h5>
<h6 class="h6">H6: {SampleText}</h6>
## Paragraph
<p>{SampleText}</p>
## Anchor
<p style={{ minHeight: '1em', position: 'relative' }}>
<a class="anchor" href="/">
Anchor
</a>
</p>
## Blockquote
<blockquote class="blockquote">Blockquote</blockquote>
## Preformatted text
<pre class="pre">Preformatted text</pre>
## Code
<code class="code">Code</code>
## Keyboard
<kbd class="kbd">Keyboard</kbd>
## Insertion
<ins class="ins">Insertion</ins>
## Deletion
<del class="del">Deletion</del>