# Components with structured markup in ember.js v1.10

**URL:** <https://discuss.emberjs.com/t/components-with-structured-markup-in-ember-js-v1-10/7795>\
**Category:** Design\
**Created:** [April 14, 2015, 1:38am UTC](https://discuss.emberjs.com/t/components-with-structured-markup-in-ember-js-v1-10/7795 "2015-04-14T01:38:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![doug316](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/doug316/32/15507_2.png) [@doug316](https://discuss.emberjs.com/u/doug316)\
**Post date:** [April 14, 2015, 1:38am UTC](https://discuss.emberjs.com/t/components-with-structured-markup-in-ember-js-v1-10/7795/1 "2015-04-14T01:38:15Z")

</div>

Wrote up a quick example of creating structured component templates in 1.10:

> **[Components with structured markup in ember.js v1.10 (Example)](https://coderwall.com/p/qkk2zq/components-with-structured-markup-in-ember-js-v1-10)**
>
> A protip by aceofspades about ember.js, handlebars, and htmlbars.

Instantiate component like this:

```auto
{{#my-comp as |section|}}
  {{#if section.isHeader}}
    My header
  {{else if section.isBody}}
    My body
  {{else if section.isFooter}}
    My footer
  {{/if}}
{{/my-comp}}

```

Results in

```auto
<div>
  <header>My header</header>
  <div class="body">My body</div>
  <footer>My footer</footer>
</div>

```