Contact block: Alpha design pattern

Last updated: Aug 13, 2019
Progress: Alpha - draft
Design type: Pattern
Lead: Treasury Board of Canada Secretariat

The contact block is a set of tested patterns to help display contact information in a clear and consistent layout to ensure users call the right phone number and have the documents they need ready before they call.

The pattern was also tested to support redirecting users to the online self-serve option where available and preferred.

Research

Layout choices

Redirecting users to primary self-service option first - online
Forcing choices (use of expand collapse for secondary options, smart question for audiences and url parameters) - make sure they get the right number
Using an interactive pattern to bring attention to what needs to be prepared before calling/

When to use and how to implement

You will need to determine which of the following patterns is most appropriate:

phone channel block
multi-channel contact block
multi-channel multi-context contact block

Phone channel block

When to use: Use the phone channel block to show details about how to contact the government by phone for an institution or service.

Before you call

To verify your identity, you'll need your:

Social Insurance Number
Full name and date of birth
Complete address

You need all of the above to call You are ready to call

Phone number

1-800-xxx-xxxx

Outside Canada and the US*:
1-613-xxx-xxxx

Hours

(in local time)

Day	Hours
Mon-Fri	9 am to 9 pm
Sat	9 am to 5 pm
Sun	Closed

Wait times and holidays

Day	Wait times
Mon-Tue	Long wait times
Wed	Medium wait times
Thu-Sat	Short wait times
Sun	Closed

Holiday closures 2019:

April 19 (Good Friday)
April 22 (Easter Monday)
May 20 (Victoria Day)
(etc.)

*When calling outside of Canada lines operate in Eastern time

Code

<dl class="dl-horizontal contact-dl">
 <dt>Before you call</dt>
  <dd>
   <p>To verify your identity, you'll need your:</p>
   <ul class="list-unstyled can-ca-form checklist-completion-check">
    <li class="checkbox checkbox-green">
     <input type="checkbox" id="checkbox_1" name="before-calling">
     <label for="checkbox_1">Social Insurance Number</label>
    </li>
    <li class="checkbox checkbox-green">
     <input type="checkbox" id="checkbox_2" name="before-calling">
     <label for="checkbox_2">Full name and date of birth</label>
    </li>
    <li class="checkbox checkbox-green">
     <input type="checkbox" id="checkbox_3" name="before-calling">
     <label for="checkbox_3">Complete address</label>
    </li>
  </ul>
  <p>
   <label class="label label-danger" id="before-calling-incomplete">You need all of the above to call</label>
   <label class="label label-success hidden" id="before-calling-complete">You are ready to call</label>
  </p>
 </dd>
 <dt>Phone number</dt>
 <dd><p><b>1-800-xxx-xxxx</b></p><p>Outside Canada and the US<a href="#outside-time-zone">*</a>: <br><b>1-613-xxx-xxxx</b></p></dd>
 <dt>Hours</dt>
 <dd>(in local time)
  <table class="table">
   <thead>
    <tr>
     <th class="wb-inv">Day</th>
     <th class="wb-inv">Hours</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Mon-Fri</td>
     <td>9 am to 9 pm</td>
    </tr>
    <tr>
     <td>Sat</td>
     <td>9 am to 5 pm</td>
    </tr>
    <tr>
     <td>Sun</td>
     <td>Closed</td>
    </tr>
   </tbody>
  </table>
  <details>
   <summary>Wait times and holidays</summary>
   <div class="row">
    <table class="table">
     <thead>
      <tr>
       <th class="wb-inv">Day</th>
       <th class="wb-inv">Wait times</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>Mon-Tue</td>
       <td>Long wait times</td>
      </tr>
      <tr>
       <td>Wed</td>
       <td>Medium wait times</td>
      </tr>
      <tr>
       <td>Thu-Sat</td>
       <td>Short wait times</td>
      </tr>
      <tr>
       <td>Sun</td>
       <td>Closed</td>
      </tr>
     </tbody>
    </table>
   </div>
   <h3 class="h4">Holiday closures 2019:</h3>
   <ul>
    <li>April 19 (Good Friday) </li>
    <li>April 22 (Easter Monday) </li>
    <li>May 20 (Victoria Day)</li>
    <li>(etc.)</li>
   </ul>
  </details>
  <small id="outside-time-zone">*When calling outside of Canada lines operate in Eastern time</small>
 </dd>
