kit

Inline consequence

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Record, Form, Stepped flow, Settings

Inline consequence

Oakmere Primary School invoice

Cancelling this invoice removes the £240.00 amount due.

Takes effect as soon as you confirm.

You can issue a replacement invoice from Oakmere Primary School’s record.

A consequence whose action cannot be taken yet.

Oakmere Primary School invoice

Cancelling this invoice removes the £240.00 amount due.

Takes effect as soon as you confirm.

You can issue a replacement invoice from Oakmere Primary School’s record.

Wait for the invoice to be checked before cancelling.

Oakmere Primary School invoice

Cancelling this invoice removes the £240.00 amount due.

Takes effect as soon as you confirm.

A consequence that sends an email shows it as its recipient will get it.

Oakmere Primary School choir rehearsal

Moving the rehearsal to Thursday 6 February emails Aisha Khan the new time.

Channel
Email to aisha@oakmereprimary.org
Subject
Your rehearsal moves to Thursday 6 February

Aisha is emailed as soon as you confirm.

To change it after that, move it again. Aisha is emailed about that move too.

A consequence that sends a text shows it as a phone shows it.

St Anne’s Scout Group deposit

Refunding the £50.00 deposit texts Priya Shah that it is on its way.

Channel
Text to 07700 900123

Oakmere Village Hall: your £50.00 deposit for St Anne’s Scout Group is on its way back to you. It reaches your account within 5 working days.

Takes effect as soon as you confirm.

A refund cannot be taken back. You can charge a new deposit from St Anne’s Scout Group’s record.

A consequence that changes amounts holds each, before and after.

Autumn programme hire charge

Splitting the £180.00 charge across three payers changes what each one owes.

What each payer owes
PayerBeforeAfter
Oakmere Primary School
£180.00
£90.00
Oakmere WI
£0.00
£50.00
St Anne’s Scout Group
£0.00
£40.00

Takes effect as soon as you confirm.

To change the split later, split the charge again from its record.

A consequence that changes amounts and sends a text holds the amounts, then the text.

St Anne’s Scout Group deposit

Refunding the £50.00 deposit texts Priya Shah that it is on its way.

The deposit before and after
DepositBeforeAfter
Held
£50.00
£0.00
Refunded
£0.00
£50.00
Channel
Text to 07700 900123

Oakmere Village Hall: your £50.00 deposit for St Anne’s Scout Group is on its way back to you. It reaches your account within 5 working days.

Takes effect as soon as you confirm.

A refund cannot be taken back. You can charge a new deposit from St Anne’s Scout Group’s record.

Source
<section data-kit-role="inline-consequence" aria-label="Cancel Oakmere Primary School invoice">
  <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
  <p data-kit-region="consequence">Cancelling this invoice removes the £240.00 amount due.</p>
  <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
  <p data-kit-region="correction-path">You can issue a replacement invoice from <a href="#role-inline-consequence">Oakmere Primary School’s record</a>.</p>
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Cancel invoice</span></button>
</section>
<p class="specimen-case-line">A consequence whose action cannot be taken yet.</p>
<section data-kit-role="inline-consequence" aria-label="Cancel Oakmere Primary School invoice">
  <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
  <p data-kit-region="consequence">Cancelling this invoice removes the £240.00 amount due.</p>
  <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
  <p data-kit-region="correction-path">You can issue a replacement invoice from <a href="#role-inline-consequence">Oakmere Primary School’s record</a>.</p>
  <button type="button" id="role-inline-consequence-cancel" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="role-inline-consequence-cancel-words"><span data-kit-region="label">Cancel invoice</span></button>
  <p data-kit-region="words" id="role-inline-consequence-cancel-words">Wait for the invoice to be checked before cancelling.</p>
