Flow

Components

IllustratedMessage

Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.GitHub

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.

Beispiel

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconApp } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage>
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>

Colors

Negative

Kein Zugriff

Du hast keine Berechtigung, um auf diese Seite zuzugreifen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconDanger } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage color="negative">
  <IconDanger />
  <Heading>Kein Zugriff</Heading>
  <Text>
    Du hast keine Berechtigung, um auf diese Seite
    zuzugreifen.
  </Text>
  <Button>Zum Dashboard</Button>
</IllustratedMessage>

Dark

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconApp } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage color="dark">
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>

Light

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconApp } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage color="light">
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>
Feedback geben