</dl>

Note:

Using a details summary: When using the checklist that checks completion in a details summary, the class "checklist-completion-check" must be applied to the details tag instead of the unordered list tag

Multi-channel contact block

When to use: If there's more than one audience in addition to ways to contact, use the multi-channel contact block.

What to avoid: Do not make all channels visible. Decide on the best option and use progressive disclosure to make the choice between secondary options easier and conscious on the part of the user.

Online:

Change your address by signing in.

Alternative: Use a mobile application

By phone:

Call us to change your address

Before you call

To verify your identity, you'll need your:

Social Insurance Number
Full name and date of birth
Complete address

You need all of the above to call You are ready to call

Phone number

1-800-xxx-xxxx

Outside Canada and the US*:
1-613-xxx-xxxx

Hours

(in local time)

Day	Hours
Mon-Fri	9 am to 9 pm
Sat	9 am to 5 pm
Sun	Closed

Wait times and holidays

Day	Wait times
Mon-Tue	Long wait times
Wed	Medium wait times
Thu-Sat	Short wait times
Sun	Closed

Holiday closures 2019:

April 19 (Good Friday)
April 22 (Easter Monday)
May 20 (Victoria Day)
(etc.)

*When calling outside of Canada lines operate in Eastern time

By mail:

Mail a form to change your address

Processing time: it may take up to x weeks to change your address by mail.

Complete the Address change form
Mail the completed form to the address on the form

Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:

name
social insurance number
signature

Code

