> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Card > Cards are flexible containers that group related content and actions into a single scannable unit. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return
{}
{} {children &&
{children}
}
; }; export const CardTile = ({title, href, imageLightSrc, imageDarkSrc, children, enableImgZoom}) => { if (!href) { return
{imageLightSrc && {title}} {imageDarkSrc && {title}} {title &&

{title}

}
{children}
; } return {imageLightSrc && {title}} {imageDarkSrc && {title}} {title &&

{title}

}
{children}
; }; BEEQ Card component overview BEEQ Card component overview Cards group related content and actions into a single scannable surface. Use them to present highlights, supporting details, or compact summaries without forcing a rigid internal layout. `bq-card` does not enforce an internal layout. **You decide how to structure the content inside** — this flexibility supports everything from simple text blocks to rich data displays with icons, metrics, and actions. ## When to use Use cards when * You want to present concise information, actions, or collections of related content in a visually organized and scannable format * You need to highlight featured details, related content, or navigation options in a contained surface * The design benefits from a structured layout that helps users scan and compare grouped content Do not use cards when * You are presenting a single piece of information that does not need additional structure or supporting elements * The content is a deeply interactive workflow — a form, a wizard, or a data table — where a card would act as a passive wrapper around something that deserves its own full-page context * The design calls for a more fluid and continuous display instead of separated content blocks ## Card patterns The Card pattern can support multiple presentation styles depending on the content you're presenting. A compact layout for tight spaces — ideal for quick stats, summaries, or navigation links where a full-size card would feel heavy. Multiple cards of the same type arranged in a grid or column — works well for scannable collections like articles, products, or team members. A structured card with a heading and supporting text — use when the card needs to explain something or guide users toward a next step. ## Anatomy Cards are flexible containers, so their anatomy can vary depending on the content. In most cases, a card includes a container, an optional visual element, a content area, and optional supporting actions. BEEQ Card component anatomy BEEQ Card component anatomy | Part | Element | Description | | ----- | ------------ | --------------------------------------------------------------------------------------------- | | **1** | Container | The outer surface that groups the content into a single, scannable unit | | **2** | Visual | An optional icon, image, or highlight area that helps users identify the card content quickly | | **3** | Content area | The main body containing the title, description, metrics, or supporting text | | **4** | Actions | Optional buttons or links used when the card includes follow-up actions | ## Design guidelines ### Alignment Arrange cards side by side, flowing left to right. This is the default layout for card groups and works best when each card has a similar amount of content. When horizontal space is limited — narrow viewports or sidebars — the group should stack vertically. Keep card widths consistent within the group so users can scan without re-learning the layout on each item. ### Typography Establish a clear hierarchy inside each card by following this order: Bold or larger text for the headline — a title, metric, or name. This is what users read first. Secondary-weight or muted text for context — a description, timestamp, or label. A brand-colored link or button at the bottom. Keep it to one primary action per card. Avoid using more than two distinct text styles in a single card to keep the layout readable. ### States `bq-card` has no built-in hover, active, or focus visual feedback — it is a static container by design. Interactive children such as buttons and links carry their own state styles. When a whole card represents a navigable destination, wrap it in a semantic `` element rather than relying on a click handler on the card surface (see [Accessibility](#accessibility) for details). ## Usage The examples below show the most common card layouts, each with a live preview and code for HTML, React, Angular, and Vue. ### Default content A card with icon, title, description, and a call-to-action — use when users need context before deciding to act. .card--default { max-width: 24rem; width: 100%; &::part(wrapper) { display: flex; flex-direction: column; gap: var(--bq-spacing-m); } h6 { font-size: var(--bq-font-size--l); font-weight: var(--bq-font-weight--bold); } p { margin-block-start: var(--bq-spacing-m); } }
Designing with Intelligence: The AI-Driven Future

Uncover the synergy between design and artificial intelligence, where smart algorithms enhance user interfaces. Discover how AI-driven insights, automation, and personalization...

Read more...
`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .card--default { max-width: 24rem; width: 100%; &::part(wrapper) { display: flex; flex-direction: column; gap: var(--bq-spacing-m); } h6 { font-size: var(--bq-font-size--l); font-weight: var(--bq-font-weight--bold); } p { margin-block-start: var(--bq-spacing-m); } } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Designing with Intelligence: The AI-Driven Future

Uncover the synergy between design and artificial intelligence, where smart algorithms enhance user interfaces. Discover how AI-driven insights, automation, and personalization...

Read more...
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqButton, BqCard, BqIcon } from "@beeq/react"; import "./styles.css";
Designing with Intelligence: The AI-Driven Future

Uncover the synergy between design and artificial intelligence, where smart algorithms enhance user interfaces. Discover how AI-driven insights, automation, and personalization...

Read more...
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqCard, BqIcon, BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqCard, BqIcon, BqButton], template: `
Designing with Intelligence: The AI-Driven Future

