#Typography

Display 01

Display 02

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur, eaque atque optio tempore eveniet possimus facere, suscipit harum aperiam fugiat velit iusto provident laborum natus inventore exercitationem nemo maxime dolores.

Unordered list item 1
Unordered list item 2
Unordered list item 3

Small textlabelLink

#Button

Show code

<Button>
  Click me
</Button>
<Button dimension="small">
  Click me
</Button>
<Button dimension="x-small">
  Click me
</Button>

Show code

<Button variant="secondary">
  Click me
</Button>
<Button
  variant="secondary"
  dimension="small"
>
  Click me
</Button>
<Button
  variant="secondary"
  dimension="x-small"
>
  Click me
</Button>

Show code

<Button disabled>
  Click me
</Button>
<Button
  dimension="small"
  disabled
>
  Click me
</Button>
<Button
  dimension="x-small"
  disabled
>
  Click me
</Button>

Show code

<Button iconLeft="angleRight">
  Click me
</Button>
<Button
  iconLeft="angleRight"
  dimension="small"
>
  Click me
</Button>
<Button
  iconLeft="angleRight"
  dimension="x-small"
>
  Click me
</Button>

Show code

<Button
  variant="secondary"
  iconRight="angleRight"
>
  Click me
</Button>
<Button
  variant="secondary"
  iconRight="angleRight"
  dimension="small"
>
  Click me
</Button>
<Button
  variant="secondary"
  iconRight="angleRight"
  dimension="x-small"
>
  Click me
</Button>

#Icon Button

Show code

<IconButton
  icon="angleRight"
  label="Go right"
/>
<IconButton
  icon="angleRight"
  dimension="small"
  label="Go right"
/>
<IconButton
  icon="angleRight"
  dimension="x-small"
  label="Go right"
/>

Show code

<IconButton
  icon="angleRight"
  label="Go right"
  variant="secondary"
/>
<IconButton
  icon="angleRight"
  dimension="small"
  label="Go right"
  variant="secondary"
/>
<IconButton
  icon="angleRight"
  dimension="x-small"
  label="Go right"
  variant="secondary"
/>

#Glyph

Show code

<Glyph
  type="car"
  dimension="small"
/>
<Glyph type="car"/>
<Glyph
  type="car"
  dimension="large"
/>

#Icons

Show code

<div className="docs-icon">
  <Icon
    type="close"
    aria-label="Close"
  />
</div>
<div className="docs-icon">
  <Icon
    type="question"
    aria-label="Question mark"
  />
</div>
<div className="docs-icon">
  <Icon
    type="questionCircle"
    aria-label="Question mark"
  />
</div>
<div className="docs-icon">
  <Icon
    type="angleLeft"
    aria-label="Go left"
  />
</div>
<div className="docs-icon">
  <Icon
    type="angleRight"
    aria-label="Go right"
  />
</div>
<div className="docs-icon">
  <Icon
    type="angleDown"
    aria-label="Go down"
  />
</div>
<div className="docs-icon">
  <Icon
    type="calendar"
    aria-label="Calendar"
  />
</div>
<div className="docs-icon">
  <Icon
    type="search"
    aria-label="Search"
  />
</div>
<div className="docs-icon">
  <Icon
    type="check"
    aria-label="Check"
  />
</div>
<div className="docs-icon">
  <Icon
    type="dot"
    aria-label="Dot"
  />
</div>
<div className="docs-icon">
  <Icon
    type="car"
    aria-label="Car"
  />
</div>
<div className="docs-icon">
  <Icon
    type="creditCard"
    aria-label="Check"
  />
</div>
<div className="docs-icon">
  <Icon
    type="steeringWheel"
    aria-label="Steering wheel"
  />
</div>
<div className="docs-icon">
  <Icon
    type="users"
    aria-label="Users"
  />
</div>
<div className="docs-icon">
  <Icon
    type="mail"
    aria-label="E-mail address"
  />
</div>
<div className="docs-icon">
  <Icon
    type="phone"
    aria-label="Phone number"
  />
