Reorganization of the components

There are some components that have other components in them. These components are known as metacomponents. The nice thing about metacomponents is that they load with a layout and configuration, but it can be edited so that you can change the organisation of the components or insert your own content between them.

To achieve this you can make use of the slots that are defined in the components. You can insert into the metacomponent slot the components you want to load and the metacomponent itself will load them with the necessary data, so that you don't have to load them one by one, for example:

<cr-component id="proposal" name="portfolio-proposal">
  <div class="container">
    <cr-component name="analysis-summary"></cr-component>
    <div class="columns">
      <cr-component name="portfolio-positions"></cr-component>
      <cr-component name="analysis-regions"></cr-component>
    </div>
  </div>
</cr-component>

<script>
  const proposal = document.querySelector("#proposal");
  proposal.init({
    ...
  })
</script>

In this example, other divs have been inserted in the middle to demonstrate that the content is fully customisable, but this would not be necessary.