Finanzchef24 Design System
  • Design Principles
    Utilities
  • isTouchDevice
    Styles
  • Color
  • Layer
  • Link
  • Spacings
  • Text
    Layouts
  • Center
  • Inline
  • Stack
  • Switcher
    Atoms/Molecules
  • Alert
  • AutocompleteInput
  • Badge
  • BoxedCollapsible
  • Breadcrumbs
  • Button
  • Card
  • Checkbox
  • CheckboxGroup
  • Chip
  • Collapsible
  • CollapsibleStateContainer
  • Dash
  • DataSummary
  • Dialog
  • Divider
  • DropdownMenu
  • DropdownMenuItem
  • EkomiFlag
  • EkomiRating
  • ErrorSummary
  • FieldWithAffirmationMark
  • Filter
  • FooterLink
  • FooterLinks
  • FormDescription
  • FormError
  • FormField
  • FormInput
  • FormInputAffix
  • FormInputDate
  • FormInputGroup
  • FormLabel
  • FormSelect
  • FormTextarea
  • GuidanceStepper
  • IconButton
  • IconCircle
  • Icons
  • ImportanceIndicator
  • IndustryIcons
  • InfoBox
  • InputBox
  • InsuranceIcons
  • InsurerIcons
  • LabelledCheckbox
  • LabelledIconRadio
  • LabelledRadio
  • ListItem
  • Logo
  • Markdown
  • PhoneContactLink
  • PlayfulCheckbox
  • PlayfulFormDescription
  • PlayfulInput
  • PlayfulInputPhone
  • PlayfulRadio
  • PlayfulSelect
  • ProgressBar
  • Radio
  • RadioGroup
  • Rating
  • ResponsiveContainer
  • ResponsiveHelper
  • ResponsiveSwitch
  • Table
  • ThreeDotLoader
  • VerticalFlag
  • VisuallyHidden
    Molecules
  • AccountLink
  • AddressSearch
  • Calendar
  • Navigation
  • ProductTypeCard
  • TimeSlotPicker
    Organisms
  • DateTimePicker
  • Footer
  • Header

Inline

If you want to learn more about the spacing components take a look at this article.

Example

import Spacings from "@finanzchef24gmbh/design-system/spacings";

<Spacings.Inline scale="medium">
  <Card />
  <Card />
  <Card />
</Spacings.Inline>;

Properties

PropsTypeRequiredValuesDefault
scaleString-all Spacing.scales values are allowedsmall
alignItemsoneOf-['stretch', 'flexStart', 'flexEnd', 'center']stretch
childrenPropTypes.node---