Uncover the synergy between design and artificial intelligence, where smart algorithms enhance user interfaces. Discover how AI-driven insights, automation, and personalization...

Read more...
`, styles: [` .card--default { max-width: 24rem; width: 100%; &::part(wrapper) { display: flex; flex-direction: column; gap: var(--bq-spacing-m); } h6 { font-size: var(--bq-font-size--m); font-weight: var(--bq-font-weight--bold); } p { margin-block-start: var(--bq-spacing-m); } } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Card list Use a card list when you have a collection of items that share the same structure — product catalogs, article feeds, team directories. The repeated layout helps users scan and compare entries quickly without having to re-learn the pattern on each card. .card--highlights { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; flex-direction: column; gap: var(--bq-spacing-m); } & h6 { font-size: var(--bq-font-size--l); font-weight: var(--bq-font-weight--bold); } & section { display: flex; flex-direction: column; gap: var(--bq-spacing-s); & .item { display: flex; gap: var(--bq-spacing-s); } } }
Title
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .card--highlights { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; flex-direction: column; gap: var(--bq-spacing-m); } & h6 { font-size: var(--bq-font-size--l); font-weight: var(--bq-font-weight--bold); } & section { display: flex; flex-direction: column; gap: var(--bq-spacing-s); & .item { display: flex; gap: var(--bq-spacing-s); } } } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Title
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqCard, BqIcon } from "@beeq/react"; import "./styles.css";
Title
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqCard, BqIcon } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqCard, BqIcon], template: `
Title
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
`, styles: [` .card--highlights { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; flex-direction: column; gap: var(--bq-spacing-m); } & h6 { font-size: var(--bq-font-size--l); font-weight: var(--bq-font-weight--bold); } & section { display: flex; flex-direction: column; gap: var(--bq-spacing-s); & .item { display: flex; gap: var(--bq-spacing-s); } } } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Performance overview A KPI card combining an icon, headline value, and trend indicator — ideal for analytics dashboards and executive reports. .card--overview { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; gap: var(--bq-spacing-m); } & h4 { font-size: var(--bq-font-size--xxl); } & .card--body { display: flex; flex-direction: column; gap: var(--bq-spacing-xs2); } & .body__top { display: flex; align-items: center; gap: var(--bq-spacing-xs2); } & .body__bottom { display: flex; align-items: flex-end; gap: var(--bq-spacing-xs); } & .text-secondary { color: var(--bq-text--secondary); } & .text-success { color: var(--bq-text--success); } }
Title

194

+24% than last mo.
`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .card--overview { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; gap: var(--bq-spacing-m); } & h4 { font-size: var(--bq-font-size--xxl); } & .card--body { display: flex; flex-direction: column; gap: var(--bq-spacing-xs2); } & .body__top { display: flex; align-items: center; gap: var(--bq-spacing-xs2); } & .body__bottom { display: flex; align-items: flex-end; gap: var(--bq-spacing-xs); } & .text-secondary { color: var(--bq-text--secondary); } & .text-success { color: var(--bq-text--success); } } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Title

194

+24% than last mo.
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqCard, BqIcon } from "@beeq/react"; import "./styles.css";
Title

194

