Card

Group related information and actions in one area.

<sy-card>Installation guide Basic usage

Live preview

Interact with the component to see results here.

Title

Allow collapseExpandedShow footerBackdrop effect

View code

HTML

<sy-card
  title="Project status"
  collapsible
  active
  show-footer
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p><span
    slot="footer"
  >Last updated · Today</span>
</sy-card>

Usage guide

Contain one independent collection of information, such as a project or product. Use Layout or Flex for simple page arrangement.

Title and tools: Put the title in cardTitle or the header slot, and secondary actions in header-actions.
Body and footer: Place content in the default slot and follow-up actions in footer.
Cover image: The cover slot is displayed only when showCover is also enabled.

Examples

Basic information

Group a title and content in one card.

View code

HTML

<sy-card title="Project status" id="sample">
  <p>Review this week's completed work and upcoming schedule.</p>
</sy-card>

Title actions and footer

Place secondary actions in header-actions and next-step actions in footer.

View code

HTML

<sy-card title="Project status" id="sample">
  <p>Review this week's completed work and upcoming schedule.</p>
  <sy-button slot="header-actions" size="small">Edit</sy-button>
  <sy-button slot="footer" variant="primary">Open project</sy-button>
</sy-card>

Cover area

Set both showCover and the cover slot.

View code

HTML

<sy-card
  title="Project status"
  show-cover
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p>
  <div slot="cover" style="background:#eee9f8;padding:24px;color:#6750a4">SYIDAX
    · TEAM WORKSPACE</div>
</sy-card>

Control expansion

Use methods to collapse or expand the content.

View code

HTML

<sy-card
  title="Project status"
  collapsible
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p>
</sy-card>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Collapse</sy-button>
  <sy-button id="action-1" size="small">Expand</sy-button>
  <sy-button id="action-2" size="small">Toggle</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.collapse();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.expand();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.toggle();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-card
  title="Project status"
  collapsible
  active
  show-footer
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p><span
    slot="footer"
  >Last updated · Today</span>
</sy-card>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["toggled"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Card icon and backdrop

Enable showBackdrop and showIcon to display the backdrop effect and title icon. Set icon to an SVG file path.

View code

HTML

<sy-card
  title="Project status"
  collapsible
  active
  show-footer
  show-backdrop
  show-icon
  icon="/assets/examples/star.svg"
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p><span
    slot="footer"
  >Last updated · Today</span>
</sy-card>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "showBackdrop": true,
    "showIcon": true,
    "icon": "/assets/examples/star.svg"
  });
</script>

Expansion and collapse delay

Both opening and closing delays are set to 300ms. Click the title to check the transition timing.

View code

HTML

<sy-card
  title="Project status"
  collapsible
  active
  show-footer
  show-scroll-bar
  open-delay="300"
  close-delay="300"
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p><span
    slot="footer"
  >Last updated · Today</span>
</sy-card>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "collapsible": true,
    "showScrollBar": true,
    "openDelay": 300,
    "closeDelay": 300
  });
</script>

Initially collapsed card

Start with the card collapsed and open its content from the header.

View code

HTML

<sy-card
  title="Project status"
  collapsible
  active="false"
  show-footer
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p><span
    slot="footer"
  >Last updated · Today</span>
</sy-card>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "collapsible": true,
    "active": false
  });
</script>

Feature examples

Choose a feature from 4 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Property · Backdrop

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Collapsible

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Usage examples · Initially collapsed card

Start with the card collapsed and open its content from the header.

View code

HTML

<sy-card
  title="Project status"
  collapsible
  active="false"
  show-footer
  id="sample"
>
  <p>Review this week's completed work and upcoming schedule.</p><span
    slot="footer"
  >Last updated · Today</span>
</sy-card>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "collapsible": true,
    "active": false
  });
</script>

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-card>`

Properties

Type	Default	Description
`boolean`	`false`	Allow the card content to be collapsed and expanded.
`boolean`	`true`	Whether the body is expanded.
`boolean`	`false`	Show the cover slot.
`boolean`	`true`	Show the footer slot.
`boolean`	`false`	Use the card backdrop effect.
`boolean`	`false`	Allow scrollbars in the content area.
`boolean`	`false`	Show the status icon.
`string`	`''`	Set icon visibility or icon content. Check the format supported by each component.
`string`	`'Card Title'`	Card title.
`boolean`	`false`	Legacy alias for `show-backdrop`.
`number`	`0`	Expansion delay in milliseconds.
`number`	`0`	Collapse delay in milliseconds.

Events

Event	Detail	Description
	`CustomEvent<{ active: boolean }>`	Read the result from the event's detail.

Methods

Method	Returns	Description
	`Promise<void>`	Toggle the current expansion state.
	`Promise<void>`	Expand the body.
	`Promise<void>`	Collapse the body.

Slots

Slot	Description
	Content displayed in the cover area.
	Content displayed in the header area.
	Content displayed in the header-actions area.
	Component body or child items.
	Content displayed in the footer area.