### The Demo:

### The Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

`var` `Rd = ReactDatum;`
`// Say you have this model:`
`var` `kittenModel =` `new` `Backbone.Model({`
`` `name:` `"Fluffy"``,`
`` `title:` `"His Royal Cuteness"``,`
`` `description:` `"He's a cuddler and a lover through and through"``,`
`` `forAdoption:` `true``,`
`` `ageInMonths: 10,`
`` `createdAt: 1446520828,`
`` `imgUrl:` `"https://drpem3xzef3kf.cloudfront.net/photos/pets/32707403/1/?bust=1436666804&width=200&no_scale_up=1"``,`
`` `sponsorEmail:` `"kindoldcatlady@lotsofcats.com"``,`
`` `comment:` `""`
`});`
`// To create the card on the right:`
`var` `KittenCard = React.createClass({`
`` `displayName:``"KittenCard"``,`
`` `render:` `function``(){`
`` `return` `(`
`` `<``div` `className``=``'kitten-card'``>`
`` `<``Rd.Model` `model={kittenModel}>`
`` `<``h3``>Adopt <``Rd.Text` `attr``=``"name"``/> Today!</``h3``>`
`` `<``div``><``Rd.LazyPhoto` `attr``=``"imgUrl"``/></``div``>`
`` `<``div``><``Rd.Text` `attr``=``"name"` `label``=``"Name:"``/> (<``Rd.Text` `attr``=``"title"``/>)</``div``>`
`` `<``div``><``Rd.Email` `attr``=``"sponsorEmail"` `label``=``"Adoption Sponsor:"` `displayLink/></``div``>`
`` `<``Rd.Text` `attr``=``"description"``/>`
`` `<``h5``>Leave a comment</``h5``>`
`` `<``Rd.Text` `attr``=``"comment"` `inputMode``=``"edit"``/>`
`` `</``Rd.Model``>`
`` `</``div``>`
`` `)`
`` `}`
`})`
`window.Demo = KittenCard`