Barmer Fractal

Textmodule: Content Desktop 

<div class="o-textmodule display--md-lg">
    <h3 class="textmodule__headline textmodule__headline--h1">Textmodul, Desktop</h3>

    <div class="a-richtext richtext--article">
        <div class="a-richtext richtext--intro">
            <p>Dieses Textmodul wird auf großen Bildschirmklassen angezeigt, auf kleinen aber nicht.</p>
        </div>
        <div class="a-richtext richtext--article">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etdolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stetclita kasd gubergren.</p>
        </div>
    </div>

    <div class="textmodule__cta-row">
        <a class="a-btn btn--conversion" href="http://www.google.de" title="">
            Zum Antragsformular
        </a>

    </div>
</div>
 
<div class="o-textmodule {{viewtypes.specifier}}">
	{{# switches.hasHeadline }}
		<h3 class="textmodule__headline {{viewtypes.headlineSpecifier}}">{{ content.headline }}</h3>
	{{/switches.hasHeadline}}
	{{# switches.hasIntro }}
  	{{render '@richtext--article-intro' merge=true}}
  {{/switches.hasIntro}}

  {{render '@richtext--article-richtext' this.partials.detailText merge=true}}

  {{# switches.hasCTA }}
    <div class="textmodule__cta-row">
      {{ render '@button--conversion' this.partials.button merge=true }}
    </div>
  {{/switches.hasCTA}}
</div>
 
{
  "switches": {
    "hasHeadline": true,
    "hasIntro": false,
    "hasCTA": true
  },
  "viewtypes": {
    "specifier": "display--md-lg",
    "headlineSpecifier": "textmodule__headline--h1"
  },
  "content": {
    "headline": "Textmodul, Desktop",
    "text": ""
  },
  "partials": {
    "detailText": {
      "switches": {
        "hasDefaultText": false,
        "hasWrapper": true,
        "isMusterContent": false,
        "showTextBetween": false,
        "showInfobox": false,
        "showAllButtons": false,
        "showDefaultLists": false,
        "showNestedLists": false,
        "showTable2col": false,
        "showTable3col": false,
        "showTableWithPicture": false,
        "showFloatingImages": false,
        "showSmallImages": false,
        "showDefaultImage": false,
        "showCroppingDisabledImage": false
      },
      "viewtypes": {
        "specifier": "richtext--article"
      },
      "content": {
        "text": "    <div class=\"a-richtext richtext--intro\"><p>Dieses Textmodul wird auf großen Bildschirmklassen angezeigt, auf kleinen aber nicht.</p></div><div class=\"a-richtext richtext--article\"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etdolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stetclita kasd gubergren.</p></div>"
      }
    },
    "button": {
      "switches": {
        "asLink": true
      },
      "content": {
        "label": "Zum Antragsformular",
        "url": "http://www.google.de"
      }
    }
  }
}

Headline Tag is default rendered as a H3, but styling is controlled by headlineSpecifier.