Examples
Horizontal file upload status expanded
Drag and drop files here
or
Accepted file types: JPEG, Doc, PDF, PNG
Documentation
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-v6-c-multiple-file-upload | <div> | Initiates the multiple file upload component. Required |
.pf-v6-c-multiple-file-upload__main | <div> | Defines the main section. |
.pf-v6-c-multiple-file-upload__title | <div> | Defines the title. |
.pf-v6-c-multiple-file-upload__title-icon | <div> | Defines the title icon. |
.pf-v6-c-multiple-file-upload__title-text | <div> | Defines the title text. |
.pf-v6-c-multiple-file-upload__title-text-separator | <div> | Defines the title text separator. |
.pf-v6-c-multiple-file-upload__upload | <div> | Defines the upload button. |
.pf-v6-c-multiple-file-upload__info | <div> | Defines the info section. |
.pf-v6-c-multiple-file-upload__status | <div> | Defines the status section. |
.pf-v6-c-multiple-file-upload__status-progress | <div> | Defines the status toggle progress. |
.pf-v6-c-multiple-file-upload__status-progress-icon | <div> | Defines the status toggle progress icon. |
.pf-v6-c-multiple-file-upload__status-progress-text | <div> | Defines the status toggle progress text. |
.pf-v6-c-multiple-file-upload__status-list | <div> | Defines the status item list. |
.pf-v6-c-multiple-file-upload__status-item | <div> | Defines a status item. |
.pf-v6-c-multiple-file-upload__status-item-icon | <div> | Defines the status item icon. |
.pf-v6-c-multiple-file-upload__status-item-main | <div> | Defines the status item main progress section. |
.pf-v6-c-multiple-file-upload__status-item-close | <div> | Defines the status item close button. |
.pf-v6-c-multiple-file-upload__status-item-progress | <div> | Defines the status item progress description. |
.pf-v6-c-multiple-file-upload__status-item-progress-text | <div> | Defines the status item progress description text. |
.pf-v6-c-multiple-file-upload__status-item-progress-size | <div> | Defines the status item progress description size. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--GridTemplateColumns | 1fr | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--Gap | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--TextAlign | center | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--GridTemplateColumns | auto | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--GridTemplateRows | auto | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--GridTemplateAreas | "title"
"upload"
"info" | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--PaddingBlockStart | 2rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--PaddingInlineStart | 2rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--BorderStyle | dashed | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__main--BorderRadius | 16px | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title--Display | grid | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title--GridTemplateColumns | auto | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title--Gap | 1.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text--FontFamily | "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text--FontSize | 1.125rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text--FontWeight | 500 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-icon--FontSize | 1.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text-separator--Display | block | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text-separator--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily | "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text-separator--FontSize | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight | 400 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__info--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__info--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__info--MarginBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle | dashed | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns | fit-content(100%) | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__main--TextAlign | start | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns | 1fr auto | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas | "title upload"
"info upload" | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__main--Gap | 0.5rem 1.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns | auto 1fr | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display | inline | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart | 0 | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily | "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight | 500 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart | 0 | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns | auto 1fr | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-progress--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-progress-icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns | auto 1fr auto | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item-progress--GridTemplateColumns | fit-content(100%) max-content | ||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item-progress--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item-progress-text--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-multiple-file-upload | --pf-v6-c-multiple-file-upload__status-item-progress-size--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload--GridTemplateColumns | fit-content(100%) | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__main--TextAlign | start | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__main--GridTemplateColumns | 1fr auto | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__main--GridTemplateAreas | "title upload"
"info upload" | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__main--Gap | 0.5rem 1.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title--GridTemplateColumns | auto 1fr | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title-icon--FontSize | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title-text--FontSize | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily | "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title-text-separator--Display | inline | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart | 0 | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title-text-separator--FontSize | 1rem | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight | 500 | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-horizontal | --pf-v6-c-multiple-file-upload__info--MarginBlockStart | 0 | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-drag-over | --pf-v6-c-multiple-file-upload__main--BorderStyle | dashed | ||
| ||||
| .pf-v6-c-multiple-file-upload.pf-m-drag-over | --pf-v6-c-multiple-file-upload__main--BorderColor | (In light theme) #0066cc | ||
| ||||