@bookklik/senangstart-css 0.1.4 → 0.1.8
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/.github/workflows/deploy-docs.yml +7 -1
- package/dist/senangstart-css.js +1436 -14
- package/dist/senangstart-css.min.js +1159 -10
- package/docs/.vitepress/config.js +624 -18
- package/docs/.vitepress/theme/custom.css +0 -1
- package/docs/SYNTAX-REFERENCE.md +1555 -0
- package/docs/guide/preflight.md +139 -0
- package/docs/index.md +8 -20
- package/docs/ms/guide/preflight.md +139 -0
- package/docs/ms/index.md +8 -20
- package/docs/ms/reference/colors.md +45 -45
- package/docs/ms/reference/layout/align-content.md +35 -0
- package/docs/ms/reference/layout/align-items.md +33 -0
- package/docs/ms/reference/layout/align-self.md +34 -0
- package/docs/ms/reference/layout/aspect-ratio.md +40 -0
- package/docs/ms/reference/layout/border-collapse.md +30 -0
- package/docs/ms/reference/layout/border-spacing.md +39 -0
- package/docs/ms/reference/layout/box-sizing.md +30 -0
- package/docs/ms/reference/layout/caption-side.md +30 -0
- package/docs/ms/reference/layout/columns.md +30 -0
- package/docs/ms/reference/layout/container.md +29 -0
- package/docs/ms/reference/layout/display.md +60 -0
- package/docs/ms/reference/layout/flex-basis.md +38 -0
- package/docs/ms/reference/layout/flex-direction.md +33 -0
- package/docs/ms/reference/layout/flex-items.md +32 -0
- package/docs/ms/reference/layout/flex-wrap.md +31 -0
- package/docs/ms/reference/layout/flex.md +40 -0
- package/docs/ms/reference/layout/float-clear.md +32 -0
- package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
- package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
- package/docs/ms/reference/layout/grid-column-span.md +31 -0
- package/docs/ms/reference/layout/grid-columns.md +32 -0
- package/docs/ms/reference/layout/grid-row-span.md +30 -0
- package/docs/ms/reference/layout/grid-rows.md +31 -0
- package/docs/ms/reference/layout/inset.md +44 -0
- package/docs/ms/reference/layout/isolation.md +30 -0
- package/docs/ms/reference/layout/justify-content.md +36 -0
- package/docs/ms/reference/layout/justify-items.md +32 -0
- package/docs/ms/reference/layout/justify-self.md +33 -0
- package/docs/ms/reference/layout/object-fit.md +33 -0
- package/docs/ms/reference/layout/object-position.md +45 -0
- package/docs/ms/reference/layout/order.md +32 -0
- package/docs/ms/reference/layout/overflow.md +34 -0
- package/docs/ms/reference/layout/overscroll.md +31 -0
- package/docs/ms/reference/layout/place-content.md +35 -0
- package/docs/ms/reference/layout/place-items.md +32 -0
- package/docs/ms/reference/layout/place-self.md +33 -0
- package/docs/ms/reference/layout/position.md +34 -0
- package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
- package/docs/ms/reference/layout/table-layout.md +30 -0
- package/docs/ms/reference/layout/visibility.md +30 -0
- package/docs/ms/reference/layout/z-index.md +33 -0
- package/docs/ms/reference/layout.md +53 -95
- package/docs/ms/reference/space/arbitrary-values.md +32 -0
- package/docs/ms/reference/space/gap.md +44 -0
- package/docs/ms/reference/space/height.md +44 -0
- package/docs/ms/reference/space/margin.md +49 -0
- package/docs/ms/reference/space/padding.md +49 -0
- package/docs/ms/reference/space/scale-reference.md +43 -0
- package/docs/ms/reference/space/sizing.md +27 -0
- package/docs/ms/reference/space/width.md +45 -0
- package/docs/ms/reference/space.md +15 -99
- package/docs/ms/reference/spacing.md +22 -8
- package/docs/ms/reference/visual/accent-color.md +31 -0
- package/docs/ms/reference/visual/animation-builtin.md +41 -0
- package/docs/ms/reference/visual/animation-delay.md +41 -0
- package/docs/ms/reference/visual/animation-direction.md +32 -0
- package/docs/ms/reference/visual/animation-duration.md +43 -0
- package/docs/ms/reference/visual/animation-fill.md +32 -0
- package/docs/ms/reference/visual/animation-iteration.md +30 -0
- package/docs/ms/reference/visual/animation-play.md +30 -0
- package/docs/ms/reference/visual/appearance.md +30 -0
- package/docs/ms/reference/visual/backdrop-blur.md +43 -0
- package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
- package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
- package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
- package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
- package/docs/ms/reference/visual/backdrop-invert.md +39 -0
- package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
- package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
- package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
- package/docs/ms/reference/visual/background-attachment.md +31 -0
- package/docs/ms/reference/visual/background-blend-mode.md +34 -0
- package/docs/ms/reference/visual/background-clip.md +32 -0
- package/docs/ms/reference/visual/background-color.md +33 -0
- package/docs/ms/reference/visual/background-image.md +41 -0
- package/docs/ms/reference/visual/background-origin.md +31 -0
- package/docs/ms/reference/visual/background-position.md +45 -0
- package/docs/ms/reference/visual/background-repeat.md +34 -0
- package/docs/ms/reference/visual/background-size.md +39 -0
- package/docs/ms/reference/visual/background.md +13 -0
- package/docs/ms/reference/visual/blend-modes.md +34 -0
- package/docs/ms/reference/visual/border-radius.md +34 -0
- package/docs/ms/reference/visual/border-style.md +33 -0
- package/docs/ms/reference/visual/border-width.md +44 -0
- package/docs/ms/reference/visual/border.md +43 -0
- package/docs/ms/reference/visual/box-shadow.md +33 -0
- package/docs/ms/reference/visual/caret-color.md +31 -0
- package/docs/ms/reference/visual/color-scheme.md +31 -0
- package/docs/ms/reference/visual/cursor.md +37 -0
- package/docs/ms/reference/visual/field-sizing.md +30 -0
- package/docs/ms/reference/visual/fill.md +38 -0
- package/docs/ms/reference/visual/filter-blur.md +43 -0
- package/docs/ms/reference/visual/filter-brightness.md +41 -0
- package/docs/ms/reference/visual/filter-contrast.md +41 -0
- package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
- package/docs/ms/reference/visual/filter-grayscale.md +39 -0
- package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
- package/docs/ms/reference/visual/filter-invert.md +39 -0
- package/docs/ms/reference/visual/filter-saturate.md +41 -0
- package/docs/ms/reference/visual/filter-sepia.md +39 -0
- package/docs/ms/reference/visual/font-family.md +31 -0
- package/docs/ms/reference/visual/font-smoothing.md +30 -0
- package/docs/ms/reference/visual/font-style.md +30 -0
- package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
- package/docs/ms/reference/visual/font-weight.md +31 -0
- package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
- package/docs/ms/reference/visual/hyphens.md +31 -0
- package/docs/ms/reference/visual/letter-spacing.md +42 -0
- package/docs/ms/reference/visual/line-clamp.md +40 -0
- package/docs/ms/reference/visual/line-height.md +42 -0
- package/docs/ms/reference/visual/list-style.md +34 -0
- package/docs/ms/reference/visual/mask.md +39 -0
- package/docs/ms/reference/visual/opacity.md +33 -0
- package/docs/ms/reference/visual/outline.md +31 -0
- package/docs/ms/reference/visual/pointer-events.md +30 -0
- package/docs/ms/reference/visual/resize.md +32 -0
- package/docs/ms/reference/visual/scroll-behavior.md +30 -0
- package/docs/ms/reference/visual/scroll-margin.md +41 -0
- package/docs/ms/reference/visual/scroll-padding.md +41 -0
- package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
- package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
- package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
- package/docs/ms/reference/visual/state-prefixes.md +37 -0
- package/docs/ms/reference/visual/stroke-width.md +39 -0
- package/docs/ms/reference/visual/stroke.md +38 -0
- package/docs/ms/reference/visual/text-alignment.md +32 -0
- package/docs/ms/reference/visual/text-color.md +41 -0
- package/docs/ms/reference/visual/text-decoration.md +32 -0
- package/docs/ms/reference/visual/text-indent.md +37 -0
- package/docs/ms/reference/visual/text-overflow.md +31 -0
- package/docs/ms/reference/visual/text-shadow.md +40 -0
- package/docs/ms/reference/visual/text-size.md +32 -0
- package/docs/ms/reference/visual/text-transform.md +32 -0
- package/docs/ms/reference/visual/text-wrap.md +32 -0
- package/docs/ms/reference/visual/touch-action.md +36 -0
- package/docs/ms/reference/visual/transform-backface.md +30 -0
- package/docs/ms/reference/visual/transform-origin.md +45 -0
- package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
- package/docs/ms/reference/visual/transform-perspective.md +43 -0
- package/docs/ms/reference/visual/transform-rotate.md +40 -0
- package/docs/ms/reference/visual/transform-scale.md +43 -0
- package/docs/ms/reference/visual/transform-skew.md +40 -0
- package/docs/ms/reference/visual/transform-style.md +30 -0
- package/docs/ms/reference/visual/transform-translate.md +39 -0
- package/docs/ms/reference/visual/transition-delay.md +41 -0
- package/docs/ms/reference/visual/transition-duration.md +43 -0
- package/docs/ms/reference/visual/transition-property.md +34 -0
- package/docs/ms/reference/visual/transition-timing.md +40 -0
- package/docs/ms/reference/visual/typography-keywords.md +81 -0
- package/docs/ms/reference/visual/user-select.md +32 -0
- package/docs/ms/reference/visual/vertical-align.md +36 -0
- package/docs/ms/reference/visual/whitespace.md +34 -0
- package/docs/ms/reference/visual/will-change.md +33 -0
- package/docs/ms/reference/visual/word-break.md +32 -0
- package/docs/ms/reference/visual.md +145 -148
- package/docs/public/assets/senangstart-css.min.js +1545 -0
- package/docs/reference/layout/align-content.md +35 -0
- package/docs/reference/layout/align-items.md +33 -0
- package/docs/reference/layout/align-self.md +34 -0
- package/docs/reference/layout/aspect-ratio.md +40 -0
- package/docs/reference/layout/border-collapse.md +30 -0
- package/docs/reference/layout/border-spacing.md +39 -0
- package/docs/reference/layout/box-sizing.md +30 -0
- package/docs/reference/layout/caption-side.md +30 -0
- package/docs/reference/layout/columns.md +30 -0
- package/docs/reference/layout/container.md +29 -0
- package/docs/reference/layout/display.md +60 -0
- package/docs/reference/layout/flex-basis.md +38 -0
- package/docs/reference/layout/flex-direction.md +33 -0
- package/docs/reference/layout/flex-items.md +32 -0
- package/docs/reference/layout/flex-wrap.md +31 -0
- package/docs/reference/layout/flex.md +40 -0
- package/docs/reference/layout/float-clear.md +32 -0
- package/docs/reference/layout/grid-auto-flow.md +33 -0
- package/docs/reference/layout/grid-auto-sizing.md +32 -0
- package/docs/reference/layout/grid-column-span.md +31 -0
- package/docs/reference/layout/grid-columns.md +32 -0
- package/docs/reference/layout/grid-row-span.md +30 -0
- package/docs/reference/layout/grid-rows.md +31 -0
- package/docs/reference/layout/inset.md +44 -0
- package/docs/reference/layout/isolation.md +30 -0
- package/docs/reference/layout/justify-content.md +36 -0
- package/docs/reference/layout/justify-items.md +32 -0
- package/docs/reference/layout/justify-self.md +33 -0
- package/docs/reference/layout/object-fit.md +33 -0
- package/docs/reference/layout/object-position.md +45 -0
- package/docs/reference/layout/order.md +32 -0
- package/docs/reference/layout/overflow.md +34 -0
- package/docs/reference/layout/overscroll.md +31 -0
- package/docs/reference/layout/place-content.md +35 -0
- package/docs/reference/layout/place-items.md +32 -0
- package/docs/reference/layout/place-self.md +33 -0
- package/docs/reference/layout/position.md +34 -0
- package/docs/reference/layout/shorthand-alignment.md +34 -0
- package/docs/reference/layout/table-layout.md +30 -0
- package/docs/reference/layout/visibility.md +30 -0
- package/docs/reference/layout/z-index.md +33 -0
- package/docs/reference/layout.md +60 -102
- package/docs/reference/space/arbitrary-values.md +39 -0
- package/docs/reference/space/gap.md +44 -0
- package/docs/reference/space/height.md +44 -0
- package/docs/reference/space/margin.md +49 -0
- package/docs/reference/space/padding.md +49 -0
- package/docs/reference/space/scale-reference.md +43 -0
- package/docs/reference/space/width.md +45 -0
- package/docs/reference/space.md +14 -98
- package/docs/reference/spacing.md +22 -8
- package/docs/reference/visual/accent-color.md +31 -0
- package/docs/reference/visual/animation-builtin.md +41 -0
- package/docs/reference/visual/animation-delay.md +41 -0
- package/docs/reference/visual/animation-direction.md +32 -0
- package/docs/reference/visual/animation-duration.md +43 -0
- package/docs/reference/visual/animation-fill.md +32 -0
- package/docs/reference/visual/animation-iteration.md +30 -0
- package/docs/reference/visual/animation-play.md +30 -0
- package/docs/reference/visual/appearance.md +30 -0
- package/docs/reference/visual/backdrop-blur.md +43 -0
- package/docs/reference/visual/backdrop-brightness.md +41 -0
- package/docs/reference/visual/backdrop-contrast.md +41 -0
- package/docs/reference/visual/backdrop-grayscale.md +39 -0
- package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
- package/docs/reference/visual/backdrop-invert.md +39 -0
- package/docs/reference/visual/backdrop-opacity.md +39 -0
- package/docs/reference/visual/backdrop-saturate.md +41 -0
- package/docs/reference/visual/backdrop-sepia.md +39 -0
- package/docs/reference/visual/background-attachment.md +31 -0
- package/docs/reference/visual/background-blend-mode.md +34 -0
- package/docs/reference/visual/background-clip.md +32 -0
- package/docs/reference/visual/background-color.md +33 -0
- package/docs/reference/visual/background-image.md +41 -0
- package/docs/reference/visual/background-origin.md +31 -0
- package/docs/reference/visual/background-position.md +45 -0
- package/docs/reference/visual/background-repeat.md +34 -0
- package/docs/reference/visual/background-size.md +39 -0
- package/docs/reference/visual/blend-modes.md +34 -0
- package/docs/reference/visual/border-radius.md +34 -0
- package/docs/reference/visual/border-style.md +33 -0
- package/docs/reference/visual/border-width.md +44 -0
- package/docs/reference/visual/border.md +43 -0
- package/docs/reference/visual/box-shadow.md +33 -0
- package/docs/reference/visual/caret-color.md +31 -0
- package/docs/reference/visual/color-scheme.md +31 -0
- package/docs/reference/visual/cursor.md +37 -0
- package/docs/reference/visual/field-sizing.md +30 -0
- package/docs/reference/visual/fill.md +38 -0
- package/docs/reference/visual/filter-blur.md +43 -0
- package/docs/reference/visual/filter-brightness.md +41 -0
- package/docs/reference/visual/filter-contrast.md +41 -0
- package/docs/reference/visual/filter-drop-shadow.md +42 -0
- package/docs/reference/visual/filter-grayscale.md +39 -0
- package/docs/reference/visual/filter-hue-rotate.md +39 -0
- package/docs/reference/visual/filter-invert.md +39 -0
- package/docs/reference/visual/filter-saturate.md +41 -0
- package/docs/reference/visual/filter-sepia.md +39 -0
- package/docs/reference/visual/font-family.md +31 -0
- package/docs/reference/visual/font-smoothing.md +30 -0
- package/docs/reference/visual/font-style.md +30 -0
- package/docs/reference/visual/font-variant-numeric.md +35 -0
- package/docs/reference/visual/font-weight.md +31 -0
- package/docs/reference/visual/forced-color-adjust.md +30 -0
- package/docs/reference/visual/hyphens.md +31 -0
- package/docs/reference/visual/letter-spacing.md +42 -0
- package/docs/reference/visual/line-clamp.md +40 -0
- package/docs/reference/visual/line-height.md +42 -0
- package/docs/reference/visual/list-style.md +34 -0
- package/docs/reference/visual/mask.md +39 -0
- package/docs/reference/visual/opacity.md +33 -0
- package/docs/reference/visual/outline.md +31 -0
- package/docs/reference/visual/pointer-events.md +30 -0
- package/docs/reference/visual/resize.md +32 -0
- package/docs/reference/visual/scroll-behavior.md +30 -0
- package/docs/reference/visual/scroll-margin.md +41 -0
- package/docs/reference/visual/scroll-padding.md +41 -0
- package/docs/reference/visual/scroll-snap-align.md +32 -0
- package/docs/reference/visual/scroll-snap-stop.md +30 -0
- package/docs/reference/visual/scroll-snap-type.md +34 -0
- package/docs/reference/visual/state-prefixes.md +37 -0
- package/docs/reference/visual/stroke-width.md +39 -0
- package/docs/reference/visual/stroke.md +38 -0
- package/docs/reference/visual/text-alignment.md +32 -0
- package/docs/reference/visual/text-color.md +41 -0
- package/docs/reference/visual/text-decoration.md +32 -0
- package/docs/reference/visual/text-indent.md +37 -0
- package/docs/reference/visual/text-overflow.md +31 -0
- package/docs/reference/visual/text-shadow.md +40 -0
- package/docs/reference/visual/text-size.md +32 -0
- package/docs/reference/visual/text-transform.md +32 -0
- package/docs/reference/visual/text-wrap.md +32 -0
- package/docs/reference/visual/touch-action.md +36 -0
- package/docs/reference/visual/transform-backface.md +30 -0
- package/docs/reference/visual/transform-origin.md +45 -0
- package/docs/reference/visual/transform-perspective-origin.md +45 -0
- package/docs/reference/visual/transform-perspective.md +43 -0
- package/docs/reference/visual/transform-rotate.md +40 -0
- package/docs/reference/visual/transform-scale.md +43 -0
- package/docs/reference/visual/transform-skew.md +40 -0
- package/docs/reference/visual/transform-style.md +30 -0
- package/docs/reference/visual/transform-translate.md +39 -0
- package/docs/reference/visual/transition-delay.md +41 -0
- package/docs/reference/visual/transition-duration.md +43 -0
- package/docs/reference/visual/transition-property.md +34 -0
- package/docs/reference/visual/transition-timing.md +40 -0
- package/docs/reference/visual/typography-keywords.md +81 -0
- package/docs/reference/visual/user-select.md +32 -0
- package/docs/reference/visual/vertical-align.md +36 -0
- package/docs/reference/visual/whitespace.md +34 -0
- package/docs/reference/visual/will-change.md +33 -0
- package/docs/reference/visual/word-break.md +32 -0
- package/docs/reference/visual.md +151 -154
- package/docs/syntax-reference.json +1973 -0
- package/package.json +12 -4
- package/playground/index.html +78 -0
- package/playground/jit-test.html +384 -0
- package/scripts/extract-syntax.js +152 -0
- package/scripts/generate-docs.js +352 -0
- package/src/cdn/jit.js +1436 -14
- package/src/cli/commands/build.js +5 -0
- package/src/cli/index.js +2 -0
- package/src/compiler/generators/css.js +1537 -25
- package/src/compiler/generators/preflight.js +379 -0
- package/src/config/defaults.js +19 -1
- package/src/definitions/index.js +153 -0
- package/src/definitions/layout-alignment.js +257 -0
- package/src/definitions/layout-flex.js +209 -0
- package/src/definitions/layout-grid.js +150 -0
- package/src/definitions/layout-positioning.js +89 -0
- package/src/definitions/layout-table.js +98 -0
- package/src/definitions/layout-utilities.js +262 -0
- package/src/definitions/layout.js +195 -0
- package/src/definitions/space.js +164 -0
- package/src/definitions/visual-backgrounds.js +423 -0
- package/src/definitions/visual-borders.js +111 -0
- package/src/definitions/visual-filters.js +204 -0
- package/src/definitions/visual-interactivity.js +292 -0
- package/src/definitions/visual-svg.js +80 -0
- package/src/definitions/visual-transform3d.js +159 -0
- package/src/definitions/visual-transforms.js +142 -0
- package/src/definitions/visual-transitions.js +277 -0
- package/src/definitions/visual-typography.js +386 -0
- package/src/definitions/visual.js +542 -0
- package/tests/helpers/test-utils.js +144 -0
- package/tests/integration/compiler.test.js +247 -0
- package/tests/sync/docs-sync.test.js +364 -0
- package/tests/unit/compiler/generators/css.test.js +719 -0
- package/tests/unit/compiler/parser.test.js +244 -0
- package/tests/unit/compiler/tokenizer.test.js +305 -0
- package/tests/unit/config/defaults.test.js +168 -0
- package/docs/.vitepress/cache/deps/_metadata.json +0 -31
- package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
- package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
- package/docs/.vitepress/cache/deps/package.json +0 -3
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -9731
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
- package/docs/.vitepress/cache/deps/vue.js +0 -347
- package/docs/.vitepress/cache/deps/vue.js.map +0 -7
- package/docs/.vitepress/dist/404.html +0 -22
- package/docs/.vitepress/dist/assets/app.DBXoyO4w.js +0 -1
- package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +0 -19
- package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +0 -1
- package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.js +0 -84
- package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.lean.js +0 -1
- package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.js +0 -169
- package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.lean.js +0 -1
- package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.js +0 -118
- package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.lean.js +0 -1
- package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.js +0 -52
- package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.lean.js +0 -1
- package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.js +0 -106
- package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.js +0 -30
- package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.js +0 -44
- package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.js +0 -79
- package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +0 -69
- package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.js +0 -47
- package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.js +0 -3
- package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.js +0 -22
- package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.js +0 -7
- package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.js +0 -57
- package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.js +0 -77
- package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.js +0 -45
- package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.lean.js +0 -1
- package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.js +0 -7
- package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.lean.js +0 -1
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
- package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +0 -84
- package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +0 -169
- package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +0 -118
- package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +0 -52
- package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +0 -106
- package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +0 -30
- package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +0 -44
- package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +0 -79
- package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +0 -69
- package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +0 -47
- package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +0 -3
- package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +0 -22
- package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +0 -7
- package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +0 -57
- package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +0 -77
- package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +0 -45
- package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +0 -7
- package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +0 -48
- package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +0 -17
- package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +0 -13
- package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +0 -24
- package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +0 -32
- package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +0 -1
- package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +0 -22
- package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +0 -1
- package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.js +0 -48
- package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.lean.js +0 -1
- package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +0 -17
- package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +0 -1
- package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.js +0 -13
- package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.lean.js +0 -1
- package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.js +0 -24
- package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.lean.js +0 -1
- package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.js +0 -32
- package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.lean.js +0 -1
- package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.js +0 -22
- package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.lean.js +0 -1
- package/docs/.vitepress/dist/assets/style.D82StYDI.css +0 -1
- package/docs/.vitepress/dist/examples/cards.html +0 -108
- package/docs/.vitepress/dist/examples/forms.html +0 -193
- package/docs/.vitepress/dist/examples/hero.html +0 -142
- package/docs/.vitepress/dist/examples/index.html +0 -76
- package/docs/.vitepress/dist/examples/navigation.html +0 -130
- package/docs/.vitepress/dist/guide/cdn.html +0 -54
- package/docs/.vitepress/dist/guide/cli.html +0 -68
- package/docs/.vitepress/dist/guide/configuration.html +0 -103
- package/docs/.vitepress/dist/guide/dark-mode.html +0 -93
- package/docs/.vitepress/dist/guide/getting-started.html +0 -71
- package/docs/.vitepress/dist/guide/index.html +0 -27
- package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
- package/docs/.vitepress/dist/guide/philosophy.html +0 -31
- package/docs/.vitepress/dist/guide/responsive.html +0 -81
- package/docs/.vitepress/dist/guide/states.html +0 -101
- package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
- package/docs/.vitepress/dist/hashmap.json +0 -1
- package/docs/.vitepress/dist/index.html +0 -31
- package/docs/.vitepress/dist/ms/examples/cards.html +0 -108
- package/docs/.vitepress/dist/ms/examples/forms.html +0 -193
- package/docs/.vitepress/dist/ms/examples/hero.html +0 -142
- package/docs/.vitepress/dist/ms/examples/index.html +0 -76
- package/docs/.vitepress/dist/ms/examples/navigation.html +0 -130
- package/docs/.vitepress/dist/ms/guide/cdn.html +0 -54
- package/docs/.vitepress/dist/ms/guide/cli.html +0 -68
- package/docs/.vitepress/dist/ms/guide/configuration.html +0 -103
- package/docs/.vitepress/dist/ms/guide/dark-mode.html +0 -93
- package/docs/.vitepress/dist/ms/guide/getting-started.html +0 -71
- package/docs/.vitepress/dist/ms/guide/index.html +0 -27
- package/docs/.vitepress/dist/ms/guide/natural-scale.html +0 -46
- package/docs/.vitepress/dist/ms/guide/philosophy.html +0 -31
- package/docs/.vitepress/dist/ms/guide/responsive.html +0 -81
- package/docs/.vitepress/dist/ms/guide/states.html +0 -101
- package/docs/.vitepress/dist/ms/guide/tri-attribute.html +0 -69
- package/docs/.vitepress/dist/ms/index.html +0 -31
- package/docs/.vitepress/dist/ms/reference/breakpoints.html +0 -72
- package/docs/.vitepress/dist/ms/reference/colors.html +0 -41
- package/docs/.vitepress/dist/ms/reference/layout.html +0 -37
- package/docs/.vitepress/dist/ms/reference/space.html +0 -48
- package/docs/.vitepress/dist/ms/reference/spacing.html +0 -56
- package/docs/.vitepress/dist/ms/reference/visual.html +0 -46
- package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
- package/docs/.vitepress/dist/reference/colors.html +0 -41
- package/docs/.vitepress/dist/reference/layout.html +0 -37
- package/docs/.vitepress/dist/reference/space.html +0 -48
- package/docs/.vitepress/dist/reference/spacing.html +0 -56
- package/docs/.vitepress/dist/reference/visual.html +0 -46
- package/docs/.vitepress/dist/vp-icons.css +0 -1
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import{_ as i,c as a,o as t,ae as n}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Card Examples","description":"","frontmatter":{},"headers":[],"relativePath":"examples/cards.md","filePath":"examples/cards.md"}'),h={name:"examples/cards.md"};function l(k,s,p,E,e,d){return t(),a("div",null,[...s[0]||(s[0]=[n(`<h1 id="card-examples" tabindex="-1">Card Examples <a class="header-anchor" href="#card-examples" aria-label="Permalink to "Card Examples""></a></h1><p>Beautiful card components built with SenangStart CSS.</p><h2 id="basic-card" tabindex="-1">Basic Card <a class="header-anchor" href="#basic-card" aria-label="Permalink to "Basic Card""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
|
|
2
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span></span>
|
|
3
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"w:[320px] p:medium"</span></span>
|
|
4
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white rounded:big shadow:medium"</span></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
6
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"font:bold text-size:big text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Card Title</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
7
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-t:small"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
8
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Card description goes here with some helpful text.</span></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
10
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="profile-card" tabindex="-1">Profile Card <a class="header-anchor" href="#profile-card" aria-label="Permalink to "Profile Card""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
|
|
11
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span></span>
|
|
12
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"w:[320px] p:medium"</span></span>
|
|
13
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white rounded:big shadow:medium"</span></span>
|
|
14
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex between"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-b:big"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
16
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"font:bold text-size:big text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Profile</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:primary"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Edit</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
18
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
19
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Username</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
21
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>@senang_dev</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
22
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
23
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small m-t:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
24
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Email</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>hello@senangstart.dev</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-t:big p-y:small"</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:primary text:white rounded:medium font:medium hover:bg:[#2563EB]"</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> View Full Profile</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="pricing-card" tabindex="-1">Pricing Card <a class="header-anchor" href="#pricing-card" aria-label="Permalink to "Pricing Card""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span></span>
|
|
35
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"w:[300px] p:big"</span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white rounded:big shadow:medium text:center"</span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"font:bold text-size:big text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Pro Plan</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
39
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-t:small m-b:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
40
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text-size:vast font:bold text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>$29</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>/month</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
42
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
43
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey text:left"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
44
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>✓ Unlimited projects</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>✓ Priority support</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
46
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>✓ Advanced analytics</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
47
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>✓ Custom domains</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
48
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-t:big p:small"</span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:primary text:white rounded:medium font:bold"</span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Get Started</span></span>
|
|
54
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
55
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="feature-card" tabindex="-1">Feature Card <a class="header-anchor" href="#feature-card" aria-label="Permalink to "Feature Card""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
|
|
56
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span></span>
|
|
57
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:big"</span></span>
|
|
58
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white rounded:big shadow:small hover:shadow:big"</span></span>
|
|
59
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
60
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-b:medium"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text-size:giant"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>🚀</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
61
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-b:small"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"font:bold text-size:big text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
62
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Fast Performance</span></span>
|
|
63
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
64
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
65
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Lightning fast builds with optimized output. </span></span>
|
|
66
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Your users will love the speed.</span></span>
|
|
67
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
68
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="horizontal-card" tabindex="-1">Horizontal Card <a class="header-anchor" href="#horizontal-card" aria-label="Permalink to "Horizontal Card""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
|
|
69
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex row"</span></span>
|
|
70
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:medium g:medium"</span></span>
|
|
71
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white rounded:big shadow:medium"</span></span>
|
|
72
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
73
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
74
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"w:[80px] h:[80px]"</span></span>
|
|
75
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:primary rounded:medium"</span></span>
|
|
76
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
77
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:tiny"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
78
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"font:bold text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Article Title</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
79
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
80
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> A brief description of the article content.</span></span>
|
|
81
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
82
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:primary text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Read more →</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
83
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
84
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div>`,12)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as i,c as a,o as t,ae as n}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Card Examples","description":"","frontmatter":{},"headers":[],"relativePath":"examples/cards.md","filePath":"examples/cards.md"}'),h={name:"examples/cards.md"};function l(k,s,p,E,e,d){return t(),a("div",null,[...s[0]||(s[0]=[n("",12)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};
|
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,ae as l}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Form Examples","description":"","frontmatter":{},"headers":[],"relativePath":"examples/forms.md","filePath":"examples/forms.md"}'),t={name:"examples/forms.md"};function h(k,s,p,E,e,d){return n(),a("div",null,[...s[0]||(s[0]=[l(`<h1 id="form-examples" tabindex="-1">Form Examples <a class="header-anchor" href="#form-examples" aria-label="Permalink to "Form Examples""></a></h1><p>Form components and layouts built with SenangStart CSS.</p><h2 id="basic-input" tabindex="-1">Basic Input <a class="header-anchor" href="#basic-input" aria-label="Permalink to "Basic Input""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
2
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Email</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
3
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
|
|
4
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"email"</span></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small w:[100%]"</span></span>
|
|
6
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small focus:border:primary"</span></span>
|
|
7
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"you@example.com"</span></span>
|
|
8
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="input-with-icon" tabindex="-1">Input with Icon <a class="header-anchor" href="#input-with-icon" aria-label="Permalink to "Input with Icon""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
10
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Search</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
11
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex relative"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
12
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
13
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"absolute"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
14
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p-l:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"top: 50%; transform: translateY(-50%);"</span></span>
|
|
16
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey"</span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
18
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 🔍</span></span>
|
|
19
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
|
|
21
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span></span>
|
|
22
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small p-l:big w:[100%]"</span></span>
|
|
23
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small"</span></span>
|
|
24
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Search..."</span></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="button-styles" tabindex="-1">Button Styles <a class="header-anchor" href="#button-styles" aria-label="Permalink to "Button Styles""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex wrap"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- Primary --></span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p-x:medium p-y:small"</span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:primary text:white rounded:medium hover:bg:[#2563EB]"</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Primary</span></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
35
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- Secondary --></span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p-x:medium p-y:small"</span></span>
|
|
39
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white text:dark rounded:medium border:grey border-w:[1px] hover:bg:light"</span></span>
|
|
40
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Secondary</span></span>
|
|
42
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
43
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
44
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- Danger --></span></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
46
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p-x:medium p-y:small"</span></span>
|
|
47
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:danger text:white rounded:medium hover:bg:[#DC2626]"</span></span>
|
|
48
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Danger</span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- Ghost --></span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
54
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p-x:medium p-y:small"</span></span>
|
|
55
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:[transparent] text:primary hover:bg:light rounded:medium"</span></span>
|
|
56
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
57
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Ghost</span></span>
|
|
58
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
59
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="login-form" tabindex="-1">Login Form <a class="header-anchor" href="#login-form" aria-label="Permalink to "Login Form""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
|
|
60
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span></span>
|
|
61
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"w:[400px] p:big"</span></span>
|
|
62
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white rounded:big shadow:medium"</span></span>
|
|
63
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
64
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-b:big"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"font:bold text-size:big text:dark text:center"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
65
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Welcome Back</span></span>
|
|
66
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
67
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
68
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small m-b:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
69
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Email</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
70
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
|
|
71
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"email"</span></span>
|
|
72
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
73
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small focus:border:primary"</span></span>
|
|
74
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"you@example.com"</span></span>
|
|
75
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
76
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
77
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
78
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small m-b:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
79
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Password</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
80
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
|
|
81
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"password"</span></span>
|
|
82
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
83
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small focus:border:primary"</span></span>
|
|
84
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"••••••••"</span></span>
|
|
85
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
86
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
87
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
88
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex between"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-b:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
89
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex center"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:tiny"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
90
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
91
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Remember me</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
92
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
93
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:primary text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Forgot password?</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
94
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
95
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
96
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
97
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
98
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:primary text:white rounded:medium font:medium hover:bg:[#2563EB]"</span></span>
|
|
99
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
100
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Sign In</span></span>
|
|
101
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
102
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
103
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-t:medium"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:grey text:center text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
104
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Don't have an account? <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:primary"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Sign up</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
105
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
106
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="contact-form" tabindex="-1">Contact Form <a class="header-anchor" href="#contact-form" aria-label="Permalink to "Contact Form""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
|
|
107
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span></span>
|
|
108
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"max-w:[600px] p:big"</span></span>
|
|
109
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:white rounded:big shadow:medium"</span></span>
|
|
110
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
111
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m-b:big"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"font:bold text-size:big text:dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
112
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Get in Touch</span></span>
|
|
113
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
114
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
115
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:medium m-b:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
116
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small w:[50%]"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
117
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>First Name</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
118
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
|
|
119
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span></span>
|
|
120
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
121
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small"</span></span>
|
|
122
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
123
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
124
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small w:[50%]"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
125
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Last Name</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
126
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
|
|
127
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span></span>
|
|
128
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
129
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small"</span></span>
|
|
130
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
131
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
132
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
133
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
134
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small m-b:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
135
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Email</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
136
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
|
|
137
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"email"</span></span>
|
|
138
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
139
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small"</span></span>
|
|
140
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
141
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
142
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
143
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small m-b:medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
144
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Message</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
145
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span></span>
|
|
146
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
147
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small"</span></span>
|
|
148
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rows</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"4"</span></span>
|
|
149
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
150
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
151
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
152
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
153
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
154
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bg:primary text:white rounded:medium font:medium"</span></span>
|
|
155
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
156
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Send Message</span></span>
|
|
157
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
158
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="select-dropdown" tabindex="-1">Select Dropdown <a class="header-anchor" href="#select-dropdown" aria-label="Permalink to "Select Dropdown""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"flex col"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"g:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
159
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text:dark font:medium text-size:small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Country</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
160
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span></span>
|
|
161
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"p:small"</span></span>
|
|
162
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"border:grey border-w:[1px] rounded:small bg:white"</span></span>
|
|
163
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
164
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Select a country</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
165
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>United States</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
166
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>United Kingdom</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
167
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Canada</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
168
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
169
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div>`,14)])])}const y=i(t,[["render",h]]);export{g as __pageData,y as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,ae as l}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Form Examples","description":"","frontmatter":{},"headers":[],"relativePath":"examples/forms.md","filePath":"examples/forms.md"}'),t={name:"examples/forms.md"};function h(k,s,p,E,e,d){return n(),a("div",null,[...s[0]||(s[0]=[l("",14)])])}const y=i(t,[["render",h]]);export{g as __pageData,y as default};
|