This issue tracks the basic implementation of the `DetailLayout` Vue component. ## Proposal This implementation should align with the [`DetailLayout` Vue Component](https://gitlab.com/gitlab-org/gitlab/-/work_items/596902). * Location: `app/assets/javascripts/vue_shared/components/detail_layout.vue` * Its primary function will be establishing spacing between the heading, alerts and content areas. * Props: * `heading: string`: This will be the preferred way to set the page's heading. * `description: string`: This will be the preferred way to set the page's description * Slots: * `heading`: If the `heading` prop isn't sufficient, users can use the [`PageHeading` Vue component](https://gitlab.com/gitlab-org/gitlab/-/blob/2b2514de920402c8fbe73d365f90f4d522a6fcb8/app/assets/javascripts/vue_shared/components/page_heading.vue) here explicitly, with more customisation possibilities. * `alerts`: This is where page alerts would go, and _only_ alerts. The container for this should take up no space when it has no content. It should probably _always_ be rendered, though, to allow for the possibility of portaled alerts (TODO: add link). * `sidebar`: This is where sidebar page content goes. There aren't any constraints about what can go in here. * `content`: This is where regular page content goes. There aren't any constraints about what can go in here. * It should _not_ add any outer margin or padding. It should only set the gap between the three content regions.