the card has a bolder title (larger font size, dark or regular font color)
- the fly-card__section-title class is this sort of bold title
the card has multiple sections with borders between them
- fly-card__section adds a border between sections, so @withSectionBorders={{true}} in a PlumaPanel is the recommended replacement
the card is a container for the main content of a Page

`PlumaCard` example

Source:

<div class="fly-card">
  <div class="fly-card__section py-2">
    <header class="fly-card__section-header mb-1">
      <div>
        <h3 class="leading-normal text-label mb-0">
          Title
        </h3>
      </div>

      <div class="flex-grow"></div>

      <FlyTooltip class="block" @triggerClassNames="block" @content="Tooltip content">
        <FlyIcon
          class="text-muted block leading-[0px]"
          @icon="help"
        />
      </FlyTooltip>
    </header>

    <div class="fly-card__section-body">
      // Content, e.g. a chart
    </div>
  </div>
</div>

Target:

<PlumaCard>
  <PlumaCardHeader>
    <PlumaCardTitle>Title</PlumaCardTitle>

    // PlumaCardActions by default has a negative margin, as it's meant to
    // contain buttons as actions - and the negative margin is used to offset
    // them. @m="0" removes the negative margin.
    <PlumaCardActions @m="0">
      <PlumaTooltip @content="Tooltip content">
        <PlumaIcon @icon="help" />
      </PlumaTooltip>
    </PlumaCardActions>
  </PlumaCardHeader>

  <PlumaCardSection>
    // Content, e.g. a chart
  </PlumaCardSection>
</PlumaCard>

`PlumaPanel` example

Source:

<div class="fly-card">
  <div class="fly-card__section">
    <div class="fly-card__section-header">
      <h3 class="fly-card__section-title">Card title</h3>

      <a href="#" class="link-primary text-no-underline">See more</a>
    </div>

    <div class="fly-card__section-subheader">
      This is a subheader
    </div>

    <div class="fly-card__section-body">
      Some body content here.
    </div>
  </div>

  <div class="fly-card__section">
    <div class="fly-card__section-body">
      Some more body content here.
    </div>
  </div>
</div>

Target:

<PlumaPanel @withSectionBorders={{true}}>
  <PlumaPanelHeader>
    <PlumaPanelTitle>
      Card title
    </PlumaPanelTitle>

    <PlumaPanelDescription>
      This is a subheader
    </PlumaPanelDescription>

    <PlumaPanelActions>
      <PlumaLink @href="#">See more</PlumaLink>
    </PlumaPanelActions>
  </PlumaPanelHeader>

  <PlumaPanelSection>
    Some body content here.
  </PlumaPanelSection>

  <PlumaPanelSection>
    Some more body content here.
  </PlumaPanelSection>
</PlumaPanel>

Source:

<div class="fly-card">
  <div class="fly-card__section">
    <div class="fly-card__section-header">
      <h3 class="fly-card__section-title">Section 1</h3>
      <a href="#" class="link-primary text-no-underline">More</a>
    </div>

    <div class="fly-card__section-subheader">
      This is a subheader
    </div>

    <table class="fly-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Count</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Sullivan</td>
          <td>100,232</td>
        </tr>
        <tr>
          <td>Randall</td>
          <td>99,905</td>
        </tr>
        <tr>
          <td>Ranft</td>
          <td>79,405</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Target:

<PlumaPanel @withSectionBorders={{true}}>
  <PlumaPanelHeader>
    <PlumaPanelTitle>
      Section 1
    </PlumaPanelTitle>

    <PlumaPanelDescription>
      This is a subheader
    </PlumaPanelDescription>

    <PlumaPanelActions>
      <PlumaLink @href="#">More</PlumaLink>
    </PlumaPanelActions>
  </PlumaPanelHeader>

  <PlumaPanelInset>
    <PlumaTable caption="All Pluma tables need captions">
      <PlumaTableThead>
        <PlumaTableTr>
          <PlumaTableTh>Name</PlumaTableTh>
          <PlumaTableTh>Count</PlumaTableTh>
        </PlumaTableTr>
      </PlumaTableThead>

      <PlumaTableTbody>
        <PlumaTableTr>
          <PlumaTableTd>Sullivan</PlumaTableTd>
          <PlumaTableTd>100,232</PlumaTableTd>
        </PlumaTableTr>

        <PlumaTableTr>
          <PlumaTableTd>Randall</PlumaTableTd>
          <PlumaTableTd>99,905</PlumaTableTd>
        </PlumaTableTr>

        <PlumaTableTr>
          <PlumaTableTd>Ranft</PlumaTableTd>
          <PlumaTableTd>79,405</PlumaTableTd>
        </PlumaTableTr>
      </PlumaTableTbody>
    </PlumaTable>
  </PlumaPanelInset>
</PlumaPanel>

Source:

<PlumaPageBody>
  <div class="fly-card my-2">
    <div class="fly-card__section py-0">
      // some content here
    </div>
  </div>
<PlumaPageBody>

Target:

<PlumaPageBody>
  <PlumaPanel>
    <PlumaPanelSection @withPadding={{false}}>
      // some content here
    </PlumaPanelSection>
  </PlumaPanel>
</PlumaPageBody>

fly-card

Source component

Target component

Mapping

PlumaCard example

PlumaPanel example

On this page

`PlumaCard` example

`PlumaPanel` example