@opendesign-plus/components 0.0.1-rc.16

package/src/components/meeting/npmcachae/_logs/2026-03-20T07_25_42_134Z-debug-0.log

@@ -0,0 +1,212 @@
+0 verbose cli C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js
+1 info using npm@10.9.3
+2 info using node@v22.18.0
+3 silly config load:file:C:\Users\Administrator\AppData\Roaming\nvm\v22.18.0\node_modules\npm\npmrc
+4 silly config load:file:D:\forks\OpenDesignPlus\packages\components\.npmrc
+5 silly config load:file:C:\Users\Administrator\.npmrc
+6 silly config load:file:C:\Program Files\nodejs\etc\npmrc
+7 verbose title npm info @opensig/opendesign
+8 verbose argv "info" "--json" "@opensig/opendesign"
+9 verbose logfile logs-max:10 dir:D:\forks\OpenDesignPlus\packages\components\src\components\meeting\npmcachae\_logs\2026-03-20T07_25_42_134Z-
+10 verbose logfile D:\forks\OpenDesignPlus\packages\components\src\components\meeting\npmcachae\_logs\2026-03-20T07_25_42_134Z-debug-0.log
+11 silly logfile done cleaning log files
+12 http fetch GET 200 https://registry.npmmirror.com/@opensig%2fopendesign 2256ms (cache miss)
+13 silly view {
+13 silly view   '1.2.1': {
+13 silly view     _id: '@opensig/opendesign@1.2.1',
+13 silly view     _rev: '2341452-639b06238a129d27a6d4426d',
+13 silly view     'dist-tags': { '1.0.1': '1.0.1-sp4', latest: '1.2.1' },
+13 silly view     name: '@opensig/opendesign',
+13 silly view     time: {
+13 silly view       created: '2022-12-15T11:33:55.434Z',
+13 silly view       modified: '2026-03-09T09:48:08.410Z',
+13 silly view       '0.0.1': '2022-12-15T11:27:20.991Z',
+13 silly view       '0.0.2': '2023-03-06T09:40:12.938Z',
+13 silly view       '0.0.3': '2023-03-08T06:31:48.087Z',
+13 silly view       '0.0.4': '2023-03-08T10:17:57.120Z',
+13 silly view       '0.0.5': '2023-03-15T08:21:21.013Z',
+13 silly view       '0.0.6': '2023-03-15T15:01:06.432Z',
+13 silly view       '0.0.7': '2023-03-20T15:57:04.685Z',
+13 silly view       '0.0.8': '2023-03-22T10:17:00.821Z',
+13 silly view       '0.0.9': '2023-03-23T10:16:24.635Z',
+13 silly view       '0.0.10': '2023-03-23T15:47:59.515Z',
+13 silly view       '0.0.11': '2023-03-23T16:06:14.434Z',
+13 silly view       '0.0.12': '2023-03-24T15:11:38.381Z',
+13 silly view       '0.0.13': '2023-03-26T16:20:37.966Z',
+13 silly view       '0.0.14': '2023-03-27T01:57:50.722Z',
+13 silly view       '0.0.15': '2023-03-27T09:35:03.625Z',
+13 silly view       '0.0.16': '2023-03-27T10:16:01.440Z',
+13 silly view       '0.0.17': '2023-03-27T11:57:18.173Z',
+13 silly view       '0.0.18': '2023-03-28T01:41:35.164Z',
+13 silly view       '0.0.19': '2023-03-28T11:27:41.015Z',
+13 silly view       '0.0.20': '2023-03-28T16:07:21.349Z',
+13 silly view       '0.0.21': '2023-03-29T15:24:05.646Z',
+13 silly view       '0.0.22': '2023-03-30T09:57:57.523Z',
+13 silly view       '0.0.23': '2023-03-31T09:32:46.246Z',
+13 silly view       '0.0.24': '2023-03-31T16:45:47.739Z',
+13 silly view       '0.0.25': '2023-04-04T08:21:59.765Z',
+13 silly view       '0.0.26': '2023-04-07T02:45:59.221Z',
+13 silly view       '0.0.27': '2023-04-11T06:11:34.844Z',
+13 silly view       '0.0.28': '2023-04-11T08:24:33.460Z',
+13 silly view       '0.0.29': '2023-04-11T12:35:13.956Z',
+13 silly view       '0.0.30': '2023-04-12T01:36:36.112Z',
+13 silly view       '0.0.32': '2023-04-13T01:50:42.841Z',
+13 silly view       '0.0.33': '2023-04-24T11:06:53.121Z',
+13 silly view       '0.0.34': '2023-04-25T07:56:02.661Z',
+13 silly view       '0.0.35': '2023-04-25T15:26:00.846Z',
+13 silly view       '0.0.36': '2023-04-26T09:28:17.646Z',
+13 silly view       '0.0.37': '2023-04-27T06:35:02.005Z',
+13 silly view       '0.0.38': '2023-04-27T10:13:19.336Z',
+13 silly view       '0.0.39': '2023-06-05T15:26:41.826Z',
+13 silly view       '0.0.40': '2023-06-06T12:57:45.300Z',
+13 silly view       '0.0.41': '2023-06-09T16:15:00.068Z',
+13 silly view       '0.0.42': '2023-06-09T23:56:23.051Z',
+13 silly view       '0.0.43': '2023-06-12T01:30:02.181Z',
+13 silly view       '0.0.44': '2023-06-13T01:27:31.770Z',
+13 silly view       '0.0.45': '2023-06-14T02:55:31.339Z',
+13 silly view       '0.0.46': '2023-06-14T13:00:55.468Z',
+13 silly view       '0.0.47': '2023-06-15T12:42:32.889Z',
+13 silly view       '0.0.48': '2023-06-16T04:09:24.406Z',
+13 silly view       '0.0.49': '2023-06-16T08:31:14.730Z',
+13 silly view       '0.0.50': '2023-06-20T02:42:37.423Z',
+13 silly view       '0.0.51': '2023-09-05T03:44:50.885Z',
+13 silly view       '0.0.52': '2023-09-07T13:12:58.582Z',
+13 silly view       '0.0.53': '2023-09-14T11:46:35.393Z',
+13 silly view       '0.0.54': '2023-09-18T03:18:43.213Z',
+13 silly view       '0.0.55': '2023-09-18T11:44:52.981Z',
+13 silly view       '0.0.56': '2023-09-22T02:29:19.824Z',
+13 silly view       '0.0.57': '2023-09-22T09:10:50.652Z',
+13 silly view       '0.0.58': '2023-09-25T06:39:21.241Z',
+13 silly view       '0.0.59': '2024-02-27T07:30:36.274Z',
+13 silly view       '0.0.60': '2024-03-08T09:28:54.470Z',
+13 silly view       '0.0.61': '2024-04-08T03:23:01.196Z',
+13 silly view       '0.0.62': '2024-04-12T09:46:28.444Z',
+13 silly view       '0.0.63': '2024-04-17T07:33:47.998Z',
+13 silly view       '0.0.64': '2024-04-23T07:45:39.059Z',
+13 silly view       '0.0.65': '2024-05-11T09:03:41.607Z',
+13 silly view       '0.0.66': '2024-05-15T02:10:07.681Z',
+13 silly view       '0.0.67': '2024-05-15T08:59:11.980Z',
+13 silly view       '0.0.68': '2024-08-12T12:37:26.632Z',
+13 silly view       '0.0.69': '2024-09-24T09:19:28.278Z',
+13 silly view       '0.0.70': '2024-12-27T08:59:24.103Z',
+13 silly view       '0.0.71': '2025-02-08T10:32:27.032Z',
+13 silly view       '0.0.72': '2025-02-10T03:55:19.845Z',
+13 silly view       '0.0.73': '2025-02-17T08:02:19.541Z',
+13 silly view       '0.0.74': '2025-03-25T14:02:33.406Z',
+13 silly view       '0.0.75': '2025-04-07T13:14:19.328Z',
+13 silly view       '0.0.76': '2025-04-27T15:42:52.087Z',
+13 silly view       '0.0.77': '2025-04-27T16:39:41.655Z',
+13 silly view       '0.0.78': '2025-04-27T17:13:41.423Z',
+13 silly view       '1.0.0': '2025-07-03T08:17:03.885Z',
+13 silly view       '1.0.0-alpha.1': '2025-07-31T01:39:19.189Z',
+13 silly view       '1.0.1': '2025-08-07T03:27:50.636Z',
+13 silly view       '1.0.2': '2025-09-24T09:02:25.033Z',
+13 silly view       '0.0.79': '2025-11-11T07:06:03.058Z',
+13 silly view       '1.0.3': '2025-11-25T06:54:44.622Z',
+13 silly view       '1.0.4': '2025-11-29T10:19:43.032Z',
+13 silly view       '1.0.1-sp1': '2025-12-10T12:54:33.657Z',
+13 silly view       '1.1.0-alpha.1': '2025-12-11T12:13:45.594Z',
+13 silly view       '1.1.0-alpha.2': '2025-12-12T02:42:48.475Z',
+13 silly view       '1.1.0-alpha.3': '2025-12-23T13:30:35.579Z',
+13 silly view       '1.0.1-sp2': '2025-12-27T10:31:34.413Z',
+13 silly view       '1.0.1-sp4': '2025-12-31T07:13:29.402Z',
+13 silly view       '1.1.0-alpha.4': '2026-01-08T06:32:09.930Z',
+13 silly view       '1.1.0': '2026-01-19T10:08:55.327Z',
+13 silly view       '1.2.0': '2026-02-12T03:42:29.166Z',
+13 silly view       '1.2.1': '2026-03-09T09:47:39.036Z'
+13 silly view     },
+13 silly view     versions: [
+13 silly view       '0.0.1',         '0.0.2',         '0.0.3',         '0.0.4',
+13 silly view       '0.0.5',         '0.0.6',         '0.0.7',         '0.0.8',
+13 silly view       '0.0.9',         '0.0.10',        '0.0.11',        '0.0.12',
+13 silly view       '0.0.13',        '0.0.14',        '0.0.15',        '0.0.16',
+13 silly view       '0.0.17',        '0.0.18',        '0.0.19',        '0.0.20',
+13 silly view       '0.0.21',        '0.0.22',        '0.0.23',        '0.0.24',
+13 silly view       '0.0.25',        '0.0.26',        '0.0.27',        '0.0.28',
+13 silly view       '0.0.29',        '0.0.30',        '0.0.32',        '0.0.33',
+13 silly view       '0.0.34',        '0.0.35',        '0.0.36',        '0.0.37',
+13 silly view       '0.0.38',        '0.0.39',        '0.0.40',        '0.0.41',
+13 silly view       '0.0.42',        '0.0.43',        '0.0.44',        '0.0.45',
+13 silly view       '0.0.46',        '0.0.47',        '0.0.48',        '0.0.49',
+13 silly view       '0.0.50',        '0.0.51',        '0.0.52',        '0.0.53',
+13 silly view       '0.0.54',        '0.0.55',        '0.0.56',        '0.0.57',
+13 silly view       '0.0.58',        '0.0.59',        '0.0.60',        '0.0.61',
+13 silly view       '0.0.62',        '0.0.63',        '0.0.64',        '0.0.65',
+13 silly view       '0.0.66',        '0.0.67',        '0.0.68',        '0.0.69',
+13 silly view       '0.0.70',        '0.0.71',        '0.0.72',        '0.0.73',
+13 silly view       '0.0.74',        '0.0.75',        '0.0.76',        '0.0.77',
+13 silly view       '0.0.78',        '0.0.79',        '1.0.0-alpha.1', '1.0.0',
+13 silly view       '1.0.1-sp1',     '1.0.1-sp2',     '1.0.1-sp4',     '1.0.1',
+13 silly view       '1.0.2',         '1.0.3',         '1.0.4',         '1.1.0-alpha.1',
+13 silly view       '1.1.0-alpha.2', '1.1.0-alpha.3', '1.1.0-alpha.4', '1.1.0',
+13 silly view       '1.2.0',         '1.2.1'
+13 silly view     ],
+13 silly view     description: '<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p>\r <h1 align="center">opendesign</h1>\r <p align="center">一个 Vue 3 组件库</p>\r <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>',
+13 silly view     keywords: [ 'opendesign', 'vue3 components' ],
+13 silly view     maintainers: [ [Object], [Object], [Object] ],
+13 silly view     license: 'MIT',
+13 silly view     bugs: {
+13 silly view       url: 'https://atomgit.com/openeuler/opendesign-components/issues'
+13 silly view     },
+13 silly view     repository: {
+13 silly view       type: 'git',
+13 silly view       url: 'https://atomgit.com/openeuler/opendesign-components.git'
+13 silly view     },
+13 silly view     _source_registry_name: 'default',
+13 silly view     _contentLength: 58222,
+13 silly view     version: '1.2.1',
+13 silly view     main: 'lib/index.js',
+13 silly view     module: 'es/index.mjs',
+13 silly view     types: 'es/index.d.ts',
+13 silly view     typings: 'lib/index.d.ts',
+13 silly view     unpkg: 'dist/opendesign.min.js',
+13 silly view     peerDependencies: { vue: '^3.3.0', '@vueuse/core': '^10.11.1' },
+13 silly view     devDependencies: {
+13 silly view       '@opensig/open-scripts': '1.0.4',
+13 silly view       typescript: '~5.8.3',
+13 silly view       vite: '^6.2.3',
+13 silly view       'vue-tsc': '2.2.8'
+13 silly view     },
+13 silly view     homepage: '',
+13 silly view     scripts: {
+13 silly view       'gen:icon': 'open-scripts gen:icon --config ./icons/icon.config.ts',
+13 silly view       'clean:svg': 'open-scripts clean:svg --config ./icons/cleansvg.config.ts',
+13 silly view       'build:component': 'open-scripts build:component',
+13 silly view       'build:style': 'open-scripts build:style',
+13 silly view       build: 'pnpm gen:icon && pnpm build:component && pnpm build:style',
+13 silly view       lint: "eslint  --ignore-pattern './src/**/__demo__/*' --ignore-pattern './src/**/__docs__/*' ./src",
+13 silly view       'lint:fix': "eslint  --ignore-pattern './src/**/__demo__/*' --ignore-pattern './src/**/__docs__/*' --fix ./src",
+13 silly view       'type-check': 'vue-tsc --build',
+13 silly view       release: 'pnpm publish --registry https://registry.npmjs.org'
+13 silly view     },
+13 silly view     _integrity: 'sha512-kxux3FwFK6v3+jpbyG4VC1guYlw4KElF/tzK7RkkMs15cRpw3SJKONZuRmg/3qHlYlf/23qLPonXpIRDb58HDw==',
+13 silly view     _resolved: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\2\\4d5b3d03152bb7d6c189bcb122bd120b\\opensig-opendesign-1.2.1.tgz',
+13 silly view     _from: 'file:opensig-opendesign-1.2.1.tgz',
+13 silly view     _nodeVersion: '24.13.1',
+13 silly view     _npmVersion: '11.4.1',
+13 silly view     dist: {
+13 silly view       integrity: 'sha512-kxux3FwFK6v3+jpbyG4VC1guYlw4KElF/tzK7RkkMs15cRpw3SJKONZuRmg/3qHlYlf/23qLPonXpIRDb58HDw==',
+13 silly view       shasum: 'a0dc258d7a1789034fd54454c055b9d5bfcbb9d0',
+13 silly view       tarball: 'https://registry.npmmirror.com/@opensig/opendesign/-/opendesign-1.2.1.tgz',
+13 silly view       fileCount: 3958,
+13 silly view       unpackedSize: 13048843,
+13 silly view       signatures: [Array],
+13 silly view       size: 2180681
+13 silly view     },
+13 silly view     _npmUser: { name: 'gzbang', email: '15622356989@163.com' },
+13 silly view     directories: {},
+13 silly view     _npmOperationalInternal: {
+13 silly view       host: 's3://npm-registry-packages-npm-production',
+13 silly view       tmp: 'tmp/opendesign_1.2.1_1773049658747_0.22206595672164164'
+13 silly view     },
+13 silly view     _hasShrinkwrap: false,
+13 silly view     _cnpmcore_publish_time: '2026-03-09T09:47:39.036Z',
+13 silly view     publish_time: 1773049659036
+13 silly view   }
+13 silly view }
+14 verbose cwd D:\forks\OpenDesignPlus\packages\components\src\components\meeting
+15 verbose os Windows_NT 10.0.17763
+16 verbose node v22.18.0
+17 verbose npm  v10.9.3
+18 verbose exit 0
+19 info ok

