ContentBox
Layout component for content borders with shadow control.
Examples
import { ContentBox } from "@seduo/design-system";
...
<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.
import { ContentBox } from "@seduo/design-system";
...
<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
import { ContentBox, ContentBoxDelimiter } from "@seduo/design-system";
...
<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