@madgex/design-system 10.0.3 → 10.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_tokens/js/_tokens-module.js +250 -181
- package/dist/assets/icons.json +1 -1
- package/dist/css/index.css +1 -1
- package/package.json +7 -7
- package/src/components/_macro-index.njk +1 -0
- package/src/components/_preview.njk +1 -1
- package/src/components/accordion/accordion.njk +2 -2
- package/src/components/media-block/README.md +23 -0
- package/src/components/media-block/_macro.njk +3 -0
- package/src/components/media-block/_template.njk +20 -0
- package/src/components/media-block/media-block.config.js +86 -0
- package/src/components/media-block/media-block.njk +143 -0
- package/src/components/media-block/media-block.scss +53 -0
- package/src/components/pagination-numbers/_pagination-numbers-number-macro.njk +8 -8
- package/src/helpers/container-queries/README.md +5 -0
- package/src/helpers/container-queries/container-queries.njk +1 -0
- package/src/scss/components/__index.scss +1 -0
- package/src/scss/helpers/__index.scss +1 -0
- package/src/scss/helpers/_container-queries.scss +3 -0
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@madgex/design-system",
|
|
3
3
|
"author": "Madgex",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "10.0.
|
|
5
|
+
"version": "10.0.5",
|
|
6
6
|
"main": "dist/js/index.js",
|
|
7
7
|
"exports": {
|
|
8
8
|
".": "./dist/js/index.js",
|
|
@@ -25,19 +25,20 @@
|
|
|
25
25
|
"clean": "rimraf dist public tokens/build",
|
|
26
26
|
"commit": "commit",
|
|
27
27
|
"dev": "cross-env NODE_ENV=development gulp dev",
|
|
28
|
-
"debug": "node --inspect ./node_modules/.bin/gulp dev",
|
|
29
28
|
"build": "gulp build",
|
|
30
29
|
"build:icons": "svgo -f src/icons ./dist/assets/icons",
|
|
31
30
|
"build:fractal": "fractal build",
|
|
32
|
-
"prepublishOnly": "npm run build",
|
|
33
31
|
"test": "jest",
|
|
34
32
|
"cypress": "cypress run",
|
|
35
|
-
"cypress:open": "cypress open"
|
|
33
|
+
"cypress:open": "cypress open",
|
|
34
|
+
"prepublishOnly": "npm run build",
|
|
35
|
+
"semantic-release": "semantic-release -e semantic-release-monorepo"
|
|
36
36
|
},
|
|
37
37
|
"repository": {
|
|
38
38
|
"type": "git",
|
|
39
|
-
"url": "https://github.com/
|
|
39
|
+
"url": "https://github.com/wiley/madgex-design-system"
|
|
40
40
|
},
|
|
41
|
+
"homepage": "https://design-system.jb.dev.madgexhosting.net/",
|
|
41
42
|
"dependencies": {
|
|
42
43
|
"@ctrl/tinycolor": "^4.1.0",
|
|
43
44
|
"glob": "^11.0.1",
|
|
@@ -95,6 +96,5 @@
|
|
|
95
96
|
},
|
|
96
97
|
"engines": {
|
|
97
98
|
"node": ">=22"
|
|
98
|
-
}
|
|
99
|
-
"gitHead": "9251597158a6a12ebd007560f96ae1ed96b4cd93"
|
|
99
|
+
}
|
|
100
100
|
}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
{% from 'src/components/inputs/single-checkbox/_macro.njk' import MdsSingleCheckbox %}
|
|
17
17
|
{% from 'src/components/inputs/text-editor/_macro.njk' import MdsTextEditor %}
|
|
18
18
|
{% from 'src/components/inputs/textarea/_macro.njk' import MdsTextarea %}
|
|
19
|
+
{% from 'src/components/media-block/_macro.njk' import MdsMediaBlock %}
|
|
19
20
|
{% from 'src/components/modal/_macro.njk' import MdsModal %}
|
|
20
21
|
{% from 'src/components/pagination-numbers/_macro.njk' import MdsPaginationNumbers %}
|
|
21
22
|
{% from 'src/components/pagination/_macro.njk' import MdsPagination %}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
{% include '_script-MdsCE.njk' %}
|
|
17
17
|
|
|
18
18
|
</head>
|
|
19
|
-
<body style="padding: 30px;">
|
|
19
|
+
<body style="padding: 30px;" class="fractal-preview">
|
|
20
20
|
{# inline svg icons, available to MdsIcon in every preview page #}
|
|
21
21
|
{% include '../dist/assets/icons-inline.svg' %}
|
|
22
22
|
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Media Block (`MdsMediaBlock`)
|
|
2
|
+
|
|
3
|
+
The Media Block component is a content container that can optionally display an image alongside textual content. It uses container queries to adjust its layout based on available width.
|
|
4
|
+
|
|
5
|
+
Initially used in the Article Spotlight feature.
|
|
6
|
+
|
|
7
|
+
### Parameters (`params` object):
|
|
8
|
+
|
|
9
|
+
- `imageSrc` (String, Optional): URL for the image. If not provided, no image section is rendered.
|
|
10
|
+
- `imageAlt` (String, Optional): Alt text for the image. Required if `imageSrc` is provided.
|
|
11
|
+
- `imagePosition` (String, Optional): Determines image placement in wider views.
|
|
12
|
+
- `'left'` (default)
|
|
13
|
+
- `'right'`
|
|
14
|
+
- `imageSize` (String, Optional): Suggests a relative size for the image area in wider views.
|
|
15
|
+
- `'small'` (default)
|
|
16
|
+
- `'large'`
|
|
17
|
+
- `noContainerQueries` (Boolean, Optional): If `true`, disables the container query wrapper and behavior. Defaults to `false`.
|
|
18
|
+
- `classes` (String, Optional): Additional CSS classes to apply to the main `mds-media-block` container.
|
|
19
|
+
- `id` (String, Optional): An ID used to construct a `data-test` attribute (e.g., `data-test="media-block-{{id}}"").
|
|
20
|
+
|
|
21
|
+
### Callable Content (`caller()`):
|
|
22
|
+
|
|
23
|
+
The `caller()` is used to inject the main content of the media block. This content should include the HTML structure for the title, description, and an optional footnote.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{% if not params.noContainerQueries -%}<div class="mds-container-inline-size">{%- endif -%}
|
|
2
|
+
|
|
3
|
+
<div class="mds-media-block
|
|
4
|
+
{% if params.imageSrc %} mds-media-block--with-image mds-media-block--image-{{ params.imagePosition | default('left') }} mds-media-block--size-{{ params.imageSize | default('small') }}{% endif %}
|
|
5
|
+
{%- if params.classes %} {{ params.classes }}{% endif %}
|
|
6
|
+
mds-width-full"
|
|
7
|
+
{%- if params.id %} data-test="media-block-{{ params.id }}"{% endif %}>
|
|
8
|
+
|
|
9
|
+
{% if params.imageSrc %}
|
|
10
|
+
<div class="mds-media-block__image-wrapper mds-margin-bottom-b3">
|
|
11
|
+
<img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" class="mds-media-block__image mds-width-full">
|
|
12
|
+
</div>
|
|
13
|
+
{% endif %}
|
|
14
|
+
|
|
15
|
+
<div class="mds-media-block__content">
|
|
16
|
+
{{ caller() }}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
{% if not params.noContainerQueries -%}</div>{%- endif %}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
title: 'Media Block',
|
|
3
|
+
label: 'Media Block',
|
|
4
|
+
status: 'wip',
|
|
5
|
+
context: {
|
|
6
|
+
fractalLabel: 'Default Media Block (No Image)',
|
|
7
|
+
fractalDesc: `
|
|
8
|
+
<strong>NOTE</strong>: The examples here use the <code>safe</code> filter in the content slots. This is for fractal & in normal use <code>safe</code> is discouraged as it is dangerous, and not needed
|
|
9
|
+
<br>
|
|
10
|
+
<br>
|
|
11
|
+
Pink, dashed container to help reveal component.`,
|
|
12
|
+
// imageSrc, imageAlt, imagePosition, imageSize are undefined by default
|
|
13
|
+
content: `
|
|
14
|
+
<h3 class="mds-font-s0"><a href="#">Title via Caller</a></h3>
|
|
15
|
+
<p class="mds-font-s-2">Description via caller.</p>
|
|
16
|
+
`,
|
|
17
|
+
id: 'default',
|
|
18
|
+
},
|
|
19
|
+
variants: [
|
|
20
|
+
{
|
|
21
|
+
name: 'with-image-left-small',
|
|
22
|
+
context: {
|
|
23
|
+
fractalLabel: 'Single Media Block using params for image URL and positioning',
|
|
24
|
+
fractalDesc:
|
|
25
|
+
'Single item using <code>params</code> for image URL and positioning & <code>caller()</code> to pass in HTML content.',
|
|
26
|
+
imageSrc: 'https://www.placecats.com/300/200',
|
|
27
|
+
imageAlt: 'Placeholder image',
|
|
28
|
+
imagePosition: 'left',
|
|
29
|
+
imageSize: 'small',
|
|
30
|
+
content: `
|
|
31
|
+
<h3 class=""><a href="#">Postdoc Resources for the before, during and after</a></h3>
|
|
32
|
+
<p class="">This media block has a small image on the left.</p>
|
|
33
|
+
`,
|
|
34
|
+
id: 'image-left-small',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: 'with-image-left-large',
|
|
39
|
+
context: {
|
|
40
|
+
fractalLabel: 'Single Media Block with large image',
|
|
41
|
+
fractalDesc:
|
|
42
|
+
'Single item using <code>params</code> for image URL and positioning & <code>caller()</code> to pass in HTML content.',
|
|
43
|
+
imageSrc: 'https://www.placecats.com/600/400',
|
|
44
|
+
imageAlt: 'Placeholder image',
|
|
45
|
+
imagePosition: 'left',
|
|
46
|
+
imageSize: 'large',
|
|
47
|
+
content: `
|
|
48
|
+
<h3 class=""><a href="#">Postdoc Resources for the before, during and after</a></h3>
|
|
49
|
+
<p class="">This media block has a small image on the left.</p>
|
|
50
|
+
`,
|
|
51
|
+
id: 'image-left-large',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: 'with-image-right-small',
|
|
56
|
+
context: {
|
|
57
|
+
fractalLabel: 'Single Media Block with right image',
|
|
58
|
+
fractalDesc:
|
|
59
|
+
'Single item using <code>params</code> for image URL and positioning & <code>caller()</code> to pass in HTML content.',
|
|
60
|
+
imageSrc: 'https://www.placecats.com/300/200',
|
|
61
|
+
imageAlt: 'Placeholder image',
|
|
62
|
+
imagePosition: 'right',
|
|
63
|
+
imageSize: 'small',
|
|
64
|
+
content: `
|
|
65
|
+
<h3 class=""><a href="#">Postdoc Resources for the before, during and after</a></h3>
|
|
66
|
+
<p class="">This media block has a small image on the left.</p>
|
|
67
|
+
`,
|
|
68
|
+
id: 'image-right-small',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
{
|
|
73
|
+
name: 'example-usage',
|
|
74
|
+
context: {
|
|
75
|
+
fractalLabel: 'Example Usage: Article Spotlight',
|
|
76
|
+
fractalDesc:
|
|
77
|
+
'Multiple Media Blocks in a grid layout. Content in rows when column width is big enough, otherwise they stack - using container queries, so unrelated to viewport size.',
|
|
78
|
+
imageSrc: 'https://www.placecats.com/300/200',
|
|
79
|
+
content: `
|
|
80
|
+
<h3 class="mds-font-s0"><a href="#">Postdoc Resources for the before, during and after</a></h3>
|
|
81
|
+
<p class="mds-font-s-2">Brought to you by [Employer name]</p>
|
|
82
|
+
`,
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
};
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
{# /////////////////////////////////////////////// #}
|
|
2
|
+
{# template used by Fractal to render each preview #}
|
|
3
|
+
{# /////////////////////////////////////////////// #}
|
|
4
|
+
{% from "./media-block/_macro.njk" import MdsMediaBlock %}
|
|
5
|
+
{% set isImplementaitonDemo = fractalLabel and fractalLabel.includes('Example') %}
|
|
6
|
+
|
|
7
|
+
<h2>{{ fractalLabel }}</h2>
|
|
8
|
+
<p>{{ fractalDesc | safe }}</p>
|
|
9
|
+
|
|
10
|
+
{% if isImplementaitonDemo %}
|
|
11
|
+
|
|
12
|
+
<p class="mds-margin-top-b12">With image - 3 column using mds grid. Note how lack of column width causes MediaBlock to stack.</p>
|
|
13
|
+
{# wrap in dashed border to help seperate examples #}
|
|
14
|
+
<div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
|
|
15
|
+
|
|
16
|
+
<div class="mds-grid-row">
|
|
17
|
+
{% for i in range(0, 3) %}
|
|
18
|
+
<div class="mds-grid-col-12 mds-grid-col-sm-4 mds-margin-bottom-b6 mds-margin-bottom-sm-b0">
|
|
19
|
+
|
|
20
|
+
{% call MdsMediaBlock({
|
|
21
|
+
imageSrc: imageSrc,
|
|
22
|
+
imageAlt: imageAlt,
|
|
23
|
+
imagePosition: imagePosition,
|
|
24
|
+
imageSize: imageSize,
|
|
25
|
+
classes: classes,
|
|
26
|
+
id: id ~ '-' ~ loop.index
|
|
27
|
+
}) -%}
|
|
28
|
+
{# example - in normal use `safe` is discouraged as it is dangerous, and not needed #}
|
|
29
|
+
{{- content | safe -}}
|
|
30
|
+
{%- endcall %}
|
|
31
|
+
|
|
32
|
+
</div>
|
|
33
|
+
{% endfor %}
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<p class="mds-margin-top-b12">With image - 2 column using mds grid. More width per column means horizontal layout.</p>
|
|
39
|
+
<div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
|
|
40
|
+
|
|
41
|
+
<div class="mds-grid-row">
|
|
42
|
+
{% for i in range(0, 2) %}
|
|
43
|
+
<div class="mds-grid-col-12 mds-grid-col-sm-6 mds-margin-bottom-b6 mds-margin-bottom-sm-b0">
|
|
44
|
+
|
|
45
|
+
{% call MdsMediaBlock({
|
|
46
|
+
imageSrc: imageSrc,
|
|
47
|
+
imageAlt: imageAlt,
|
|
48
|
+
imagePosition: imagePosition,
|
|
49
|
+
imageSize: imageSize,
|
|
50
|
+
classes: classes,
|
|
51
|
+
id: id ~ '-' ~ loop.index if id else null
|
|
52
|
+
}) -%}
|
|
53
|
+
{{- content | safe -}}
|
|
54
|
+
{%- endcall %}
|
|
55
|
+
|
|
56
|
+
</div>
|
|
57
|
+
{% endfor %}
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<p class="mds-margin-top-b12">With image - 2 column using mds grid (<code>noContainerQueries: true</code>)</p>
|
|
63
|
+
<div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
|
|
64
|
+
|
|
65
|
+
<div class="mds-grid-row">
|
|
66
|
+
{% for i in range(0, 2) %}
|
|
67
|
+
<div class="mds-grid-col-12 mds-grid-col-sm-6 mds-margin-bottom-b6 mds-margin-bottom-sm-b0">
|
|
68
|
+
|
|
69
|
+
{% call MdsMediaBlock({
|
|
70
|
+
noContainerQueries: true,
|
|
71
|
+
imageSrc: imageSrc,
|
|
72
|
+
imageAlt: imageAlt,
|
|
73
|
+
imagePosition: imagePosition,
|
|
74
|
+
imageSize: imageSize,
|
|
75
|
+
classes: classes,
|
|
76
|
+
id: id ~ '-' ~ loop.index if id else null
|
|
77
|
+
}) -%}
|
|
78
|
+
{{- content | safe -}}
|
|
79
|
+
{%- endcall %}
|
|
80
|
+
|
|
81
|
+
</div>
|
|
82
|
+
{% endfor %}
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<p class="mds-margin-top-b12">Without image</p>
|
|
88
|
+
<div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
|
|
89
|
+
|
|
90
|
+
<div class="mds-grid-row">
|
|
91
|
+
{% for i in range(0, 3) %}
|
|
92
|
+
<div class=" mds-grid-col-12 mds-grid-col-sm-4 mds-margin-bottom-b6 mds-margin-bottom-sm-b0">
|
|
93
|
+
|
|
94
|
+
{% call MdsMediaBlock({
|
|
95
|
+
classes: classes,
|
|
96
|
+
id: id ~ '-' ~ loop.index if id else null
|
|
97
|
+
}) -%}
|
|
98
|
+
{{- content | safe -}}
|
|
99
|
+
{%- endcall %}
|
|
100
|
+
|
|
101
|
+
</div>
|
|
102
|
+
{% endfor %}
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
</div>
|
|
106
|
+
<div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
|
|
107
|
+
|
|
108
|
+
<div class="mds-grid-row">
|
|
109
|
+
{% for i in range(0, 2) %}
|
|
110
|
+
<div class="mds-grid-col-12 mds-grid-col-sm-6 mds-margin-bottom-b6 mds-margin-bottom-sm-b0">
|
|
111
|
+
|
|
112
|
+
{% call MdsMediaBlock({
|
|
113
|
+
classes: classes,
|
|
114
|
+
id: id ~ '-' ~ loop.index if id else null
|
|
115
|
+
}) -%}
|
|
116
|
+
{{- content | safe -}}
|
|
117
|
+
{%- endcall %}
|
|
118
|
+
|
|
119
|
+
</div>
|
|
120
|
+
{% endfor %}
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
{% else %}
|
|
126
|
+
|
|
127
|
+
{# Regular examples #}
|
|
128
|
+
<div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
|
|
129
|
+
|
|
130
|
+
{% call MdsMediaBlock({
|
|
131
|
+
imageSrc: imageSrc,
|
|
132
|
+
imageAlt: imageAlt,
|
|
133
|
+
imagePosition: imagePosition,
|
|
134
|
+
imageSize: imageSize,
|
|
135
|
+
classes: classes,
|
|
136
|
+
id: id
|
|
137
|
+
}) -%}
|
|
138
|
+
{{- content | safe -}}
|
|
139
|
+
{%- endcall %}
|
|
140
|
+
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
{% endif %}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
.mds-media-block {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.mds-media-block__content {
|
|
6
|
+
flex-grow: 1;
|
|
7
|
+
min-width: 0; // Prevents content from overflowing in flex context
|
|
8
|
+
|
|
9
|
+
> :last-child {
|
|
10
|
+
margin-bottom: 0;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.mds-media-block--with-image {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column; // stacked by default
|
|
17
|
+
|
|
18
|
+
.mds-media-block__image-wrapper {
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@container (min-width: 300px) { // magic number, but it works
|
|
23
|
+
flex-direction: row;
|
|
24
|
+
gap: $constant-size-baseline * 2; // ugh, why can't I use a CSS var here?
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
.mds-media-block__image-wrapper {
|
|
28
|
+
margin-bottom: 0;
|
|
29
|
+
flex-shrink: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&.mds-media-block--image-right {
|
|
33
|
+
flex-direction: row-reverse;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.mds-media-block--size-small .mds-media-block__image-wrapper {
|
|
37
|
+
flex-basis: 25%;
|
|
38
|
+
max-width: 150px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&.mds-media-block--size-large .mds-media-block__image-wrapper {
|
|
42
|
+
flex-basis: 40%;
|
|
43
|
+
max-width: 300px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.mds-media-block__image {
|
|
49
|
+
display: block;
|
|
50
|
+
height: auto;
|
|
51
|
+
border-radius: var(--mds-border-radius-base, 4px);
|
|
52
|
+
}
|
|
53
|
+
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
{%- set currentPageAriaLabel = params.i18n.currentPageAriaLabel | default('Current page, page {pageNo}') -%}
|
|
6
6
|
|
|
7
7
|
<a href="{{params.pageUrlTemplate | replace('{pageNo}', params.number)}}"
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
{%- else
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
{%- if isCurrentPage %}{#
|
|
9
|
+
#} aria-current="true"{#
|
|
10
|
+
#} aria-label="{{ currentPageAriaLabel | replace('{pageNo}', params.number) }}"{#
|
|
11
|
+
#} class="mds-pagination__link mds-pagination__link--background mds-pagination__link--active"
|
|
12
|
+
{%- else %}{#
|
|
13
|
+
#} aria-label="{{ pageNumberAriaLabel | replace('{pageNo}', params.number) }}"{#
|
|
14
|
+
#} class="mds-pagination__link mds-pagination__link--background"
|
|
15
|
+
{%- endif -%}>
|
|
16
16
|
{%- if params.showLastEllipses -%}
|
|
17
17
|
<span class="mds-display-none mds-display-md-inline">…</span>
|
|
18
18
|
{%- endif -%}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
## Helper classes
|
|
2
|
+
|
|
3
|
+
Container queries allow styling elements based on their container's size rather than the viewport, enabling truly responsive components regardless of placement. The `.mds-container-inline-size` class creates a containment context for child elements.
|
|
4
|
+
|
|
5
|
+
- `.mds-container-inline-size`
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<p>See the <a href="/components/detail/media-block" target="_top">MediaBlock</a> preview to see it in action.</p>
|