package/src/draft/Banner.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { onMounted, type PropType } from 'vue';
+import { OButton } from '@opensig/opendesign';
+
+import AOS from 'aos';
+
+import ContentWrapper from './ContentWrapper.vue';
+
+defineProps({
+  backgroundImage: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  // 风格
+  theme: {
+    type: String as PropType<'light' | 'dark'>,
+    default: 'light',
+  },
+  // 指定在何处显示链接的资源
+  target: {
+    type: String,
+    default: '_blank',
+  },
+  size: {
+    type: String as PropType<'small' | 'medium' | 'large'>,
+    default: 'medium',
+  },
+});
+
+onMounted(() => {
+  AOS.init({
+    duration: 800,
+  });
+});
+</script>
+
+<template>
+  <div class="banner-content" :class="`banner-${size}`">
+    <div class="banner-bg" :style="{ backgroundImage: `url(${backgroundImage})` }"></div>
+    <ContentWrapper class="banner-text">
+      <div class="banner-text-content">
+        <p v-if="title" class="banner-title" data-aos="fade-up">{{ title }}</p>
+        <p v-if="subtitle" class="banner-subtitle" data-aos="fade-up">
+          {{ subtitle }}
+        </p>
+        <OButton v-if="href" variant="outline" color="primary" size="medium" :href="href" :target="target"
+          class="learn-btn">
+          <span>{{ text }}</span>
+        </OButton>
+      </div>
+    </ContentWrapper>
+  </div>
+</template>
+
+<style lang="scss">
+.banner-content {
+  width: 100%;
+  position: relative;
+}
+
+.banner-bg {
+  height: 100%;
+  margin: 0 auto;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.banner-text {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.banner-text-content {
+  height: 100%;
+}
+
+.learn-btn {
+  margin-top: 24px;
+}
+
+.banner-small {
+  height: 280px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 48px;
+    @include display2;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include text2;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 220px;
+
+    .banner-title {
+      padding-top: 40px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 180px;
+
+    .banner-title {
+      padding-top: 32px;
+      @include h1;
+    }
+
+    .banner-subtitle {
+      @include tip1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+}
+
+.banner-medium {
+  height: 360px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 88px;
+    @include display2;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include text2;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 280px;
+
+    .banner-title {
+      padding-top: 64px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 220px;
+
+    .banner-title {
+      padding-top: 48px;
+      @include h1;
+    }
+
+    .banner-subtitle {
+      @include tip1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 120px;
+
+    .banner-title {
+      text-align: center;
+      padding-top: 48px;
+      @include h3;
+    }
+
+    .banner-subtitle {
+      display: none;
+    }
+  }
+}
+
+.banner-large {
+  height: 460px;
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    padding-top: 124px;
+    @include display1;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    width: 60%;
+    @include h4;
+  }
+
+  @media (min-width: 1201px) and (max-width: 1680px) {
+    height: 400px;
+
+    .banner-title {
+      padding-top: 100px;
+      @include display2;
+    }
+
+    .banner-subtitle {
+      @include text2;
+    }
+  }
+
+  @include respond-to('pad_h') {
+    height: 320px;
+
+    .banner-title {
+      padding-top: 80px;
+      @include display3;
+    }
+
+    .banner-subtitle {
+      @include text1;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 184px;
+
+    .banner-title {
+      text-align: center;
+      padding-top: 48px;
+      @include h3;
+    }
+
+    .banner-subtitle {
+      text-align: center;
+      @include tip2;
+    }
+  }
+}
+</style>

package/src/draft/ButtonCards.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OCard, type CardPropsT, OScroller, OLink, OButton } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen.ts';
+
+const { isPadV, isPhone } = useScreen();
+
+export type OperationType = 'button' | 'link';
+export type OperationAction = string | (() => void);
+export type ButtonCardOperation = {
+  label: string;
+  type?: OperationType;
+  action: OperationAction;
+}
+
+export type IconCardT = Pick<CardPropsT, 'title' | 'detail' | 'cover'> & {
+  operations?: ButtonCardOperation[]
+};
+
+const props = withDefaults(defineProps<{
+  /*卡片各自的配置*/
+  cards: IconCardT[];
+  /*所有卡片的配置，优先级低于cards*/
+  cardProps?: CardPropsT;
+}>(), {
+});
+
+
+const widthPerCard = computed(() => {
+  if(isPhone.value) {
+    return `100%`;
+  }
+  if(isPadV.value) {
+    return `calc((100% - var(--grid-column-gutter)) / 2)`;
+  }
+  if(props.cards.length <= 4) {
+    return `calc((100% - var(--grid-column-gutter) * ${props.cards.length - 1}) / ${props.cards.length})`;
+  }
+  return `calc((100% - var(--grid-column-gutter) * 3) / 4)`;
+});
+
+const getAction = (action: OperationAction) => {
+  if (typeof action === 'string') {
+    window.open(action, '_blank');
+    return;
+  }
+  action();
+}
+</script>
+
+<template>
+  <OScroller v-if="props.cards?.length" class="multi-card-wrapper"  show-type="always" disabled-y>
+    <OCard
+      v-for="(card, index) in cards"
+      :key="index"
+      class="multi-icon-card-item"
+      v-bind="{
+        coverRatio: 16/9,
+        ...props.cardProps,
+        ...card,
+      }"
+    >
+      <template #footer>
+        <div class="operations">
+          <template v-for="item in card.operations" :key="item.label">
+            <OButton v-if="item.type === 'button'" size="large" round="pill" @click="getAction(item.action)">Button</OButton>
+            <OLink v-else @click="getAction(item.action)">Link</OLink>
+          </template>
+        </div>
+      </template>
+    </OCard>
+  </OScroller>
+</template>
+
+<style lang="scss" scoped>
+.multi-card-wrapper {
+  white-space: nowrap;
+  --grid-column-gutter: var(--o3-gap-6);
+  --card-detail-max-row: 2;
+}
+
+.operations {
+  @include text1;
+  display: flex;
+  gap: var(--o3-gap-4);
+  align-items: center;
+}
+
+.o-card {
+  --card-content-color: var(--o-color-info3);
+  --card-footer-gap: var(--o3-gap-3);
+  display: inline-block;
+  width: v-bind(widthPerCard);
+
+  &:not(:first-child) {
+    margin-left: var(--grid-column-gutter);
+  }
+
+  @include respond-to("phone") {
+    --card-header-text-size: 16px;
+    --card-header-text-height: 24px;
+    --card-content-text-size: 14px;
+    --card-content-text-height: 22px;
+  }
+}
+</style>