Wera WelltechWera Welltech design system

Komponenter

Varje komponent renderas live med sina varianter och tillstånd. Sök i listan för att hoppa direkt till en komponent.

Button

Standardknappen är orange med mörkgrön hover, medelstor.

Varianter
Storlekar
Tillstånd

3 valda brukare

I sammanhang — verktygsrad
Kod
<Button>Boka demo</Button>
<Button variant="outline" size="sm">Läs mer</Button>
<Button loading>Skickar</Button>

Card

Behållare för paneler och listor, med header-, body- och footer-slots.

Tjänst

Nattillsyn

Digital tillsyn som ger lugn nattsömn.

variant="surface"

Ett gott liv hela livet

Vi bygger teknik som personalen faktiskt använder.

variant="brand"

Dämpad yta för sekundärt innehåll.

variant="muted"

Enbart kantlinje, ingen fyllning.

variant="outline"
Kod
<Card>
  <CardHeader><Heading level={4}>Nattillsyn</Heading></CardHeader>
  <CardBody><Text>Digital tillsyn utan att väcka.</Text></CardBody>
  <CardFooter><Button size="sm">Läs mer</Button></CardFooter>
</Card>

Input

Enradigt textfält i två storlekar.

Storlekar och tillstånd
Kod
<Input placeholder="Namn" />
<Input size="sm" invalid />

Textarea

Flerradigt fält för längre meddelanden.

Normal och fel
Kod
<Textarea placeholder="Din fråga" rows={4} />

Field & Label

Etikett, kontroll och hjälptext med gemensam rytm.

Vi delar aldrig din adress.
Ange ett giltigt telefonnummer.
Formulär i sammanhang
Label fristående
Kod
<Field label="E-post" htmlFor="email" hint="Vi delar aldrig din adress." required>
  <Input id="email" type="email" />
</Field>

Badge

Liten markör för status eller kategori.

StandardNyAktivPilotBeta
Varianter
Kod
<Badge variant="accent">Ny</Badge>

Alert

Meddelanderuta för återkoppling och systemstatus.

Information

Nästa driftfönster är söndag 02:00–04:00.

Sparat

Ändringarna är sparade.

Kontrollera uppgifterna

Två brukare saknar kontaktperson.

Kunde inte spara

Försök igen om en stund.
Varianter
Kod
<Alert variant="success" title="Sparat">Ändringarna är sparade.</Alert>

Divider

Avgränsare mellan sektioner.

Toner
Kod
<Divider />
<Divider tone="strong" />

Heading & Text

Typografikomponenterna. Hela skalan visas på typografisidan.

Vår tjänst

Stöd som följer med hem

Wera Welltech kombinerar sensorer och rutiner till ett stöd som personalen litar på.

Rubrik och brödtext tillsammans
Kod
<Heading level={3}>Rubrik</Heading>
<Text tone="muted">Brödtext</Text>