<dl class="dl-horizontal contact-dl">
 <dt>Online:</dt>
 <dd>
  <p>Change your address by signing in.</p>
  <div class="mrgn-tp-lg">
   <a href="" class="btn btn-call-to-action">Sign in to an online account</a>  <span class="register"><a href="">Register</a></span>
  </div>
  <p><b>Alternative:</b> <a href="">Use a mobile application</a></p>
 </dd>
 <dt>By phone:</dt>
 <dd>
  <details class="checklist-completion-check">
   <summary>Call us to change your address</summary>
   <dl class="dl-horizontal">
    <dt>Before you call</dt>
    <dd>
     <p>To verify your identity, you'll need your:</p>
     <ul class="list-unstyled can-ca-form">
      <li class="checkbox checkbox-green">
       <input type="checkbox" id="checkbox_4" name="before-calling-multi">
       <label for="checkbox_4">Social Insurance Number</label>
      </li>
      <li class="checkbox checkbox-green">
       <input type="checkbox" id="checkbox_5" name="before-calling-multi">
       <label for="checkbox_5">Full name and date of birth</label>
      </li>
      <li class="checkbox checkbox-green">
       <input type="checkbox" id="checkbox_6" name="before-calling-multi">
       <label for="checkbox_6">Complete address</label>
      </li>
     </ul>
     <p>
      <label class="label label-danger" id="before-calling-multi-incomplete">You need all of the above to call</label>
      <label class="label label-success hidden" id="before-calling-multi-complete">You are ready to call</label>
     </p> </dd>
    </dd>
    <dt>Phone number</dt>
    <dd><p><strong>1-800-xxx-xxxx</strong></p><p>Outside Canada and the US<a href="#outside-time-zone-multi>*</a>: <br><strong>1-613-xxx-xxxx</strong></p></dd>
    <dt>Hours</dt>
    <dd>(in local time)
     <table class="table">
      <thead>
       <tr>
        <th class="wb-inv">Day</th>
        <th class="wb-inv">Hours</th>
       </tr>
      </thead>
      <tbody>
       <tr>
        <td>Mon-Fri</td>
        <td>9 am to 9 pm</td>
       </tr>
       <tr>
        <td>Sat</td>
        <td>9 am to 5 pm</td>
       </tr>
       <tr>
        <td>Sun</td>
        <td>Closed</td>
       </tr>
      </tbody>
     </table>
     <details>
      <summary>Wait times and holidays</summary>
      <div class="row">
       <table class="table">
        <thead>
         <tr>
          <th class="wb-inv">Day</th>
          <th class="wb-inv">Wait times</th>
         </tr>
        </thead>
        <tbody>
         <tr>
          <td>Mon-Tue</td>
          <td>Long wait times</td>
         </tr>
         <tr>
          <td>Wed</td>
          <td>Medium wait times</td>
         </tr>
         <tr>
          <td>Thu-Sat</td>
          <td>Short wait times</td>
         </tr>
         <tr>
          <td>Sun</td>
          <td>Closed</td>
         </tr>
        </tbody>
       </table>
      </div>
      <h3 class="h4">Holiday closures 2019:</h3>
      <ul>
       <li>April 19 (Good Friday) </li>
       <li>April 22 (Easter Monday) </li>
       <li>May 20 (Victoria Day)</li>
       <li>(etc.)</li>
      </ul>
     </details>
     <small id="outside-time-zone-multi">*When calling outside of Canada lines operate in Eastern time</small>
    </dd>
   </dl>
  </details>
 </dd>
 <dt>By mail:</dt>
 <dd>
  <details>
   <summary>Mail a form to change your address</summary>
   <div class="alert alert-info">
    <p><strong>Processing time</strong>: it may take up to x weeks to change your address by mail.</p>
   </div>
   <ol>
    <li>Complete the <a href="">Address change form</a></li>
    <li>Mail the completed form to the address on the form</li>
   </ol>
   <p>Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:</p>
   <ul>
    <li>name</li>
    <li>social insurance number</li>
    <li>signature</li>
   </ul>
  </details>
 </dd>
</dl>

Note:

Using a details summary: When using the checklist that checks completion in a details summary, the class "checklist-completion-check" must be applied to the details tag. If not, then it should be applied instead of the unordered list tag of the checkboxes.

Multi-channel multi-context contact block

When to use: Use the multi-channel contact block when there is more than one way to contact or if there is also an online self-serve option.

What type of address do you need to change?

a personal address
a business address

Change a personal address

Online:

Change your address by signing in.

Alternative: Use a mobile application

By phone:

Call us to change your address

Before you call

To verify your identity, you'll need your:

Social Insurance Number
Full name and date of birth
Complete address

You need all of the above to call You are ready to call

Phone number

1-800-xxx-xxxx

Outside Canada and the US*:
1-613-xxx-xxxx

Hours

(in local time)

Day	Hours
Mon-Fri	9 am to 9 pm
Sat	9 am to 5 pm
Sun	Closed

Wait times and holidays

Day	Wait times
Mon-Tue	Long wait times
Wed	Medium wait times
Thu-Sat	Short wait times
Sun	Closed

Holiday closures 2019:

April 19 (Good Friday)
April 22 (Easter Monday)
May 20 (Victoria Day)
(etc.)

*When calling outside of Canada lines operate in Eastern time

Avoid waiting on the phone line

Benefits of signing up for an online account

If you are contacting us on someone else's behalf

Any additional info needed goes here.

By mail:

Mail a form to change your address

Processing time: it may take up to x weeks to change your address by mail.

Complete the Address change form
Mail the completed form to the address on the form

Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:

name
social insurance number
signature

Change a business address

Online:

Change your business address by signing in.

Alternative: Use a mobile application

By phone:

Call us to change your business address

