File EXPERIMENTAL

On this page

This component is based on Cell and therefore follows its rules on padding in horizontal mode. Reset padding-inline if you do not need it.

Horizontal

Cell view has 3 size presets, same as Cell component it is built upon.

s m l

file.png

30 MB

file.png

30 MB

file.png

30 MB

file.png

30 MB

file.png

30 MB

file.png

30 MB

Vertical

Card size has min/max width built-in according to specs.

m l

file.png

30 MB

file.png

30 MB

file.png

30 MB

file.png

30 MB

file.png

30 MB

file.png

Error

Texts

Long file names are allowed by default but can be trimmed using line-clamp CSS.

A very very long file name that spans many many lines.png

Some extra info about this file can also be very long and span multiple lines

A very very long file name that spans many many lines.png

You can use native line-clamp CSS rule to keep text under a certain number of lines

A very very long file name that spans many many lines.png

Some extra info about this file can also be very long and span multiple lines

A very very long file name that spans many many lines.png

You can use native line-clamp CSS rule to keep text under a certain number of lines

Transitions

Transitions are handled using Slides component which is built-in for the content but needs to be manually applied for text.

Select file

Server unavailable

Select file

Server unavailable

Preview

Elements that follow an IMG tag automatically apply darkening and blur effect to the underlying image.

With file selector

Using pipe for automatic image preview.

Upload a document

InputFiles

Use extra CSS for the grid to allow height transition.

GitHub StackBlitz