mittwald Flow Logo

Components

AccentBox

Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben.GitHub

Tipps & Tricks für mehr Klimaschutz

Dein Cronjob läuft in weniger als 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen. Falls das nicht unbedingt nötig ist, kannst du ein längeres Intervall wählen - das spart Energie und schützt das KlimaBlogartikel zu mehr Nachhaltigkeit

Playground

In der <AccentBox /> lassen sich Inhalte platzieren, die sich bewusst vom restlichen Content abheben sollen. Die Component sorgt dabei für die Hintergrundfarbe und das Padding. Die Inhalte innerhalb der Box können mithilfe von Struktur-Components wie Section oder Flex angeordnet werden.

Tipps & Tricks für mehr Klimaschutz

Dein Cronjob läuft in weniger als 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen. Falls das nicht unbedingt nötig ist, kannst du ein längeres Intervall wählen - das spart Energie und schützt das KlimaBlogartikel zu mehr Nachhaltigkeit
import {
  AccentBox,
  Heading,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<AccentBox>
  <Section>
    <Heading>Tipps & Tricks für mehr Klimaschutz</Heading>
    <Text>
      Dein Cronjob läuft in weniger als
      5-Minuten-Intervallen. Das verbraucht mehr Ressourcen.
      Falls das nicht unbedingt nötig ist, kannst du ein
      längeres Intervall wählen - das spart Energie und
      schützt das Klima
    </Text>
    <Link href="#" target="_blank">
      Blogartikel zu mehr Nachhaltigkeit
    </Link>
  </Section>
</AccentBox>

Color

Je nach Anwendungsfall stehen für die AccentBox die Colors Blue, Green, Neutral und Gradient zur Verfügung. Blue ist dabei als Standard definiert.

Blue, Green und Neutral

Die Colors haben unterschiedliche Wirkungen auf den User und sollten daher gezielt entsprechend der gewünschten Wirkung eingesetzt werden.

Bei Verwendung der Color Green erscheinen enthaltene Components automatisch in der Dark-Variante (siehe Light und Dark Color) dargestellt, um die nötigen Kontraste sicherzustellen.

Hilf uns, Flow noch besser zu machen!

Fehlt dir eine bestimmte Component oder etwas anderes? Hast du Feedback? Dann teile es uns gerne auf GitHub mit.Feedback zu Flow geben

Tipps & Tricks für mehr Klimaschutz

Dein Cronjob läuft in weniger als 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen. Falls das nicht unbedingt nötig ist, kannst du ein längeres Intervall wählen - das spart Energie und schützt das KlimaBlogartikel zu mehr Nachhaltigkeit
250 msDateioperationen
Geringer Optimierungsbedarf
100 msServeroperationen
Optimierungsbedarf
import {
  AccentBox,
  BigNumber,
  ColumnLayout,
  Flex,
  Heading,
  Icon,
  Link,
  Rating,
  Section,
  Text,
} from "@mittwald/flow-react-components";
import {
  IconLeaf,
  IconMoodSmileBeam,
} from "@tabler/icons-react";

<Section>
  <AccentBox color="blue">
    <Icon>
      <IconMoodSmileBeam />
    </Icon>
    <Section>
      <Heading>
        Hilf uns, Flow noch besser zu machen!
      </Heading>
      <Text>
        Fehlt dir eine bestimmte Component oder etwas
        anderes? Hast du Feedback? Dann teile es uns gerne
        auf GitHub mit.
      </Text>
      <Link href="#" target="_blank">
        Feedback zu Flow geben
      </Link>
    </Section>
  </AccentBox>

  <AccentBox color="green">
    <Icon>
      <IconLeaf />
    </Icon>
    <Section>
      <Heading>Tipps & Tricks für mehr Klimaschutz</Heading>
      <Text>
        Dein Cronjob läuft in weniger als
        5-Minuten-Intervallen. Das verbraucht mehr
        Ressourcen. Falls das nicht unbedingt nötig ist,
        kannst du ein längeres Intervall wählen - das spart
        Energie und schützt das Klima
      </Text>
      <Link href="#" target="_blank">
        Blogartikel zu mehr Nachhaltigkeit
      </Link>
    </Section>
  </AccentBox>

  <ColumnLayout>
    <AccentBox color="neutral">
      <Flex direction="column" gap="s" align="center">
        <BigNumber>
          <Text>250 ms</Text>
          <Text>Dateioperationen</Text>
        </BigNumber>
        <Rating value={4} />
        <Text>
          <small>Geringer Optimierungsbedarf</small>
        </Text>
      </Flex>
    </AccentBox>

    <AccentBox color="neutral">
      <Flex direction="column" gap="xs" align="center">
        <BigNumber>
          <Text>100 ms</Text>
          <Text>Serveroperationen</Text>
        </BigNumber>
        <Rating value={2} />
        <Text>
          <small>Optimierungsbedarf</small>
        </Text>
      </Flex>
    </AccentBox>
  </ColumnLayout>
</Section>

Gradient

Eine AccentBox mit einem Gradient sticht besonders hervor und eignet sich daher gut für aufmerksamkeitsstarke Inhalte wie Werbemaßnahmen. Wichtig ist dabei, dass der Inhalt ausreichend Kontrast zum Hintergrund aufweist – gegebenenfalls sollte mit der Light oder Dark Color gearbeitet werden.

mStudio Extension selber entwickeln

Veröffentliche eigene Features im mStudio
Contributor Landingpage
import {
  AccentBox,
  Color,
  Flex,
  Heading,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<AccentBox color="gradient">
  <Flex align="center" wrap="wrap" gap="m">
    <Flex direction="column" grow>
      <Heading size="l">
        <Color color="violet">mStudio Extension</Color>{" "}
        selber entwickeln
      </Heading>
      <Text>
        <b>
          <Color>
            Veröffentliche{" "}
            <Color color="violet">eigene Features</Color> im
            mStudio
          </Color>
        </b>
      </Text>
    </Flex>
    <Link target="_blank" href="#" color="dark">
      Contributor Landingpage
    </Link>
  </Flex>
</AccentBox>

Kombiniere mit ...

Icon

Ein direkt in der AccentBox platziertes Icon wird als dekoratives Hintergrundbild angezeigt.

Tipps & Tricks für mehr Klimaschutz

Dein Cronjob läuft in weniger als 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen. Falls das nicht unbedingt nötig ist, kannst du ein längeres Intervall wählen - das spart Energie und schützt das KlimaBlogartikel zu mehr Nachhaltigkeit
import {
  AccentBox,
  Heading,
  Icon,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";
import { IconLeaf } from "@tabler/icons-react";

<AccentBox>
  <Icon>
    <IconLeaf />
  </Icon>
  <Section>
    <Heading>Tipps & Tricks für mehr Klimaschutz</Heading>
    <Text>
      Dein Cronjob läuft in weniger als
      5-Minuten-Intervallen. Das verbraucht mehr Ressourcen.
      Falls das nicht unbedingt nötig ist, kannst du ein
      längeres Intervall wählen - das spart Energie und
      schützt das Klima
    </Text>
    <Link href="#" target="_blank">
      Blogartikel zu mehr Nachhaltigkeit
    </Link>
  </Section>
</AccentBox>

LayoutCard

Befindet sich eine AccentBox als erstes Element innerhalb einer LayoutCard, füllt sie die gesamte Größe der LayoutCard aus.

mStudio Extension selber entwickeln

Veröffentliche eigene Features im mStudio
Contributor Landingpage
import {
  AccentBox,
  Color,
  Flex,
  Heading,
  LayoutCard,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<LayoutCard>
  <AccentBox color="gradient">
    <Flex align="center" wrap="wrap" gap="m">
      <Flex direction="column" grow>
        <Heading size="l">
          <Color color="violet">mStudio Extension</Color>{" "}
          selber entwickeln
        </Heading>
        <Text>
          <b>
            <Color>
              Veröffentliche{" "}
              <Color color="violet">eigene Features</Color>{" "}
              im mStudio
            </Color>
          </b>
        </Text>
      </Flex>
      <Link target="_blank" href="#" color="dark">
        Contributor Landingpage
      </Link>
    </Flex>
  </AccentBox>
</LayoutCard>

Overview