Accordion
Parts of a page that open one by one, under rows that name them. The browser's own <details>: it works without JavaScript. Specification: docs/components/accordion.md
Basics
A .canon-accordion of <details class="canon-accordion-item">, each a <summary class="canon-accordion-summary"> naming it and a .canon-accordion-content. Each opens by itself: several can be open at once. open starts one open.
Invoice numbering
New invoices are numbered INV-2042 onwards. Change the prefix or the next number; past invoices keep theirs.
Payment terms
Net 30 for every customer, unless their record says otherwise.
Late fees
None. Turn them on to add 1.5% a month to invoices past their due date.
One at a time
The same name on every item: opening one closes the one that was open. For parts read one after the other, like questions; leave it out where several are open together, like settings.
Why was the payment declined?
The bank refused it: usually the card expired or the amount was over its limit. The customer sees the bank's reason in their email.
Can I change an invoice after sending it?
No: issue a credit note for it and send a new invoice. Both stay in the customer's history.
When does the money arrive?
Two working days after the customer pays, in the account set in Payouts.
Parts
A description under the title says what's inside, or its state. An icon leads the row (on every item or none). A Tag, Count or Status Indicator at the end gives a fact about the part. The whole row is the summary's name, so keep it short.
Company Globex Corporation · Springfield
- Legal name
- Globex Corporation Ltd
- VAT number
- GB 123 4567 89
- Address
- 1 Globex Way, Springfield
Reminders Sent 3 and 10 days after the due date 3
Three reminders were sent for invoices due this month.
Open invoices 1 overdue
INV-2041 is 14 days past its due date.
Sizes
data-size on the accordion or a container: sm for a dense side panel, lg for a help page.
Small
For a dense side panel.
Rows 8px inside
Titles 13px.
Theme decides
Rows 12px inside, titles 14px.
Medium
The usual size.
Large
For a help page.
Rows 16px inside
Titles 16px.
In context
In a Card, under the fields people always need: the options they rarely do, closed until wanted. One item works alone, as a disclosure. Fields inside a closed item are still sent with the form.
Edge cases
Right to left, the icon is on the right and the chevron on the left. A long title wraps, the chevron and the Tag centered beside it. An accordion can sit in another's content, with only the lines between its own items.
الشركةجلوبكس · سبرينغفيلد
الاسم القانوني: شركة جلوبكس المحدودة.
التذكيرات٣
أُرسلت ثلاثة تذكيرات هذا الشهر.
What happens to invoices in a currency the workspace doesn't use?FX
They're converted at the day's rate when paid.
Integrations
AccountingConnected
Invoices sync every hour.
PaymentsNot connected
Connect a provider to take card payments.