Reusing a "layout" on multiple components

[coorasse]

I tried to look for documentation regarding this, but unfortunately I could not find anything.
I'd like to share the same "layout" among multiple components, so that they have all a common structure, but I am not sure how to do that.

Imagine that I have multiple Card components, and they should all be rendered within a <div class="card">, I am not sure how to achieve that. My two components are simple:

# component_a.html.slim

h1 Hello A

# component_b.html.slim

h1 Hello B

I'd like both of them to render:

<div class="card">
  <h1>Hello ..<h1>
</div>

how can I re-use a common layout?

[joelhawksley]

@coorasse thank you for sharing your question! Generally, I'd recommend using a separate component for your "layout" in this case.

[coorasse]

Thanks for your answer @joelhawksley but I still don't understand how I can re-use it, without duplicating code...maybe inheriting from the same component?

[joelhawksley]

@coorasse for example, you might have a CardContainerComponent that provides the <div class="card">. You'd then render that component inside your other components as a wrapper of their HTML.