ContentBox

Layout component for content borders with shadow control.

Examples

<ContentBox>example</ContentBox>
...
<ContentBox shadow={100}>example with shadow 100</ContentBox>
...
<ContentBox shadow={200}>example with shadow 200</ContentBox>
...
<ContentBox shadow={300}>example with shadow 300</ContentBox>
...
<ContentBox shadow={400}>example with shadow 400</ContentBox>
...
<ContentBox shadow={500}>example with shadow 500</ContentBox>

{% embed "@seduo-design-system/contentBox.twig" %}
    {% block content %}
        example
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/contentBox.twig" with { props: {
    shadow: 200,
}} %}
    {% block content %}
        example with shadow 100
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/contentBox.twig" with { props: {
    shadow: 200,
}} %}
    {% block content %}
        example with shadow 200
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/contentBox.twig" with { props: {
    shadow: 300,
}} %}
    {% block content %}
        example with shadow 300
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/contentBox.twig" with { props: {
    shadow: 400,
}} %}
    {% block content %}
        example with shadow 400
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/contentBox.twig" with { props: {
    shadow: 500,
}} %}
    {% block content %}
        example with shadow 500
    {% endblock %}
{% endembed %}

<ContentBox>example</ContentBox>
...
<ContentBox shadow="100">example with shadow 100</ContentBox>
...
<ContentBox shadow="200" padding="500">example with shadow 200</ContentBox>
...
<ContentBox shadow="300">example with shadow 300</ContentBox>
...
<ContentBox shadow="400">example with shadow 400</ContentBox>
...
<ContentBox shadow="500">example with shadow 500</ContentBox>

Customization

You can use the padding, shadow, borderRadius prop to apply custom design tokens. The prop accepts either a design tokens (eg. 100, 200) or an object with breakpoint keys and design token values.

examples

<ContentBox>example</ContentBox>
...
<ContentBox shadow={100} padding={{ mobile: 500, tablet: 400 }}>
  example with shadow 100, padding mobile 500, padding tablet 400
</ContentBox>
...
<ContentBox shadow={200} padding={500}>
  example with shadow 200, padding 500
</ContentBox>
...
<ContentBox shadow={300} borderRadius={{ mobile: 0, desktop: 500 }}>
  example with shadow 300, radius mobile 0, radius desktop 500
</ContentBox>
...
<ContentBox shadow={400}>example with shadow 400</ContentBox>
...
<ContentBox shadow={{ mobile: 100, tablet: 300, desktop: 500 }}>
  example with shadow 500, shadow mobile 100, shadow tablet 300
</ContentBox>

<ContentBox>example</ContentBox>
...
<ContentBox shadow="100" padding="{{ { mobile: 500, tablet: 400 } }}">example with shadow 100, padding mobile 500, padding tablet 400</ContentBox>
...
<ContentBox shadow="200" padding="500">example with shadow 200, padding 500</ContentBox>
...
<ContentBox shadow="300" borderRadius="{{ { mobile: 0, desktop: 500 } }}">example with shadow 300, radius mobile 0, radius desktop 500</ContentBox>
...
<ContentBox shadow="400">example with shadow 400</ContentBox>
...
<ContentBox shadow="{{ { mobile: 100, tablet: 300, desktop: 500 } }}">example with shadow 500, shadow mobile 100, shadow tablet 300</ContentBox>

API

name	type	default value	description
padding	[`Spaces` \| `Partial<Record<BreakpointToken, Spaces>>`]	-	Specifies the content padding by space tokens, see Customization
borderRadius	[`Radii` \| `Partial<Record<BreakpointToken, Radii>>`]	-	Specifies the border radius by radii tokens, see Customization
isBorder	`bool`	`true`	Specifies is bordered
shadow	[`Shaddow` \| `Partial<Record<BreakpointToken, Shaddow>>`]	-	Specifies the shadow by shadows tokens, see Customization
UNSAFE_className	`string`	-	Specifies the custom class

ContentBox with delimiters

examples

<ContentBox>
  <span>example content</span>
  <ContentBoxDelimiter isFullWidth />
  <span>example content</span>
  <ContentBoxDelimiter />
  <span>example content</span>
</ContentBox>

{% embed "@seduo-design-system/contentBox.twig" %}
    {% block content %}
        <span>example content</span>
        {% include "@seduo-design-system/contentBoxDelimiter.twig" with {
            props: {
                isFullWidth: true,
            }
        } %}
        <span>example content</span>
        {% include "@seduo-design-system/contentBoxDelimiter.twig" %}
        <span>example content</span>
    {% endblock %}
{% endembed %}

<ContentBox>
    <span>example content</span>
    <ContentBoxDelimiter isFullWidth />
    <span>example content</span>
    <ContentBoxDelimiter />
    <span>example content</span>
</ContentBox>

ContentBoxDelimiter Properties

name	type	default value	description
isFullWidth	`bool`	false	Specifies the delimiter width
UNSAFE_className	`string`	undefined	Specifies the custom class

On this page