BlogList.html

{namespace neos=TYPO3\Neos\ViewHelpers}
<div>
	{postList -> f:format.raw()}
</div>

BlogPost.html

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div class="article-list-element">
	<media:image asset="{image}" alt="{title}" maximumHeight="465" />

	<h2>{title}</h2>

	{neos:contentElement.editable(property: 'teaser', node: node)}

	<p><neos:link.node node="{node}" class="btn btn-default">Details about this</neos:link.node></p>
</div>

gistfile1.yml

'TYPO3.NeosDemoTypo3Org:BlogPost':
  superTypes: ['TYPO3.Neos.NodeTypes:Page']
  ui:
    label: 'Blog Post'
    icon: 'icon-pacman'
    inspector:
      groups:
        image:
          label: 'Image'
          position: 20
  properties:
    teaser:
      type: string
      defaultValue: 'Teaser Text'
      ui:
        inlineEditable: true
    image:
      type: TYPO3\Media\Domain\Model\ImageVariant
      ui:
        label: 'Header Image'
        reloadIfChanged: true
        inspector:
          group: 'image'
          

'TYPO3.NeosDemoTypo3Org:BlogList':
  superTypes: ['TYPO3.Neos:Content']
  ui:
    label: 'Blog List'
    icon: 'icon-fire'

gistfile2.txt

prototype(TYPO3.NeosDemoTypo3Org:BlogList) {
	postList = TYPO3.TypoScript:Collection {
		collection = ${q(documentNode).children('[instanceof TYPO3.NeosDemoTypo3Org:BlogPost]')}
		itemName = 'node'
		itemRenderer = TYPO3.TypoScript:Template {
			templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/TypoScriptObjects/BlogPost.html'

			node = ${node}
			teaser = ${q(node).property('teaser')}
			image = ${q(node).property('image')}
			title = ${q(node).property('title')}

			@process.contentElementWrapping = TYPO3.Neos:ContentElementWrapping
		}
	}
}