---
title: Block quote
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.944Z
checksum: e276f4e25ce9c62881c14c2b94a0d457be21f54cfa55f6585fcce51fe9ece83b
---

# Block quote

## Import

```tsx
import { Blockquote } from '@dnb/eufemia/elements'
```

## Description

The blockquote element is used to indicate the quotation of a large section of text from another source.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/elements/blockquote)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/layout-and-typography/elements/blockquote)


## Demos

### Default Blockquote


```tsx
render(<Blockquote data-visual-test="blockquote-default">
      Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum
      tractatos ei quo.
      <cite>Cite Reference</cite>
    </Blockquote>)
```


### Blockquote with graphics on top


```tsx
render(<Blockquote data-visual-test="blockquote-top" direction="vertical">
      Dis leo aliquam neque aptent nascetur metus ad ut eu Choro{' '}
      <Anchor href="/web/layout-and-typography/elements#blockquote">
        vivendum tractatos
      </Anchor>{' '}
      ei quo.
    </Blockquote>)
```


### Blockquote with transparent background (`no-background`)


```tsx
render(<Blockquote data-visual-test="blockquote-no-background" noBackground>
      Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum
      tractatos ei quo. Luctus cursus odio hendrerit ullamcorper adipiscing
      est dis curabitur sit.
      <cite>
        <Anchor href="/web/layout-and-typography/elements#blockquote" target="_blank">
          Cite Reference
        </Anchor>
      </cite>
    </Blockquote>)
```


### Blockquote with transparent background and graphics on top


```tsx
render(<Blockquote data-visual-test="blockquote-top-no-background" noBackground direction="vertical">
      Dis leo aliquam neque aptent nascetur metus ad ut eu Choro{' '}
      <Anchor href="/web/layout-and-typography/elements#blockquote">
        vivendum tractatos
      </Anchor>{' '}
      ei quo.
    </Blockquote>)
```


### Blockquote with [Code](/web/layout-and-typography/elements/code/)


```tsx
render(<Blockquote data-visual-test="blockquote-with-code">
      <Code>display</Code> and <Code>background-color</Code> are CSS
      properties
    </Blockquote>)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "noBackground": {
      "doc": "Hides the blockquote background by making it transparent.",
      "type": "boolean",
      "status": "optional"
    },
    "direction": {
      "doc": "Determines the flow direction of the content inside of blockquote. Can be either `horizontal` or `vertical`. Defaults to `horizontal`.",
      "type": [
        "\"horizontal\"",
        "\"vertical\""
      ],
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```