Provide examples/templates for arrangements of components

[silentHoo]

As a developer I want to speed up my development workflow and don't want to waste time by moving around components to get a good looking layout.

So why we don't add some example HTML code to speed that up? It's about how components fit together. How does it look good? At which spacing? If you look at https://daisyui.com/components/footer, you'll see there are multiple layout variants for a footer.

If you talk about Design Systems in Brad Frost speech: Example HTML Code is all about Molecules and Organisms. Molecules for example are something like a text input and search button. Organisms are a lot bigger: They may include Molecules but also contain simple/atomic components. We should add example code of how someone can achieve Organisms with a handful of element components.

So my proposal here is to introduce new Storybook sections to demonstrate how someone can tie together multiple elements to a nice looking arrangement or a nice looking page. Just by copying the HTML code from that Storybook section. Let the user play around with the code by using StackBlitz or similar live tooling.

Acceptance Criteria

• To start small, just look what others build with elements. At inovex several projects were created based on the elements. So we can start by inspecting existing organisms and generalize them.
• Create an issue for every generalized organism.

[silentHoo]

We could distinguish here between Components for the basic structure of WebApps and Components for common use cases.