Cards

Task: show a few items side by side, each in its own box.

# Recipe: cards with a header, a body and a footer, in a grid.
paths:
  components: ./components

ui:card holds a ui:card-header, a ui:card-body and a ui:card-footer, each optional. ui:grid columns="3" lays the cards out in three columns. A card with only a title and some text needs no parts: title= is enough.

<q:component name="Plans">
  <q:set name="plans" type="array"
         value='[{"name": "Free", "price": 0, "seats": 1}, {"name": "Team", "price": 12, "seats": 10}, {"name": "Company", "price": 40, "seats": 100}]' />

  <ui:window title="Plans">
    <!-- Three columns; the grid wraps on a narrow screen. -->
    <ui:grid columns="3" gap="md" padding="lg">
      <q:loop type="array" var="plan" items="{plans}">
        <ui:card>
          <ui:card-header>
            <ui:text weight="bold">{plan.name}</ui:text>
          </ui:card-header>
          <ui:card-body>
            <ui:text>${plan.price} a month</ui:text>
            <ui:text>Up to {plan.seats} people</ui:text>
          </ui:card-body>
          <ui:card-footer>
            <ui:link to="/signup?plan={plan.name}">Choose {plan.name}</ui:link>
          </ui:card-footer>
        </ui:card>
      </q:loop>
    </ui:grid>
    <!-- A card with only a title and text needs no parts. -->
    <ui:card title="Not sure?" padding="lg">
      <ui:text>Every plan starts with 30 free days.</ui:text>
    </ui:card>
  </ui:window>
</q:component>

<q:test name="one card per plan, with its three parts" page="/">
  <test:visit />
  <test:expect text="Free $0 a month Up to 1 people Choose Free" />
  <test:expect text="Company $40 a month Up to 100 people Choose Company" />
</q:test>

<q:test name="a card with a title only" page="/">
  <test:visit />
  <test:expect text="Not sure? Every plan starts with 30 free days." />
</q:test>

tests/cards.test.q
  PASS  one card per plan, with its three parts
  PASS  a card with a title only
2 passed, 0 failed

See UI-7.