Before you call

To verify your identity, you'll need your:

Business number
Business name
Your business address

You need all of the above to call You are ready to call

Phone number

1-800-xxx-xxxx

Outside Canada and the US*:
1-613-xxx-xxxx

Hours

(in local time)

Day	Hours in local time
Mon-Fri	9 am to 9 pm
Sat	9 am to 5 pm
Sun	Closed

Wait times and holidays

Day	Wait times
Mon-Tue	Long wait times
Wed	Medium wait times
Thu-Sat	Short wait times
Sun	Closed

Holiday closures 2019:

April 19 (Good Friday)
April 22 (Easter Monday)
May 20 (Victoria Day)
(etc.)

*When calling outside of Canada lines operate in Eastern time

Avoid waiting on the phone line

Benefits of signing up for an online business account

If you are contacting us on someone else's behalf

Any additional info needed goes here.

By mail:

Mail a form to change your business address

Processing time: it may take up to x weeks to change your address by mail.

Complete the Address change form
Mail the completed form to the address on the form

Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:

name
social insurance number
signature

Code

<div data-wb-urlmapping='{
 "p=personal": { "action": "addClass", "class": "hidden" },
 "p=business": { "action": "addClass", "class": "hidden" }
}' class="wb-frmvld">
 <form method="get">
  <!--Smart question!-->
  <div id="question1" class="wb-fieldflow" data-wb-fieldflow='{
   "noForm":true,
   "renderas":"radio",
   "base": { "live": true },
   "noreqlabel": true,
   "default": { "action": "addClass", "source":"#personal,#personal-btn,#business,#business-btn", "class": "hidden" }
  }'>
   <p>What type of address do you need to change?</p>
   <ul>
    <li data-wb-fieldflow='[
     { "action": "removeClass", "source":"#personal-btn", "class": "hidden"},
     { "action": "removeClass", "source":"#personal", "class": "hidden"}
    ]'>a personal address</li> <!--result-->
    <li data-wb-fieldflow='[
     { "action": "removeClass", "source":"#business-btn", "class": "hidden"},
     { "action": "removeClass", "source":"#business", "class": "hidden" }
    ]'>a business address</li>
   </ul>
  </div>
 </form>
