ExCard

<VBox id="idCardVBox" class="sapUiMediumMargin" width="100%">
  <!-- 01 · Basic -->
  <ux7:ExTitle text="01 · Basic card" level="h3" variant="section" />
  <ux7:ExCard title="Invoice #1042" subtitle="Due: 30 Jun 2026">
    <ux7:ExText text="Amount: $4,800.00" />
  </ux7:ExCard>

  <!-- 02 · headerRight -->
  <ux7:ExTitle text="02 · headerRight aggregation" level="h3" variant="section" />
  <ux7:ExCard title="Server Health" subtitle="Last checked 2 min ago">
    <ux7:headerRight>
      <ux7:ExBadge value="OK" pill="true" state="success" standalone="true" />
    </ux7:headerRight>
    <ux7:ExProgress value="72" variant="bar" state="default" label="CPU" />
    <ux7:ExProgress value="45" variant="bar" state="success" label="Memory" class="sapUiTinyMarginTop" />
  </ux7:ExCard>

  <!-- 03 · Footer -->
  <ux7:ExTitle text="03 · Footer aggregation" level="h3" variant="section" />
  <ux7:ExCard title="Purchase Request" subtitle="PR-2024-0089">
    <ux7:ExText text="Vendor: Acme Corp — Total: $12,500" />
    <ux7:footer>
      <ux7:ExButton text="Approve" type="success" />
      <ux7:ExButton text="Reject" type="danger" class="sapUiTinyMarginBegin" />
    </ux7:footer>
  </ux7:ExCard>

  <!-- 04 · Clickable -->
  <ux7:ExTitle text="04 · Clickable card" level="h3" variant="section" />
  <FlexBox wrap="Wrap" gap="1rem">
    <ux7:ExCard title="ExTable" subtitle="Data component" clickable="true" press="onCardPress">
      <ux7:ExText text="Virtualized table with sort, filter, resize." />
    </ux7:ExCard>
    <ux7:ExCard title="ExKanban" subtitle="Pro component" clickable="true" press="onCardPress">
      <ux7:ExText text="Drag-and-drop Kanban board." />
    </ux7:ExCard>
  </FlexBox>

  <!-- 05 · Status badge -->
  <ux7:ExTitle text="05 · Status property" level="h3" variant="section" />
  <FlexBox wrap="Wrap" gap="1rem">
    <ux7:ExCard title="Order #881" status="Shipped" statusColor="#22c55e">
      <ux7:ExText text="Expected delivery: 15 Jun 2026" />
    </ux7:ExCard>
    <ux7:ExCard title="Order #880" status="Pending" statusColor="#f59e0b">
      <ux7:ExText text="Awaiting warehouse confirmation." />
    </ux7:ExCard>
    <ux7:ExCard title="Order #879" status="Cancelled" statusColor="#ef4444">
      <ux7:ExText text="Cancelled by customer." />
    </ux7:ExCard>
  </FlexBox>

  <!-- 06 · No border / no shadow -->
  <ux7:ExTitle text="06 · bordered · shadow toggles" level="h3" variant="section" />
  <FlexBox wrap="Wrap" gap="1rem">
    <ux7:ExCard title="Shadow only" bordered="false" shadow="true">
      <ux7:ExText text="No border, shadow only." />
    </ux7:ExCard>
    <ux7:ExCard title="Border only" bordered="true" shadow="false">
      <ux7:ExText text="No shadow, border only." />
    </ux7:ExCard>
    <ux7:ExCard title="Flat" bordered="false" shadow="false">
      <ux7:ExText text="No border, no shadow." />
    </ux7:ExCard>
  </FlexBox>
  
  <ux7:ExTitle id="idBasicCardsExTitle" text="Basic Cards" level="h3" variant="section" />
  <FlexBox id="idBasicCardsFlexBox" wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExCard id="idBasicExCard" title="Basic Card" subtitle="Shadow + Border aktif" shadow="true" bordered="true" radius="12px" class="sapUiSmallMarginEnd">
      <ux7:ExText id="idKartIeriiBuradaGrnrExText" text="Kart içeriği burada görünür." />
      <ux7:ExProgress id="idBasicCardProgressExProgress" value="42" state="info" showValue="true" />
    </ux7:ExCard>

    <ux7:ExCard id="idNoShadowExCard" title="No Shadow" subtitle="shadow=false" shadow="false" bordered="true" radius="8px" class="sapUiSmallMarginEnd">
      <ux7:ExText id="idGlgesizKartRneiExText" text="Gölgesiz kart örneği." />
      <ux7:ExLabel id="idPreviewExLabel" text="Preview" variant="primary" />
    </ux7:ExCard>

    <ux7:ExCard id="idNoBorderExCard" title="No Border" subtitle="bordered=false" shadow="true" bordered="false" radius="16px">
      <ux7:ExText id="idKenarszKartRneiExText" text="Kenarsız kart örneği." />
      <ux7:ExBadge id="idNoBorderBadgeExBadge" value="7" state="success" standalone="true" />
    </ux7:ExCard>
  </FlexBox>

  <ux7:ExTitle id="idClickableCardExTitle" text="Clickable Card" level="h3" variant="section" />
  <FlexBox id="idClickableCardFlexBox" wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExCard id="idClickableExCard" title="Tıklanabilir Kart" subtitle="Hover efekti aktif" clickable="true" shadow="true" bordered="true" press="onExCardPress">
      <ux7:ExText id="idBuKartaTklayabilirsinExText" text="Bu karta tıklayabilirsin." />
      <ux7:ExToggle id="idClickableCardToggleExToggle" label="Aktif" checked="true" />
    </ux7:ExCard>
  </FlexBox>

  <ux7:ExTitle id="idStatusCardExTitle" text="Status Card" level="h3" variant="section" />
  <FlexBox id="idStatusHeaderRightFlexBox" wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExCard id="idStatusExCard" title="Proje Durumu" subtitle="Q2 2024" status="Aktif" statusColor="#16a34a" shadow="true" bordered="true" class="sapUiSmallMarginEnd">
      <ux7:ExText id="idProjeZamanndaIlerliyorExText" text="Proje zamanında ilerliyor." />
      <ux7:ExProgress id="idProjectStatusProgressExProgress" value="72" state="success" showValue="true" />
    </ux7:ExCard>

    <ux7:ExCard id="idWarningExCard" title="Kritik Görev" subtitle="Son tarih: 3 gün" status="Uyarı" statusColor="#d97706" shadow="true" bordered="true">
      <ux7:ExText id="idBuGrevDikkatGerektiriyorExText" text="Bu görev dikkat gerektiriyor." color="warning" />
      <ux7:ExProgress id="idCriticalTaskProgressExProgress" value="35" state="warning" showValue="true" />
    </ux7:ExCard>
  </FlexBox>

</VBox>