Card

<sy-card title="프로젝트 현황" id="sample">
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p>
</sy-card>

<sy-card title="프로젝트 현황" id="sample">
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p>
  <sy-button slot="header-actions" size="small">편집</sy-button>
  <sy-button slot="footer" variant="primary">프로젝트 열기</sy-button>
</sy-card>

<sy-card
  title="프로젝트 현황"
  show-cover
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p>
  <div slot="cover" style="background:#eee9f8;padding:24px;color:#6750a4">SYIDAX
    · TEAM WORKSPACE</div>
</sy-card>

<sy-card
  title="프로젝트 현황"
  collapsible
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</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">접기</sy-button>
  <sy-button id="action-1" size="small">펼치기</sy-button>
  <sy-button id="action-2" size="small">전환</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;
  }) ?? '완료';
  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>

<sy-card
  title="프로젝트 현황"
  collapsible
  active
  show-footer
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>
<output id="demo-events" 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;
  }) ?? '완료';
  for (const name of ["toggled"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

<sy-card
  title="프로젝트 현황"
  collapsible
  active
  show-footer
  show-backdrop
  show-icon
  icon="/assets/examples/star.svg"
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>

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

<sy-card
  title="프로젝트 현황"
  collapsible
  active
  show-footer
  show-scroll-bar
  open-delay="300"
  close-delay="300"
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>

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

<sy-card
  title="프로젝트 현황"
  collapsible
  active="false"
  show-footer
  id="sample"
>
  <p>이번 주에 완료한 작업과 다음 일정을 확인하세요.</p><span slot="footer">마지막 갱신 · 오늘</span>
</sy-card>

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