Layout

Block

Layout component for more control over stacked elements.

Three Cards wrapped in a Block container to extend vertical spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus tempor lorem non est congue blandit.

Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

Import Block

Tremor exports one Block component.

import { Block } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { Block } from "@tremor/react";

export default () => (
  <Block
    maxWidth = "max-w-none"
    spaceY="space-y-0"
    textAlignment="text-left"
    truncate={false}
    marginTop="mt-0"
  />
);

Usage example

The example below shows a composition using the Block component to space the items as well as grouping texts together.

MaxBenito

7 transactions

EUR 54.6

o.m.k am Hohen Markt

12 transactions

EUR 146.2

import {
    Card, Block, Flex, Icon, Text, Bold,
} from '@tremor/react';
import { SwitchHorizontalIcon } from '@heroicons/react/solid';

export default () => (
  <Card maxWidth="max-w-sm">
      <Block spaceY="space-y-6">
          <Flex justifyContent="justify-start" spaceX="space-x-4" truncate={ true }>
              <Icon
                  variant="light"
                  icon={ SwitchHorizontalIcon }
                  size="md"
                  color="orange"
              />
              <Block truncate={ true }>
                  <Text truncate={ true }>
                      <Bold>
                          MaxBenito
                      </Bold>
                  </Text>
                  <Text truncate={ true }>
                      7 transactions
                  </Text>
              </Block>
              <Text>
                  EUR 54.6
              </Text>
          </Flex>
          <Flex justifyContent="justify-start" spaceX="space-x-4" truncate={ true }>
              <Icon
                  variant="light"
                  icon={ SwitchHorizontalIcon }
                  size="md"
                  color="orange"
              />
              <Block truncate={ true }>
                  <Text truncate={ true }>
                      <Bold>
                          o.m.k am Hohen Markt
                      </Bold>
                  </Text>
                  <Text truncate={ true }>
                      12 transactions
                  </Text>
              </Block>
              <Text>
                  EUR 146.2
              </Text>
          </Flex>
      </Block>
  </Card>
);

API Reference: Block

maxWidthoptional
Description: Set the maximum width of the component.
Type: string
Default: -
Values

spaceYoptional
Description: Set the vertical space between elements.
Type: string
Default: space-y-0
Values

textAlignmentoptional
Description: Controls the alignment of text.
Type: string
Default: text-left
Values

truncateoptional
Description: Control the truncate behavior of the element.
Type: boolean
Default: false
Values: true, false

marginTopoptional
Description: Controls the top margin.
Type: string
Default: mt-0
Values

Tracker ColGrid