New 'media' component

Patterns Released patterns
1

Hi everyone,

We just released a media component to help you with image and videos. This can work standalone or accompanying your content. We have provided some floating classes to help you scale and position images. Enjoy!

https://nswdesignsystem.surge.sh/components/media/index.html

Designed by Amy Howards, Developed by Anna Yeshtukova

Cheers,
Ben

1 Like
2

Looks good. A couple of comments/questions:

  1. How do you propose to handle transcripts for video? Generally this would be included as an accessibility feature. The video component has a caption field but none for video. This might be worth considering.
  2. Nice to see all of those responsive images with different widths. They look good. Sometime and editor might want to place something which is indeed a fixed width rather than responsive. eg. a small image such as a logo. The intention would be for it to stay at that width even on mobile devices. ie. it doesn’t blow up to 100%. This is another possible use case worth considering. So from an implementation POV you could support responsive images and fixed width ones as well. You may consider this is a bit OTT but could be of value.
3

Hi Murray,

For video transcripts, that will have to sit outside of this component. What media component provides though is a figcaption subcomponent.

Thanks for the suggestion of adding a fixed with we will look into providing a modifier for that. In the instance that a fixed width is needed, I would recommend to leave out our media class and go with a inline html attribute as alternative.

Cheers,
Ben