Feature card
Reusable capability or benefit surface.
Component catalog
Internal bilingual showcase of HirzHub marketing primitives, Astro icons, and project-owned shadcn-vue UI.
Marketing design system
Verification surface for HirzHub Astro marketing primitives (outside primary site navigation).
Label / secondary-600
Display heading
Heading one
Heading two
Heading three
Body large supports bilingual marketing copy with consistent rhythm.
Composition
Section header and cards
PageCanvas, SectionFrame, SectionHeader, and FeatureCard share spacing and brand surfaces.
Audience card
Domain alias for enterprise audiences.
Security card
Domain alias for security messaging.
- 01
Secure messaging
Organizational communication under control.
- 02
Deployment choice
On-premises, private cloud, or hybrid.
- 03
Identity ready
Enterprise identity and policy governance.
- 04
Admin control
Operational ownership for regulated teams.
Use QuoteBlock only with approved attribution — never fabricated testimonials.
Approved screenshot slot
Ready for a controlled evaluation?
CTASection uses the HirzHub hero gradient and brand secondary primary action.
Astro icons
Production Astro surfaces use Icon from astro-icon with local Iconify data. Lucide covers UI icons; Simple Icons are for company and platform logos only.
Lucide UI icons
Decorative icons stay aria-hidden when adjacent text already conveys meaning.
- Search
lucide:search - Mail
lucide:mail - Settings
lucide:settings - Info
lucide:info
Simple Icons logos
Brand marks expose an accessible name with title and aria-label.
- Astro
simple-icons:astro - GitHub
simple-icons:github - Node.js
simple-icons:nodedotjs
Explore the approved marketing and shadcn-vue primitives used by this Astro site. (35)
Display
Aspect Ratio
aspect-ratio
Keep media and panels in a fixed ratio.
16:9
Avatar
avatar
User or brand identity mark with fallback initials.
SCAR
Badge
badge
Compact status and categorization labels.
Default
Secondary
Outline
Destructive
Button
button
Primary interactive control for actions and links.
Card
card
Grouped surface for related content and actions.
Carousel
carousel
Horizontal sliding content with keyboard controls.
Slide 1
Slide 2
Slide 3
Empty
empty
Placeholder state when a collection has no results.
No results
Try another filter or create a new entry.
Item
item
Reusable list-row surface for settings and results.
Project settings
Reusable list item surface for settings and results.
Disclosure
Accordion
accordion
Expand and collapse related content panels.
A bilingual showcase of project-owned shadcn-vue primitives.
Collapsible
collapsible
Show and hide secondary details in place.
Optional details
Tabs
tabs
Switch between related panels without navigation.
Tabs keep related panels in one island.
Forms
Checkbox
checkbox
Binary selection control for agreeing or enabling options.
Combobox
combobox
Searchable dropdown listbox built on Reka UI.
Field
field
Composable field wrapper for labels and helper text.
Field wraps label, control, and helper text.
Form
form
Validated local form demo with vee-validate and Zod.
Input
input
Single-line text control.
Input Group
input-group
Input with leading or trailing addons.
Label
label
Accessible label associated with a control.
Native Select
native-select
Progressive-enhancement native select control.
Number Field
number-field
Numeric input with increment and decrement controls.
Radio Group
radio-group
Single-choice selection from a mutually exclusive set.
Select
select
Custom select listbox built on Reka UI.
Stepper
stepper
Multi-step progress control for guided workflows.
Details
Basic info
Review
Check values
Confirm
Finish locally
Step 1 of 3
Step 1 of 0
Switch
switch
Immediate on/off toggle for settings and preferences.
Textarea
textarea
Multi-line text control for longer input.
Navigation and overlays
Navigation Menu
navigation-menu
Accessible menu for multi-level destinations.
Pagination
pagination
Navigate through paginated result sets.
Sheet
sheet
Slide-over panel for secondary navigation or content.
Feedback
Alert
alert
Inline status messaging for non-blocking feedback.
Informational alert
Use alerts for non-blocking status messages.
Destructive alert
Highlight validation or recovery guidance.
Alert Dialog
alert-dialog
Modal confirmation for important decisions.
Progress
progress
Visual progress indicator for determinate tasks.
62%
Skeleton
skeleton
Loading placeholder that respects reduced motion.
Spinner
spinner
Busy indicator for short-lived loading states.
Loading state
Toast
toast
Transient notification via Sonner (approved toast stack).
Tooltip
tooltip
Supplemental hint on hover or keyboard focus.