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
-
spaceYoptional
Description
Set the vertical space between elements.
Type
string
Default
space-y-0
textAlignmentoptional
Description
Controls the alignment of text.
Type
string
Default
text-left
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