</div>
<div className="docs-icon">
  <Icon
    type="spinner"
    aria-label="Loading"
  />
</div>
<div className="docs-icon">
  <Icon
    type="divider"
    aria-label="Divider"
  />
</div>
<div className="docs-icon">
  <Icon
    type="globe"
    aria-label="Globe"
  />
</div>
<div className="docs-icon">
  <Icon
    type="stars"
    aria-label="Stars"
  />
</div>
<div className="docs-icon">
  <Icon
    type="eye"
    aria-label="Eye"
  />
</div>
<div className="docs-icon">
  <Icon
    type="eyeSlashed"
    aria-label="Eye slashed"
  />
</div>
<div className="docs-icon">
  <Icon
    type="discount"
    aria-label="Discount"
  />
</div>
<div className="docs-icon">
  <Icon
    type="envelope"
    aria-label="Envelope"
  />
</div>

#Icon Title

Your Car

Skoda Fabia

Payment method

Skoda Fabia

SE Comfort / 2023 / Benzine 51 kW

Show code

<IconTitle icon="car">
  <IconTitleSubtitle>
    Your Car
  </IconTitleSubtitle>
  <IconTitleTitle>
    Skoda Fabia
  </IconTitleTitle>
</IconTitle>
<IconTitle icon="creditCard">
  <IconTitleTitle>
    Payment method
  </IconTitleTitle>
</IconTitle>
<IconTitle icon="car">
  <IconTitleTitle>
    Skoda Fabia
  </IconTitleTitle>
  <IconTitleSubtitle>
    SE Comfort / 2023 / Benzine 51 kW
  </IconTitleSubtitle>
</IconTitle>

#Description list

Item titel: Item

Show code

<DescriptionList>
  <DescriptionListItem label="Item titel">
    <p>
      Item
    </p>
  </DescriptionListItem>
</DescriptionList>

Item titel: Item

Show code

<DescriptionList dimension="large">
  <DescriptionListItem label="Item titel">
    <p>
      Item
    </p>
  </DescriptionListItem>
</DescriptionList>

#Stepper

Nog te voltooien
Step 1
Nog te voltooien
Step 2
Nog te voltooien
Step 3
Nog te voltooien
Step 4

Show code

<Stepper>
  <StepperStep
    to="/skoda/components/step-1"
    preventScrollReset
  >
    Step 1
  </StepperStep>
  <StepperStep
    to="/skoda/components"
    preventScrollReset
  >
    Step 2
  </StepperStep>
  <StepperStep
    to="/skoda/components/step-3"
    preventScrollReset
  >
    Step 3
  </StepperStep>
  <StepperStep
    to="/skoda/components/step-4"
    preventScrollReset
  >
    Step 4
  </StepperStep>
</Stepper>

#Card

Header

Body

Summary

Details Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium ea velit eligendi, unde consectetur. Laudantium ab, eveniet cumque nam unde sapiente, voluptatum nemo officiis recusandae sint molestiae porro tempora.

Show code

<Card>
  <CardHeader>
    Header
  </CardHeader>
  <CardBody>
    Body
  </CardBody>
</Card>
<Card>
  <CardDetails title="Summary">
    Details Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium ea velit eligendi
    , unde consectetur. Laudantium ab, eveniet cumque nam unde sapiente, voluptatum nemo officiis recusa
    ndae sint molestiae porro tempora.
  </CardDetails>
</Card>

Burgerlijke aansprakelijkheid

Basis dekking voor schade die u toebrengt aan anderen of hun eigendommen tijdens een ongeval waarbij u betrokken bent.

Show code

<Card dimension="large">
  <CardHeader variant="gradient">
    <h1>
      Burgerlijke aansprakelijkheid
    </h1>
  </CardHeader>
  <CardBody>
    <p>
      Basis dekking voor schade die u toebrengt aan anderen of hun eigendommen tijdens een ongeval waarbij
       u betrokken bent.
    </p>
  </CardBody>
</Card>

Burgerlijke aansprakelijkheid

€ 100,00maand

Basis dekking voor schade die u toebrengt aan anderen of hun eigendommen tijdens een ongeval waarbij u betrokken bent.

