I am working on making a property editor that allows the content editor to add "infoboxes" to a page, each of which contains a header and a list of textstrings.

The desired output is something like this: http://i.imgur.com/SWH9lKX.png

I already have the markup ready for the boxes, but it should be possible for the content editor to add new boxes with their own content.

I was thinking of creating a new property editor for the header and the body text. i.e. something like this:

{
      "name": "Infoboks Header",
      "alias": "infoboksHeader",
      "view": "textstring",
      "icon": "icon-grid",
      "config": {
        "style": "font-size: 20px;",
        "markup": "<div class='col-sm-6'><div class='list-group'><div class='list-group-item'><h4 class='list-group-item-heading'>#value#</h4>"
      }
    }

A complete infoboks with static content currently has this code:

<div class="col-sm-6">
                                    <div class="list-group">
                                        <div class="list-group-item">
                                            <h4 class="list-group-item-heading">Soveværelser</h4>
                                            <ul class="ul-with-bullets">
                                                <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
                                                <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

But I'm not sure how to implement the ul and li elements for the content creator. It should be possible to add new li elements to the list, which consists of a text string. I'm also not too sure how my grid datatype would look for this to work. Currently my datatype looks like this: http://i.imgur.com/DgwqzJd.png

The boxes automatically align using the flexbox system, so that is no problem.