New Library: Bootstrap-inspired Cards

One of the things I'd like to do with h5p is create stylized "grouped content" that can be copied and used in other libraries like Course Presentations and Interactive Videos.

Currently, each content element is treated separatly, so if I was looking to copy/paste a group of content that includes shapes, links, text, images, etc., I would need to copy each element at a time.

One often repeated grouping of elements (or content layout) is Cards (Material Design and Bootstrap). Cards offer authors the ability to create easy-to-understand content layouts that can include images, headings, text, or buttons. Cards are a common way to present information and I find that they look good in course presentations.

Here is a card layout that I've created in a Course Presentation to illustrate my point: link

I hope you can agree, the card is visually appealing way to layout the content in that slide. The problems with creating a card this way:

1. not possible to copy all elements that make up the card all at once.
2. not easy to reposition, resize, or adjust the card and its content.
3. card is not responsive
4. takes a lot of time and effort to create a single card

Given this, I decided to try and create a new library that would allow me to create Cards in h5p. I have a very rudimentary library that I’d like to share for feedback, suggestions, and assistance: https://github.com/ymdahi/h5p-cardblock.

Editor interface:

Display:

Here are some examples of the library in action:

• Multiple cards
• Only one card

  There is still a lot of work to do:

1. Make a single card copy-able (now possible with https://github.com/ymdahi/h5p-standard-card)
2. Allow Card creation in Course Presentation and Interactive Video editors.
3. Better responsiveness and content awareness (i.e height of certain elements).

Thanks for your time.