Personen

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? Nostrum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptatibus natus modi iusto cumque.

Mobiliteit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? Nostrum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptatibus natus modi iusto cumque.

Mini Omnium

€ 100,00maand

Extra bescherming tegen diefstal, brand, glasbreuk en natuurlijke schade, ideaal voor een breder scala aan risico's.

Personen

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? Nostrum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptatibus natus modi iusto cumque.

Mobiliteit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? Nostrum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptatibus natus modi iusto cumque.

Aanbevolen voor u

Full Omnium

BasicPlusPremium

€ 100,00maand

Maximale gemoedsrust met uitgebreide dekking voor alle risico's, inclusief schade door eigen fouten zoals botsingen.

36 maanden behoud van waarde
€0 vrijstelling

Personen

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? Nostrum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptatibus natus modi iusto cumque.

Mobiliteit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? Nostrum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptatibus natus modi iusto cumque.

Show code

<Container variant="wide">
  <div className="docs-card-wrapper">
    <ProductCard>
      <ProductCardSticky
        title="Burgerlijke aansprakelijkheid"
        amount={[object Object]}
        frequency="Monthly"
      />
      <ProductCardHeader>
        <ProductCardTitle>
          Burgerlijke aansprakelijkheid
        </ProductCardTitle>
        <hr/>
        <Amount
          amount={[object Object]}
          frequency="Monthly"
        />
        <p>
          Basis dekking voor schade die u toebrengt aan anderen of hun eigendommen tijdens een ongeval waarbij
           u betrokken bent.
        </p>
        <Button variant="secondary">
          Kies dit plan
        </Button>
      </ProductCardHeader>
      <ProductCardDetails$1 title="Personen">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? No
          strum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptati
          bus natus modi iusto cumque.
        </p>
      </ProductCardDetails$1>
      <ProductCardDetails$1 title="Mobiliteit">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? No
          strum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptati
          bus natus modi iusto cumque.
        </p>
      </ProductCardDetails$1>
    </ProductCard>
    <ProductCard>
      <ProductCardSticky
        title="Mini Omnium"
        amount={[object Object]}
        frequency="Monthly"
      />
      <ProductCardHeader>
        <ProductCardTitle>
          Mini Omnium
        </ProductCardTitle>
        <hr/>
        <Amount
          amount={[object Object]}
          frequency="Monthly"
        />
        <p>
          Extra bescherming tegen diefstal, brand, glasbreuk en natuurlijke schade, ideaal voor een breder sca
          la aan risico's.
        </p>
        <Button variant="secondary">
          Kies dit plan
        </Button>
      </ProductCardHeader>
      <ProductCardDetails$1 title="Personen">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? No
          strum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptati
          bus natus modi iusto cumque.
        </p>
      </ProductCardDetails$1>
      <ProductCardDetails$1 title="Mobiliteit">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? No
          strum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptati
          bus natus modi iusto cumque.
        </p>
      </ProductCardDetails$1>
    </ProductCard>
    <ProductCard isRecommended>
      <ProductCardSticky
        title="Full Omnium"
        amount={[object Object]}
        frequency="Monthly"
      />
      <ProductCardHeader>
        <ProductCardTitle>
          Full Omnium
        </ProductCardTitle>
        <RadioTabsMenu
          label="Choose a full omnium coverage"
          dimension="small"
          fitted
        >
          <RadioTabItem
            name="omnium-option-sm"
            value="basic"
          >
            Basic
          </RadioTabItem>
          <RadioTabItem
            name="omnium-option-sm"
            value="plus"
          >
            Plus
          </RadioTabItem>
          <RadioTabItem
            name="omnium-option-sm"
            value="premium"
            defaultChecked
          >
            Premium
          </RadioTabItem>
        </RadioTabsMenu>
        <Amount
          amount={[object Object]}
          frequency="Monthly"
        />
        <p>
          Maximale gemoedsrust met uitgebreide dekking voor alle risico's, inclusief schade door eigen fouten
          zoals botsingen.
        </p>
        <Button variant="primary">
          Kies dit plan
        </Button>
        <IconList variant="card">
          <IconListItem icon="stars">
            <strong>
              36 maanden
            </strong>
             behoud van waarde
          </IconListItem>
          <IconListItem icon="stars">
            <strong>
              €0
            </strong>
             vrijstelling
          </IconListItem>
        </IconList>
      </ProductCardHeader>
      <ProductCardDetails$1 title="Personen">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? No
          strum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptati
          bus natus modi iusto cumque.
        </p>
      </ProductCardDetails$1>
      <ProductCardDetails$1 title="Mobiliteit">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur optio accusantium unde tenetur? No
          strum ratione consequuntur sequi asperiores veritatis nemo sint, vel itaque soluta impedit voluptati
          bus natus modi iusto cumque.
        </p>
      </ProductCardDetails$1>
    </ProductCard>
  </div>
