file
The .file
element is a simple
interactive label that wraps an <input type="file">
. It comprises several sub-elements:
-
.file
the main container-
.file-label
the actual interactive and clickable part of the element-
.file-input
the native file input, hidden for styling purposes -
.file-cta
the upload call-to-action-
.file-icon
an optional upload icon -
.file-label
the "Choose a file…" text
-
-
.file-name
a container for the chosen file name
-
-
Modifiers
With the .has-name
modifier combined with the .file-name
element
You can move the CTA to the
right side with the .is-right
modifier.
You can also
expand the name to fill up the space with the .is-fullwidth
modifier.
You can have a
boxed block with the .is-boxed
modifier.
You can
combine .has-name
and .is-boxed
.
Colors: You can style the file element by appending one of the 10 color modifiers: