Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Video Preview
Definition
VideoPreview displays a graphic interface as a video preview.
This component is build using the composition between the following parts:
- VideoPreviewImage which displays the video image preview
- VideoPreviewTitle displays the title
- VideoPreviewSubtitle displays the subtitle
- VideoPreviewTag displays the tag
- VideoPreviewTimer displays the video timer
Video Preview Props
| Name | Use | Type | Definition |
| children | required | React.ReactElement<typeof VideoPreviewImage | typeof ...> | Components to be rendered inside the video preview component. |
| large | optional | boolean | Sets the video preview size as large. |
| small | optional | boolean | Sets the video preview size as small. |
| className | optional | string | Additional or alternative styling. |
| onClick | optional | () => void | Function which will be triggered when user clicks on the play button. |
VideoPreviewImage
Used to show default image.
VideoPreviewImage Props
| Name | Use | Type | Definition |
| className | optional | string | Add class to video preview image |
Sizes
VideoPreview component can be build with the following sizes and variants
Medium (default)
Large
Small
With Tag
Tag
With Title
Tag
With Timer
Tag
With Subtitle
Available on large variant.
Tag