</Container>

Zijn deze gegevens niet correct?

Show code

<IconCard icon="question">
  <p>
    Zijn deze gegevens niet correct?
  </p>
  <Button
    dimension="x-small"
    variant="link"
    onClick={() => {}}
  >
    Contacteer ons
  </Button>
</IconCard>

#Inputs

Show code

<form
  className="docs-v-stack"
  action={undefined}
  id=":R75:"
  method={undefined}
  encType={undefined}
  onSubmit={() => {}}
  onReset={() => {}}
>
  <FormInput
    label="First name"
    scope={[object Object]}
  />
  <FormInput
    label="Value of your car"
    type="number"
    prefixIcon="euro"
    scope={[object Object]}
  />
  <FormInput
    label="Date of delivery"
    type="date"
    scope={[object Object]}
  />
  <FormInput
    label="Insurance office"
    type="search"
    helpText="Only P&V offices will be available"
    scope={[object Object]}
  />
  <FormCombobox
    label="Lease company"
    placeholder="Find your company"
    scope={[object Object]}
    options={[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]}
  />
  <Button type="submit">
    Submit
  </Button>
</form>

#Checkbox

Hello checkbox

Show code

<undefined
  name="example"
  value="hello-check"
>
  Hello checkbox
</undefined>
<undefined
  name="example"
  value="hello-check"
  dimension="large"
>
  Hello checkbox
</undefined>

#Switch

Hello switch

Show code

<Switch
  name="example"
  value="hello-switch"
>
  Hello switch
</Switch>
<Switch
  name="example"
  value="hello-switch"
  labelPosition="left"
>
  Hello switch
</Switch>

#Radiobutton and toggles

Show code

<form
  className="docs-v-stack"
  action={undefined}
  id=":R75H1:"
  method={undefined}
  encType={undefined}
  onSubmit={() => {}}
  onReset={() => {}}
>
  <FormOptionGroup
    label="What is the reason for this new insurance?"
    scope={[object Object]}
    type="radio"
    required
  >
    <FormOptionGroupOption value="replace">
      I want to replace my current vehicle
    </FormOptionGroupOption>
    <FormOptionGroupOption value="new">
      I want a new insurance
    </FormOptionGroupOption>
  </FormOptionGroup>
  <Button type="submit">
    Submit
  </Button>
</form>

Show code

<form
  className="docs-v-stack"
  action={undefined}
  id=":R75H2:"
  method={undefined}
  encType={undefined}
  onSubmit={() => {}}
  onReset={() => {}}
>
  <FormOptionGroup
    label="Do you allready have an insurance?"
    direction="horizontal"
    type="toggle"
    scope={[object Object]}
    required
  >
    <FormOptionGroupOption value="yes">
      Yes
    </FormOptionGroupOption>
    <FormOptionGroupOption value="no">
      No
    </FormOptionGroupOption>
  </FormOptionGroup>
  <Button type="submit">
    Submit
  </Button>
</form>

#Select

Show code

<form
  className="docs-v-stack"
  action={undefined}
  id=":R75H3:"
  method={undefined}
  encType={undefined}
  onSubmit={() => {}}
  onReset={() => {}}