</section>
<section data-kit-role="inline-consequence" id="role-inline-consequence-empty-region" aria-label="Cancel Oakmere Primary School invoice">
  <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
  <p data-kit-region="consequence">Cancelling this invoice removes the £240.00 amount due.</p>
  <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
  <p data-kit-region="correction-path"></p>
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Cancel invoice</span></button>
</section>
<p class="specimen-case-line">A consequence that sends an email shows it as its recipient will get it.</p>
<section data-kit-role="inline-consequence" aria-label="Move Oakmere Primary School choir rehearsal">
  <h3 data-kit-region="subject">Oakmere Primary School choir rehearsal</h3>
  <p data-kit-region="consequence">Moving the rehearsal to Thursday 6 February emails Aisha Khan the new time.</p>
  <article data-kit-role="outbound-preview">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Channel</dt><dd data-kit-region="value">Email to <span data-kit-region="email"><span><span>aisha@</span><wbr /><span>oakmereprimary.org</span></span></span></dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Subject</dt><dd data-kit-region="value">Your rehearsal moves to Thursday 6 February</dd></dl>
    </div>
    <iframe data-kit-region="body" srcdoc="<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}h1{margin:0 0 16px;font-size:22px}p{margin:0 0 12px;font-size:15px;line-height:1.5}</style></head><body><h1>Your rehearsal has moved</h1><p>Hello Aisha,</p><p>The choir rehearsal on Tuesday 4 February now takes place on Thursday 6 February, 16:00 to 17:30, in the Garden room.</p><p>Oakmere Village Hall</p></body></html>" title="Your rehearsal moves to Thursday 6 February" sandbox="allow-same-origin"></iframe>
  </article>
  <p data-kit-region="effective-time">Aisha is emailed as soon as you confirm.</p>
  <p data-kit-region="correction-path">To change it after that, move it again. Aisha is emailed about that move too.</p>
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Move rehearsal</span></button>
</section>
<p class="specimen-case-line">A consequence that sends a text shows it as a phone shows it.</p>
<section data-kit-role="inline-consequence" aria-label="Refund St Anne’s Scout Group deposit">
  <h3 data-kit-region="subject">St Anne’s Scout Group deposit</h3>
  <p data-kit-region="consequence">Refunding the £50.00 deposit texts Priya Shah that it is on its way.</p>
  <article data-kit-role="outbound-preview">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Channel</dt><dd data-kit-region="value">Text to 07700 900123</dd></dl>
    </div>
    <p data-kit-region="body">Oakmere Village Hall: your £50.00 deposit for St Anne’s Scout Group is on its way back to you.
It reaches your account within 5 working days.</p>
  </article>
  <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
  <p data-kit-region="correction-path">A refund cannot be taken back. You can charge a new deposit from <a href="#role-inline-consequence">St Anne’s Scout Group’s record</a>.</p>
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Refund deposit</span></button>
</section>
<p class="specimen-case-line">A consequence that changes amounts holds each, before and after.</p>
<section data-kit-role="inline-consequence" aria-label="Split the Autumn programme hire charge">
  <h3 data-kit-region="subject">Autumn programme hire charge</h3>
  <p data-kit-region="consequence">Splitting the £180.00 charge across three payers changes what each one owes.</p>
  <div data-kit-region="table" tabindex="0">
  <table data-kit-table="comparison">
    <caption>What each payer owes</caption>
    <thead data-kit-region="column-headings"><tr><th scope="col">Payer</th><th scope="col" data-kit-column="amount">Before</th><th scope="col" data-kit-column="amount">After</th></tr></thead>
    <tbody>
      <tr><th scope="row">Oakmere Primary School</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£180.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£90.00</div></td></tr>
      <tr><th scope="row">Oakmere WI</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£50.00</div></td></tr>
      <tr><th scope="row">St Anne’s Scout Group</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£40.00</div></td></tr>
    </tbody>
  </table>
  </div>
  <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
  <p data-kit-region="correction-path">To change the split later, split the charge again from its record.</p>
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Split charge</span></button>
</section>
<p class="specimen-case-line">A consequence that changes amounts and sends a text holds the amounts, then the text.</p>
<section data-kit-role="inline-consequence" aria-label="Refund St Anne’s Scout Group deposit">
  <h3 data-kit-region="subject">St Anne’s Scout Group deposit</h3>
  <p data-kit-region="consequence">Refunding the £50.00 deposit texts Priya Shah that it is on its way.</p>
  <div data-kit-region="table" tabindex="0">
  <table data-kit-table="comparison">
    <caption>The deposit before and after</caption>
    <thead data-kit-region="column-headings"><tr><th scope="col">Deposit</th><th scope="col" data-kit-column="amount">Before</th><th scope="col" data-kit-column="amount">After</th></tr></thead>
    <tbody>
      <tr><th scope="row">Held</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£50.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td></tr>
      <tr><th scope="row">Refunded</th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£50.00</div></td></tr>
    </tbody>
  </table>
  </div>
  <article data-kit-role="outbound-preview">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Channel</dt><dd data-kit-region="value">Text to 07700 900123</dd></dl>
    </div>
    <p data-kit-region="body">Oakmere Village Hall: your £50.00 deposit for St Anne’s Scout Group is on its way back to you.
It reaches your account within 5 working days.</p>
  </article>
  <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
  <p data-kit-region="correction-path">A refund cannot be taken back. You can charge a new deposit from <a href="#role-inline-consequence">St Anne’s Scout Group’s record</a>.</p>
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Refund deposit</span></button>
</section>