</div>
<a href="#personal" id="personal-btn" class="btn btn-primary hidden">Continue</a>
<a href="#business" id="business-btn" class="btn btn-primary hidden">Continue</a>
<div data-wb-urlmapping='{ "p=personal": { "action": "removeClass", "class": "hidden" } }' class="hidden mrgn-bttm-lg mrgn-tp-lg" id="personal">
 <h2 class="h3">Change a personal address</h2>
 <dl class="dl-horizontal contact-dl">
  <dt>Online:</dt>
  <dd>
   <p>Change your address by signing in.</p>
   <div class="mrgn-tp-lg">
    <a href="" class="btn btn-call-to-action">Sign in to an online account</a>  <span class="register"><a href="">Register</a></span>
   </div>
   <p><b>Alternative:</b> <a href="">Use a mobile application</a></p>
  </dd>
  <dt>By phone:</dt>
  <dd>
   <details class="checklist-completion-check">
    <summary>Call us to change your address</summary>
    <dl class="dl-horizontal">
     <dt>Before you call</dt>
     <dd>
      <p>To verify your identity, you'll need your:</p>
      <ul class="list-unstyled can-ca-form">
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_7" name="before-calling-multi-personal">
        <label for="checkbox_7">Social Insurance Number</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_8" name="before-calling-multi-personal">
        <label for="checkbox_8">Full name and date of birth</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_9" name="before-calling-multi-personal">
        <label for="checkbox_9">Complete address</label>
       </li>
      </ul>
      <p>
       <label class="label label-danger" id="before-calling-multi-personal-incomplete">You need all of the above to call</label>
       <label class="label label-success hidden" id="before-calling-multi-personal-complete">You are ready to call</label>
      </p>
     </dd>
     <dt>Phone number</dt>
     <dd><p><strong>1-800-xxx-xxxx</strong></p><p>Outside Canada and the US<a href="#outside-time-zone-mm-personal">*</a>: <br><strong>1-613-xxx-xxxx</strong></p></dd>
     <dt>Hours</dt>
     <dd>(in local time)
      <table class="table">
       <thead>
        <tr>
         <th class="wb-inv">Day</th>
         <th class="wb-inv">Hours</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>Mon-Fri</td>
         <td>9 am to 9 pm</td>
        </tr>
        <tr>
         <td>Sat</td>
         <td>9 am to 5 pm</td>
        </tr>
        <tr>
         <td>Sun</td>
         <td>Closed</td>
        </tr>
       </tbody>
      </table>
      <details>
       <summary>Wait times and holidays</summary>
       <div class="row">
        <table class="table">
         <thead>
          <tr>
           <th class="wb-inv">Day</th>
           <th class="wb-inv">Wait times</th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <td>Mon-Tue</td>
           <td>Long wait times</td>
          </tr>
          <tr>
           <td>Wed</td>
           <td>Medium wait times</td>
          </tr>
          <tr>
           <td>Thu-Sat</td>
           <td>Short wait times</td>
          </tr>
          <tr>
           <td>Sun</td>
           <td>Closed</td>
          </tr>
         </tbody>
        </table>
       </div>
       <h3 class="h4">Holiday closures 2019:</h3>
       <ul>
        <li>April 19 (Good Friday) </li>
        <li>April 22 (Easter Monday) </li>
        <li>May 20 (Victoria Day)</li>
        <li>(etc.)</li>
       </ul>
      </details>
      <small id="outside-time-zone-mm-personal">*When calling outside of Canada lines operate in Eastern time</small>
     </dd>
     <details>
      <summary>Avoid waiting on the phone line</summary>
      <ul>
       <li><a href="">Benefits of signing up for an online account</a></li>
      </ul>
     </details>
     <details>
      <summary>If you are contacting us on someone else's behalf</summary>
      <p>Any additional info needed goes here.</p>
     </details>
    </dl>
   </details>
  </dd>
  <dt>By mail:</dt>
  <dd>
   <details>
    <summary>Mail a form to change your address</summary>
    <div class="alert alert-info">
     <p><strong>Processing time</strong>: it may take up to x weeks to change your address by mail.</p>
    </div>
    <ol>
     <li>Complete the <a href="">Address change form</a></li>
     <li>Mail the completed form to the address on the form</li>
    </ol>
    <p>Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:</p>
    <ul>
     <li>name</li>
     <li>social insurance number</li>
     <li>signature</li>
    </ul>
   </details>
  </dd>
 </dl>