>
  <FormSelect
    label="Select your country"
    placeholder="Choose an option"
    scope={[object Object]}
  >
    <FormSelectItem value="be">
      Belgium
    </FormSelectItem>
    <FormSelectItem value="fr">
      France
    </FormSelectItem>
    <FormSelectItem value="nl">
      Netherlands
    </FormSelectItem>
    <FormSelectItem value="uk">
      United Kingdom
    </FormSelectItem>
  </FormSelect>
  <Button type="submit">
    Submit
  </Button>
</form>

#Tabs (in the form of Radiobutton)

Show code

<form className="docs-v-stack">
  <RadioTabsMenu
    label="Choose a full omnium coverage"
    dimension="small"
  >
    <RadioTabItem
      name="omnium-option-sm"
      value="basic"
    >
      Basic
    </RadioTabItem>
    <RadioTabItem
      name="omnium-option-sm"
      value="plus"
    >
      Plus
    </RadioTabItem>
    <RadioTabItem
      name="omnium-option-sm"
      value="premium"
      defaultChecked
    >
      Premium
    </RadioTabItem>
  </RadioTabsMenu>
  <RadioTabsMenu
    label="Choose a full omnium coverage"
    fitted
    style={[object Object]}
  >
    <RadioTabItem
      name="omnium-option"
      value="basic"
    >
      Basic
    </RadioTabItem>
    <RadioTabItem
      name="omnium-option"
      value="plus"
    >
      Plus
    </RadioTabItem>
    <RadioTabItem
      name="omnium-option"
      value="premium"
      defaultChecked
    >
      Premium
    </RadioTabItem>
  </RadioTabsMenu>
</form>

#Dialog

Show code

<Button onClick={() => {}}>
  Show dialog
</Button>
<Dialog
  onClose={() => {}}
  open={false}
>
  <DialogHeader>
    <h2>
      Dialog title
    </h2>
  </DialogHeader>
  <DialogContent>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi cum voluptatum dicta laboriosam!
      Magni rerum laudantium recusandae velit cupiditate id, quaerat facere voluptates ipsa quo culpa per
      spiciatis distinctio modi impedit?
    </p>
  </DialogContent>
  <DialogFooter>
    <Button
      variant="secondary"
      onClick={() => {}}
    >
      Cancel
    </Button>
    <Button>
      Confirm
    </Button>
  </DialogFooter>
</Dialog>

Show code

<Button onClick={() => {}}>
  Show image dialog
</Button>
<Dialog
  onClose={() => {}}
  open={false}
>
  <DialogImage
    src="https://images-accp01.skoda-insurance.be/documents/1050886/1050441/skoda-support-mobile-img.webp/e07579b5-35eb-230b-c5eb-dae6ec821241?version=1.0&t=1733843113362&download=true"
    alt=""
  />
  <DialogHeader>
    <h2>
      Dialog title
    </h2>
  </DialogHeader>
  <DialogContent>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi cum voluptatum dicta laboriosam!
      Magni rerum laudantium recusandae velit cupiditate id, quaerat facere voluptates ipsa quo culpa per
      spiciatis distinctio modi impedit?
    </p>
  </DialogContent>
  <DialogFooter>
    <Button
      variant="secondary"
      onClick={() => {}}
    >
      Cancel
    </Button>
    <Button>
      Confirm
    </Button>
  </DialogFooter>
</Dialog>

#Header

Hulp nodig?

Jouw contract

Nog te voltooien
Overview
Nog te voltooien
Extra info
Nog te voltooien
Sign

Show code

<Header
  mobileImage="https://images-accp01.skoda-insurance.be/documents/1050886/1050441/skoda-header-mobile-1-img.webp/9bd00315-97bf-1595-3ae4-c2763b927b2a?version=1.0&t=1733843111765&download=true"
  desktopImage="https://images-accp01.skoda-insurance.be/documents/1050886/1050441/skoda-header-desktop-1-img.webp/3c641de2-ccc8-3b04-3695-452cbba6fe64?version=1.0&t=1733843112921&download=true"
