spoko-design-system 0.3.3 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/astro.config.mjs +7 -2
- package/index.ts +1 -1
- package/package.json +119 -119
- package/src/components/Category/CategoryDetails.astro +91 -101
- package/src/components/Category/CategorySidebarToggler.vue +1 -1
- package/src/components/Category/CategoryViewToggler.astro +26 -25
- package/src/components/Jumbotron/index.astro +153 -0
- package/src/components/Jumbotron/styles.css +0 -0
- package/src/components/Jumbotron/types.ts +29 -0
- package/src/components/Jumbotron/variants/Default.astro +40 -0
- package/src/components/Jumbotron/variants/Hero.astro +54 -0
- package/src/components/Jumbotron/variants/Post.astro +62 -0
- package/src/components/Jumbotron/variants/PostSplit.astro +71 -0
- package/src/components/Jumbotron.astro +12 -0
- package/src/config.ts +1 -1
- package/src/layouts/Layout.astro +2 -1
- package/src/pages/components/image.mdx +1 -1
- package/src/pages/components/jumbotron.mdx +360 -0
- package/src/pages/index.astro +13 -8
- package/uno-config/theme/colors.ts +0 -2
- package/uno-config/theme/container.ts +25 -0
- package/uno-config/theme/index.ts +3 -0
- package/uno-config/theme/shortcuts/components.ts +1 -1
- package/uno-config/theme/shortcuts/index.ts +3 -1
- package/uno-config/theme/shortcuts/jumbotron.ts +44 -0
- package/src/components/Jumbatron.vue +0 -41
- package/src/pages/components/jumbatron.mdx +0 -95
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Jumbatron"
|
|
3
|
-
layout: "../../layouts/MainLayout.astro"
|
|
4
|
-
---
|
|
5
|
-
import Jumbatron from '../../components/Jumbatron.vue'
|
|
6
|
-
import Button from '../../components/Button.vue'
|
|
7
|
-
|
|
8
|
-
# Jumbatron
|
|
9
|
-
|
|
10
|
-
A jumbotron indicates a big box for calling extra attention to some special content or information.
|
|
11
|
-
|
|
12
|
-
Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
|
|
13
|
-
|
|
14
|
-
## Jumbatron - classic
|
|
15
|
-
<div class="component-preview">
|
|
16
|
-
<Jumbatron class="w-full" intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
|
|
17
|
-
<p slot="subtitle"
|
|
18
|
-
class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
|
|
19
|
-
set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
|
|
20
|
-
/>
|
|
21
|
-
<Button primary slot="cta" rounded
|
|
22
|
-
href="#"
|
|
23
|
-
title="short text"
|
|
24
|
-
>
|
|
25
|
-
Read More
|
|
26
|
-
</Button>
|
|
27
|
-
</Jumbatron>
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
```js
|
|
31
|
-
<Jumbatron intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
|
|
32
|
-
<span slot="intro" set:html= />
|
|
33
|
-
<p slot="subtitle"
|
|
34
|
-
class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
|
|
35
|
-
set:html="subtitle"
|
|
36
|
-
/>
|
|
37
|
-
<Button primary slot="cta" rounded
|
|
38
|
-
href="#"
|
|
39
|
-
title="short text"
|
|
40
|
-
>
|
|
41
|
-
Read More
|
|
42
|
-
</Button>
|
|
43
|
-
</Jumbatron>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## Small Jumbatron
|
|
47
|
-
|
|
48
|
-
<div class="component-preview">
|
|
49
|
-
<Jumbatron class="w-full" small intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
|
|
50
|
-
<p slot="subtitle"
|
|
51
|
-
class="mt-5 sm:mt-8 sm:flex sm:justify-center"
|
|
52
|
-
set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
|
|
53
|
-
/>
|
|
54
|
-
</Jumbatron>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
```js
|
|
58
|
-
<Jumbatron small intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
|
|
59
|
-
|
|
60
|
-
<p slot="subtitle"
|
|
61
|
-
class="mt-5 sm:mt-8 sm:flex sm:justify-center"
|
|
62
|
-
set:html="subtitle"
|
|
63
|
-
/>
|
|
64
|
-
<Button primary slot="cta"
|
|
65
|
-
href="#"
|
|
66
|
-
title="short text"
|
|
67
|
-
>
|
|
68
|
-
Read More
|
|
69
|
-
</Button>
|
|
70
|
-
</Jumbatron>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
## Small Jumbatron - custom slot intro instead of prop
|
|
75
|
-
<div class="component-preview">
|
|
76
|
-
<Jumbatron class="w-full" small >
|
|
77
|
-
<h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.</h2>
|
|
78
|
-
<p slot="subtitle"
|
|
79
|
-
class="mt-5 sm:mt-8 sm:flex sm:justify-center"
|
|
80
|
-
set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
|
|
81
|
-
/>
|
|
82
|
-
</Jumbatron>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
```js
|
|
86
|
-
<Jumbatron class="w-full" small >
|
|
87
|
-
<h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">
|
|
88
|
-
Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
|
|
89
|
-
</h2>
|
|
90
|
-
<p slot="subtitle"
|
|
91
|
-
class="mt-5 sm:mt-8 sm:flex sm:justify-center"
|
|
92
|
-
set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
|
|
93
|
-
/>
|
|
94
|
-
</Jumbatron>
|
|
95
|
-
```
|