PlaceholderContainer

PlaceholderContainer is a component for displaying content with an image, text content, and action controls.

§Direction

PlaceholderContainer has row and column directions for the content layout. To manage it, use the direction property. The default size is row.

§Size

Use the size property to manage the PlaceholderContainer size. The default size is l. The possible values are s, m, l, and promo. The promo value sets the full width of the content section without the minimum content height and a larger title size.

§Action controls

PlaceholderContainer can render button controls or an array of buttons. To display it, use the actions property.

You can also render custom controls:

§Image and content

The image property enables configuring the image src and alt settings or a React node.

The PlaceholderContainer content contains from the title and description sections, which you can set with the appropriate properties. To render custom content, use the content property.

<PlaceholderContainer
  title="Sample with custom content"
  description="Some description for PlaceholderContainer component demo"
  direction="row"
  size="s"
  align="center"
  image={
    <svg width="230" height="230" viewBox="0 0 230 230" xmlns="http://www.w3.org/2000/svg">
      <g>
        <rect fill="#DDDDDD" height="100%" transform="matrix(1 0 0 1 0 0)" width="100%" />
        <text
          fill="#999999"
          fontFamily="Sans-serif"
          fontSize="16"
          strokeWidth="0"
          textAnchor="middle"
          transform="matrix(1.88041 0 0 1.88041 -48.1289 -81.7475)"
          x="86.49"
          y="114"
        >
          1:1
        </text>
      </g>
    </svg>
  }
  content={
    <div>
      <h3>There is any custom title here</h3>
      <p>
        You can add <strong>here</strong> any long text with custom content and use custom content
        size for displaying very long texts.
      </p>
    </div>
  }
/>

§Align

To manage the alignment of the content inside the parent container, use the align property. The default value is center.

§Properties