From a677f1283d7c8c1fe7a3450849e513adbd71619f Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Fri, 29 Nov 2024 11:09:20 +0100 Subject: [PATCH 01/32] save --- .../breakout/breakout-appearance.demo.tsx | 30 +++++++++++++++++++ .../components/layout/breakout/breakout.mdx | 27 +++++++++-------- 2 files changed, 44 insertions(+), 13 deletions(-) create mode 100644 docs/content/components/layout/breakout/breakout-appearance.demo.tsx diff --git a/docs/content/components/layout/breakout/breakout-appearance.demo.tsx b/docs/content/components/layout/breakout/breakout-appearance.demo.tsx new file mode 100644 index 0000000000..c8328402d6 --- /dev/null +++ b/docs/content/components/layout/breakout/breakout-appearance.demo.tsx @@ -0,0 +1,30 @@ +import { Breakout, Container, Headline, Text } from '@marigold/components'; + +export default () => ( + + + Welcome to The Giggle Grounds - Laughville's New Comedy Hub! + + +
BREAKOUT with right aligned content
+
+ + Laughville, get ready to laugh! Introducing The Giggle Grounds, an outdoor + amphitheater for comedy under the stars. Located at 123 Main Street, this + venue blends natural charm with live entertainment for a perfect night + out. + + + With a capacity of 500, The Giggle Grounds offers an intimate yet lively + experience, ideal for enjoying top comedians in an open-air setting. + Pricing ranges from $1000 to $5000, making it flexible for various events + and budgets. + + + Join us at The Giggle Grounds for an unforgettable comedy experience! + + + For bookings or more information, visit us at 123 Main Street, Laughville. + +
+); diff --git a/docs/content/components/layout/breakout/breakout.mdx b/docs/content/components/layout/breakout/breakout.mdx index 63d7ab55af..118a88ed85 100644 --- a/docs/content/components/layout/breakout/breakout.mdx +++ b/docs/content/components/layout/breakout/breakout.mdx @@ -1,25 +1,20 @@ --- title: Breakout -caption: Component that breaks out of a grid layout context. +caption: When you need to break out of a grid layout. +badge: updated --- -`` is a layout component which lets you span the full row in a CSS grid context e.g. our [``](container/) component. +The `` component is designed to help elements break out of their current grid layout, creating visual interest and giving content the space it needs to stand out. -You need this component if you want to display something out of the context. It is also possible to put several components into the ``. +## Usage -You can use `alignX` or `alignY` to place the items inside the `` element. +Use the `` component when you need elements to break out of their current grid layout, adding visual interest and giving content the space it needs to stand out. -## Import +It is particularly useful for situations where extra emphasis is needed or when you want to create a more dynamic and engaging reading experience. `` is ideal for highlighting media elements or other key content. -```tsx -import { Breakout } from '@marigold/components'; -``` +Combine `` with the `` component to maintain a cohesive design while effectively drawing attention to important elements. -## Props - - - -## Examples + ### Vertical alignment @@ -38,3 +33,9 @@ Example to show how the `alignX` prop is to set. Options are `"left" | "center" This example shows how to use an `