illustration.jsx

<Accordion>
  <PanelHeader>Your Risk Illustration</PanelHeader>
  <PanelContent>
    <Illustration id="risk" /> { /* Dynamically load widget from CDN. Different "house view" loads different widget */ }
  </PanelContent>
</Accordion>

image.jsx

<Promo>
  <PromoImage>
    <StaticImageAsset id="advisor-portrait" /> { /* Images fetched by the browser, CDN url constructed by server */ }
  </PromoImage>
  <PromoContent>
    <ContentBlock id="advisor-name" />
    <ContentBlock id="advisor-company" />
    <StaticImageAsset id="advisor-signature" />
  </PromoContent>
</Promo>

text.jsx

<TwoColumnLayout>
  <LeftColumn>...</LeftColumn>
  <RightColumn>
    <SectionHeader>A summary of what you've told us</SectionHeader>
    <List>
      <ContentBlock id="target-retirement-age" />
      <ContentBlock id="default-retirement-date" />
      <ContentBlock id="target-retirement-income" />
      { 
        this.factfind.outputs.disposableIncome > 0 ? 
          <ContentBlock id="has-disposable-income" /> :
          <ContentBlock id="no-disposable-income" />
      }
      <ContentBlock id="planned-contribution" />
      <ContentBlock id="employer-contribution" />
      { 
        this.factfind.outputs.reducedNetIncome > 0 ? 
          <ContentBlock id="net-income-reduced" /> :
          <ContentBlock id="net-income-unchanged" />
      }
    </List>
  </RightColumn>
</TwoColumnLayout>