+24% than last mo.
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqCard, BqIcon } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqCard, BqIcon], template: `
Title

194

+24% than last mo.
`, styles: [` .card--overview { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; gap: var(--bq-spacing-m); } & h4 { font-size: var(--bq-font-size--xxl); } & .card--body { display: flex; flex-direction: column; gap: var(--bq-spacing-xs2); } & .body__top { display: flex; align-items: center; gap: var(--bq-spacing-xs2); } & .body__bottom { display: flex; align-items: flex-end; gap: var(--bq-spacing-xs); } & .text-secondary { color: var(--bq-text--secondary); } & .text-success { color: var(--bq-text--success); } } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Mini card A compact horizontal card using `type="minimal"` that removes built-in padding, letting you create visually distinct inner zones — like the branded left panel shown here. .card--mini { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; overflow: clip; } & .content--start { display: flex; align-items: center; padding: var(--bq-spacing-l); background-color: var(--bq-background--brand); } & .content--end { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: var(--bq-card--paddingMinimal); } & .body { display: flex; flex-direction: column; padding-left: 0.5rem; } & h6 { font-size: var(--bq-font-size--m); font-weight: var(--bq-font-weight--medium); } & p { font-size: var(--bq-font-size--xs); color: var(--bq-text--secondary); } & .decorator { padding: var(--bq-card--paddingMinimal); } }
Disciplines

Explore the extensive range of disciplines available at our university.

 `} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .card--mini { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; overflow: clip; } & .content--start { display: flex; align-items: center; padding: var(--bq-spacing-l); background-color: var(--bq-background--brand); } & .content--end { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: var(--bq-card--paddingMinimal); } & .body { display: flex; flex-direction: column; padding-left: 0.5rem; } & h6 { font-size: var(--bq-font-size--m); font-weight: var(--bq-font-weight--medium); } & p { font-size: var(--bq-font-size--xs); color: var(--bq-text--secondary); } & .decorator { padding: var(--bq-card--paddingMinimal); } } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Disciplines

Explore the extensive range of disciplines available at our university.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqCard, BqIcon } from "@beeq/react"; import "./styles.css";
Title

description

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqCard, BqIcon } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqCard, BqIcon], template: `
Disciplines

Explore the extensive range of disciplines available at our university.

 `, styles: [` .card--mini { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; overflow: clip; } & .content--start { display: flex; align-items: center; padding: var(--bq-spacing-l); background-color: var(--bq-background--brand); } & .content--end { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: var(--bq-card--paddingMinimal); } & .body { display: flex; flex-direction: column; padding-left: 0.5rem; } & h6 { font-size: var(--bq-font-size--m); font-weight: var(--bq-font-weight--medium); } & p { font-size: var(--bq-font-size--xs); color: var(--bq-text--secondary); } & .decorator { padding: var(--bq-card--paddingMinimal); } } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Options ### Types `type` is a layout decision that controls whether the card applies its own internal padding or leaves spacing entirely up to you. | Type | Padding | When to use | | ----------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- | | **default** | Built-in (`var(--bq-spacing-l)`) | Most cards — content sits comfortably inside without extra wrapper elements | | **minimal** | None | When you need full control over inner layout, such as a branded color block flush with the card edge | Reach for `type="minimal"` only when your design requires content to bleed to the card edge. For everything else, `default` keeps spacing consistent automatically. .card--types { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--bq-spacing-m); }

Default — built-in padding applied automatically

Minimal — no padding, you control the spacing
`} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Default — built-in padding applied automatically

Minimal — no padding, you control the spacing
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqCard } from "@beeq/react";

Default — built-in padding applied automatically