>
  <DisplayTitle dimension="large">
    Jouw contract
  </DisplayTitle>
  <Stepper>
    <StepperStep
      to="/skoda/components/overview"
      preventScrollReset
    >
      Overview
    </StepperStep>
    <StepperStep
      to="/skoda/components"
      preventScrollReset
    >
      Extra info
    </StepperStep>
    <StepperStep
      to="/skoda/components/sign"
      preventScrollReset
    >
      Sign
    </StepperStep>
  </Stepper>
</Header>

Hulp nodig?

Show code

<HeaderTop variant="light"/>

#Footer

Show code

<div className="docs-sticky-container">
  <div className="docs-sticky-content"/>
  <StepperNav>
    <StepperNavBack>
      <Button
        variant="secondary"
        iconLeft="angleLeft"
      >
        Back
      </Button>
    </StepperNavBack>
    <StepperNavNext>
      <Button
        variant="primary"
        iconRight="angleRight"
        type="submit"
      >
        Next
      </Button>
    </StepperNavNext>
  </StepperNav>
</div>
<Footer/>

Even over nadenken?

Show code

<div className="docs-sticky-container">
  <div className="docs-sticky-content"/>
  <ProductBanner>
    Even over nadenken?
    <Button
      variant="secondary"
      contrast="dark"
      iconLeft="envelope"
    >
      Bewaar voor later
    </Button>
  </ProductBanner>
</div>
<Footer/>

#Spinner

Loading something …

Show code

<Spinner>
  <p>
    Loading something …
  </p>
</Spinner>
<Spinner label="Accessible loading label"/>

#Loading

Show code

<Button onClick={() => {}}>
  Show loading
</Button>
<LoadingOverlay open={false}>
  <Spinner>
    <p>
      Hold on … 
      <br/>
       We are recalculating the price
    </p>
    <Button onClick={() => {}}>
      Hide loading
    </Button>
  </Spinner>
</LoadingOverlay>

#Progress Bar

Show code

<Button onClick={() => {}}>
  Show progress bar
</Button>
<LoadingOverlay open={false}>
  <Stack>
    <ProgressBar
      duration={20000}
      loadingText="Even geduld..."
    />
    <Button onClick={() => {}}>
      Hide progress bar
    </Button>
  </Stack>
</LoadingOverlay>

#Alert

Request submitted

We have received your request

Heads up

Your session will end in 10 minutes

Something went wrong

There was an issue with your request

Name cannot be empty
E-mail cannot be empty

Service info

Service will not be available this Friday

Task

You have an open task

Show code

<undefined variant="success">
  <AlertTitle>
    Request submitted
  </AlertTitle>
  <AlertText>
    We have received your request
  </AlertText>
</undefined>
<undefined variant="warning">
  <AlertTitle>
    Heads up
  </AlertTitle>
  <AlertText>
    Your session will end in 10 minutes
  </AlertText>
</undefined>
<undefined variant="error">
  <AlertTitle>
    Something went wrong
  </AlertTitle>
  <AlertText>
    There was an issue with your request
  </AlertText>
  <IconList>
    <IconListItem icon="angleRight">
      Name cannot be empty
    </IconListItem>
    <IconListItem icon="angleRight">
      E-mail cannot be empty
    </IconListItem>
  </IconList>
</undefined>
<undefined variant="info">
  <AlertTitle>
    Service info
  </AlertTitle>
  <AlertText>
    Service will not be available this Friday
  </AlertText>
</undefined>
<undefined variant="neutral">
  <AlertTitle>
    Task
  </AlertTitle>
  <AlertText>
    You have an open task
  </AlertText>
</undefined>

#Badge

Neutral

Error

Info

Show code

<Badge>
  Neutral
</Badge>
<Badge variant="error">
  Error
</Badge>
<Badge variant="info">
  Info
</Badge>

Neutral

Error

Info

Show code

<Badge icon="plus">
  Neutral
</Badge>
<Badge
  icon="plus"
  variant="error"
>
  Error
</Badge>
<Badge
  icon="plus"
  variant="info"
>
  Info
</Badge>