</div>
<div data-wb-urlmapping='{ "p=business": { "action": "removeClass", "class": "hidden" } }' class="hidden mrgn-bttm-lg mrgn-tp-lg" id="business">
 <h2 class="h3">Change a business address</h2>
 <dl class="dl-horizontal contact-dl">
  <dt>Online:</dt>
  <dd>
   <p>Change your business address by signing in.</p>
   <div class="mrgn-tp-lg">
    <a href="" class="btn btn-call-to-action">Sign in to an online account</a>  <span class="register"><a href="">Register</a></span>
   </div>
   <p><b>Alternative:</b> <a href="">Use a mobile application</a></p>
  </dd>
  <dt>By phone:</dt>
  <dd>
   <details class="checklist-completion-check">
    <summary>Call us to change your business address</summary>
    <dl class="dl-horizontal">
     <dt>Before you call</dt>
     <dd>
      <p>To verify your identity, you'll need your:</p>
      <ul class="list-unstyled can-ca-form">
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_10" name="before-calling-multi-business">
        <label for="checkbox_10">Business number</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_11" name="before-calling-multi-business">
        <label for="checkbox_11">Business name</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_12" name="before-calling-multi-business">
        <label for="checkbox_12">Your business address</label>
       </li>
      </ul>
      <p>
       <label class="label label-danger" id="before-calling-multi-business-incomplete">You need all of the above to call</label>
       <label class="label label-success hidden" id="before-calling-multi-business-complete">You are ready to call</label>
      </p>
     </dd>
     <dt>Phone number</dt>
     <dd><p><strong>1-800-xxx-xxxx</strong></p><p>Outside Canada and the US<a href="#outside-time-zone-mm-business">*</a>: <br><strong>1-613-xxx-xxxx</strong></p></dd>
     <dt>Hours</dt>
     <dd>(in local time)
      <table class="table">
       <thead>
        <tr>
         <th class="wb-inv">Day</th>
         <th class="wb-inv">Hours</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>Mon-Fri</td>
         <td>9 am to 9 pm</td>
        </tr>
        <tr>
         <td>Sat</td>
         <td>9 am to 5 pm</td>
        </tr>
        <tr>
         <td>Sun</td>
         <td>Closed</td>
        </tr>
       </tbody>
      </table>
      <details>
       <summary>Wait times and holidays</summary>
       <div class="row">
        <table class="table">
         <thead>
          <tr>
           <th class="wb-inv">Day</th>
           <th class="wb-inv">Wait times</th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <td>Mon-Tue</td>
           <td>Long wait times</td>
          </tr>
          <tr>
           <td>Wed</td>
           <td>Medium wait times</td>
          </tr>
          <tr>
           <td>Thu-Sat</td>
           <td>Short wait times</td>
          </tr>
          <tr>
           <td>Sun</td>
           <td>Closed</td>
          </tr>
         </tbody>
        </table>
       </div>
       <h3 class="h4">Holiday closures 2019:</h3>
       <ul>
        <li>April 19 (Good Friday) </li>
        <li>April 22 (Easter Monday) </li>
        <li>May 20 (Victoria Day)</li>
        <li>(etc.)</li>
       </ul>
      </details>
      <small id="outside-time-zone-mm-business">*When calling outside of Canada lines operate in Eastern time</small>
     </dd>
     <details>
      <summary>Avoid waiting on the phone line</summary>
      <ul>
       <li><a href="">Benefits of signing up for an online business account</a></li>
      </ul>
     </details>
     <details>
      <summary>If you are contacting us on someone else's behalf</summary>
      <p>Any additional info needed goes here.</p>
     </details>
    </dl>
   </details>
  </dd>
  <dt>By mail:</dt>
  <dd>
   <details>
    <summary>Mail a form to change your business address</summary>
    <div class="alert alert-info">
     <p><strong>Processing time</strong>: it may take up to x weeks to change your address by mail.</p>
    </div>
    <ol>
     <li>Complete the <a href="">Address change form</a></li>
     <li>Mail the completed form to the address on the form</li>
    </ol>
    <p>Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:</p>
    <ul>
     <li>name</li>
     <li>social insurance number</li>
     <li>signature</li>
    </ul>
   </details>
  </dd>
 </dl>
</div>

Notes:

Links to a specific context: When linking to the page from a context, use a URL parameter to hide the question and other contexts, such as "?p=personal" or "?p=business".
Using a details summary: When using the checklist that checks completion in a details summary, the class "checklist-completion-check" must be applied to the details tag. If not, then it should be applied instead of the unordered list tag of the checkboxes.

Discussion

Discuss the pattern in github issues

Contact block: Alpha design pattern

On this page

Research

When to use and how to implement

Phone channel block

Holiday closures 2019:

Note:

Multi-channel contact block

Holiday closures 2019:

Note:

Multi-channel multi-context contact block

Change a personal address

Holiday closures 2019:

Change a business address

Holiday closures 2019:

Notes:

Discussion