Minimal — no padding, you control the spacing
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqCard } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqCard], template: `

Default — built-in padding applied automatically

Minimal — no padding, you control the spacing
`, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Border radius Use the `border` property to control the card corner radius. .card--borders { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--bq-spacing-m); & bq-card { width: 100%; &::part(wrapper) { display: flex; align-items: center; justify-content: center; } & span { font-size: var(--bq-font-size--s); color: var(--bq-text--secondary); } } }
border="none" border="xs2" border="xs" border="s" border="m" border="l" border="full"
`} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} border="none" border="xs2" border="xs" border="s" border="m" border="l" border="full" ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqCard } from "@beeq/react"; import "./styles.css"; border="none" border="xs2" border="xs" border="s" border="m" border="l" border="full" ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqCard } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqCard], template: ` border="none" border="xs2" border="xs" border="s" border="m" border="l" border="full" `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Use `--bq-card--borderColor`, `--bq-card--borderStyle`, and `--bq-card--borderWidth` together on the `wrapper` shadow part to add a visible card border. By default, all three resolve to values that produce no visible border. ## Best practices Do Keep cards within the same group visually consistent — same size, same internal layout — so users can scan and compare them quickly. Don't Mix unrelated card layouts in the same group when users are expected to compare items — inconsistency makes scanning harder. Do Limit each card to one primary topic or action. If a card is trying to do too much, consider splitting the content or using a dedicated page. Don't Overload a card with long descriptions or multiple unrelated actions — if the content needs more room, a dedicated page or panel is a better fit. Do Lead with the most important information. Place the primary value — a number, a name, or a status — at the top so users see it at a glance before reading further. Don't Nest cards inside other cards. It creates visual confusion and makes hierarchy hard to follow — use a different layout pattern instead. Do Choose icons that match the card's content — a wallet for finance, a chart for analytics. Users should be able to identify the card's purpose from the icon at a glance. Don't Use icons as pure decoration. An icon that has no connection to the card's content adds visual noise without adding meaning. ## Accessibility * **Images** — provide descriptive `alt` text for any images inside a card so screen readers can convey what the image shows. * **Headings** — use a proper heading hierarchy within the card so assistive technologies can navigate the content structure correctly. * **Keyboard navigation** — ensure all interactive elements inside a card (buttons, links) are reachable and operable with the keyboard alone. * **Color contrast** — maintain sufficient contrast between the card background, text, and UI elements so content remains readable for all users. ### Navigation When a card represents a link destination (for example, an article or product), wrap it in a semantic `` element. `bq-card` is a non-interactive container and does not handle click or keyboard events on its own. .card-link { border-radius: var(--bq-radius--m); text-decoration: none; cursor: pointer; &:hover { & .card--mini::part(wrapper) { transform: translateY(-2px); box-shadow: var(--bq-box-shadow--m); } } &:focus-visible { outline-offset: 2px; outline: 2px solid var(--bq-focus); } .card--mini { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; overflow: clip; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; } & .content--start { display: flex; align-items: center; padding: var(--bq-spacing-l); background-color: var(--bq-background--brand); } & .content--end { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: var(--bq-card--paddingMinimal); } & .body { display: flex; flex-direction: column; padding-left: 0.5rem; } & h6 { font-size: var(--bq-font-size--m); font-weight: var(--bq-font-weight--medium); } & p { font-size: var(--bq-font-size--xs); color: var(--bq-text--secondary); } & .decorator { padding: var(--bq-card--paddingMinimal); } } }
Disciplines

Explore the extensive range of disciplines available at our university.

 `} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .card-link { border-radius: var(--bq-radius--m); text-decoration: none; cursor: pointer; &:hover { & .card--mini::part(wrapper) { transform: translateY(-0.125rem); box-shadow: var(--bq-box-shadow--m); } } &:focus-visible { outline-offset: 2px; outline: 2px solid var(--bq-focus); } .card--mini { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; overflow: clip; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; } /** Same as the [Mini card example](#mini-card) */ } } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Disciplines

Explore the extensive range of disciplines available at our university.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqCard, BqIcon } from "@beeq/react"; import "./styles.css";
Disciplines

Explore the extensive range of disciplines available at our university.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqCard, BqIcon } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqCard, BqIcon], template: `
Disciplines

Explore the extensive range of disciplines available at our university.

 `, styles: [` .card-link { border-radius: var(--bq-radius--m); text-decoration: none; cursor: pointer; &:hover { & .card--mini::part(wrapper) { transform: translateY(-0.125rem); box-shadow: var(--bq-box-shadow--m); } } &:focus-visible { outline-offset: 2px; outline: 2px solid var(--bq-focus); } .card--mini { width: 100%; max-width: 24rem; &::part(wrapper) { display: flex; overflow: clip; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; } /** Same as the [Mini card example](#mini-card) */ } } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## API reference ### Properties | Property | Attribute | Description | Type | Default | | -------- | --------- | --------------------------------------- | -------------------------------------------------------------------- | ----------- | | `border` | `border` | The corner radius of the card component | `'none'` \| `'xs2'` \| `'xs'` \| `'s'` \| `'m'` \| `'l'` \| `'full'` | `'m'` | | `type` | `type` | Type of card component | `'default'` \| `'minimal'` | `'default'` | ### Slots | Slot | Description | | ----------- | --------------------------------- | | *(default)* | The content of the card component | ### Shadow parts | Part | Description | | --------- | ------------------------------------------------------------------ | | `wrapper` | The wrapper container `
` of the element inside the shadow DOM | ### CSS custom properties | Variable | Description | Default | | --------------------------- | --------------------- | --------------------------------- | | `--bq-card--borderColor` | Card border color | `transparent` | | `--bq-card--borderRadius` | Card border radius | `var(--bq-radius--m)` | | `--bq-card--borderStyle` | Card border style | `solid` | | `--bq-card--borderWidth` | Card border width | `0` | | `--bq-card--padding` | Card padding | `var(--bq-spacing-l)` | | `--bq-card--paddingMinimal` | Minimal card padding | `var(--bq-spacing-xs)` | | `--bq-card--background` | Card background color | `var(--bq-background--secondary)` | Learn more about [styling with shadow parts](/guides/styles#component-shadow-dom-parts) and [CSS custom properties](/guides/styles#global-css-custom-properties). ## Resources Explore card configurations in Storybook View the component source on GitHub