Conjunctions (and/or)
Providing a more visual seperation between two decision points by a visual cue (or) based on user testing. Also provide a connecting conjunction to show two parts are connected (and).
GCWeb implementation plan
- 2021-06 - Engage with TBS to show them this design pattern
- 2021-06 - Provide UX research and analysis to describe how pattern helps usability
- 2021-10 - Review and identify requirement to make this functionality enterprise ready
- 2021-11 - Produce accessibility and usability report on its usage on Canada.ca
- 2022-02 - Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.
- 2022-05 - updated to focus more on using as list items (with or without headers)
- 2022-09 - updated CSS to allow nested decision points
- 2022-11 - updated CSS to allow no border on always stacked items
- 2023-07 - updated CRA to allow no border on all resolutions when stacked
- 2023-08 - allow for zoom text resolution of 200%
- 2023-10 - have this feature as provisional/stable feature in GCWeb and get TBS to publish guidance on how to use it.
- 2024-04 - updated to fix design when text is smaller, make border visible in high contrast mode
Todo and for future consideration
- Finalize design
Sponsor: CRA - Christopher Oakes (@christopher-o)
On this page
Basic configurations
The design can be configured using a list, or a simple block element.
With headers
Or design
Lead in statement:
-
Header A: Option 1 of 2
This is content for header A
-
Header B: Option 2 of 2
This is content for header B
And design
Lead in statement:
-
Header A
This is content for part A
-
Header B
This is content for part B
View code
//List element "or" design
<p>Lead in statement:</p>
<ul class="cnjnctn-type-or">
<li class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for option A</p>
</li>
<li class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for option B</p>
</li>
</ul>
//List element "and" design
<p>Lead in statement:</p>
<ul class="cnjnctn-type-and">
<li class="cnjnctn-col">
<h5>Header A</h5>
<p>This is content for part A</p>
</li>
<li class="cnjnctn-col">
<h5>Header B</h5>
<p>This is content for part B</p>
</li>
</ul>
//Block element (e.g. <div>) "or" design
<p>Lead in statement:</p>
<div class="cnjnctn-type-or">
<section class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for option A</p>
</section>
<section class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for option B</p>
</section>
</div>
//Block element "and" design
<p>Lead in statement:</p>
<div class="cnjnctn-type-and">
<section class="cnjnctn-col">
<h5>Header A</h5>
<p>This is content for part A</p>
</section>
<section class="cnjnctn-col">
<h5>Header B</h5>
<p>This is content for part B</p>
</section>
</div>
Without headers
Or design
Lead in statement:
- This is content for option A
- This is content for option B
And design
Lead in statement:
- This is content for part A
- This is content for part B
View code
//List element "or" design
<p>Lead in statement:</p>
<ul class="cnjnctn-type-or">
<li class="cnjnctn-col">
This is content for option A
</li>
<li class="cnjnctn-col">
This is content for option B
</li>
</ul>
//List element "and" design
<p>Lead in statement:</p>
<ul class="cnjnctn-type-and">
<li class="cnjnctn-col">
This is content for part A
</li>
<li class="cnjnctn-col">
This is content for part B
</li>
</ul>
//Block element (e.g. <div>) "or" design
<p>Lead in statement:</p>
<div class="cnjnctn-type-or">
<div class="cnjnctn-col">
<p>This is content for option A</p>
</div>
<div class="cnjnctn-col">
<p>This is content for option B</p>
</div>
</div>
//Block element "and" design
<p>Lead in statement:</p>
<div class="cnjnctn-type-and">
<div class="cnjnctn-col">
<p>This is content for part A</p>
</div>
<div class="cnjnctn-col">
<p>This is content for part B</p>
</div>
</div>
Responsive designs
For the examples that follow, the code will be using a block element for simplicity. However they can also be coded using a list element (as long as the content still respects all guidance on using lists).
Using these extra classes creates a side-by-side design above a certain pixel resolution (follows the WET4 responsive break points).
The default design (as shown above) is stacked on all resolutions and never is side-by-side.
Use your browser to resize the view of the page to see how the design reacts in different resolutions.
Always side-by-side
This design does not stack, on any resolution
Or design
Lead in statement:
Header A: Option 1 of 2
This is content for header A
Header B: Option 2 of 2
This is content for header B
And design
Lead in statement:
Header A
This is content for header A
Header B
This is content for header B
View code
//Or design
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-xs">
<section class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</section>
<section class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
</section>
</div>
//And design
<p>Lead in statement:</p>
<div class="cnjnctn-type-and cnjnctn-xs">
<section class="cnjnctn-col">
<h5>Header A</h5>
<p>This is content for header A </p>
</section>
<section class="cnjnctn-col">
<h5>Header B</h5>
<p>This is content for header B</p>
</section>
</div>Side-by-side ≥ 768px
This design stacks on 767px and below.
Or design
Lead in statement:
Header A: Option 1 of 2
This is content for header A
Header B: Option 2 of 2
This is content for header B
And design
Lead in statement:
Header A
This is content for header A
Header B
This is content for header B
View code
//Or design
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-sm">
<div class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
</div>
</div>
//And design
<p>Lead in statement:</p>
<div class="cnjnctn-type-and cnjnctn-sm">
<div class="cnjnctn-col">
<h5>Header A</h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B</h5>
<p>This is content for header B</p>
</div>
</div>Side-by-side ≥ 992px
This design stacks on 991px and below.
Or design
Lead in statement:
Header A: Option 1 of 2
This is content for header A
Header B: Option 2 of 2
This is content for header B
And design
Lead in statement:
Header A
This is content for header A
Header B
This is content for header B
View code
//Or design
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-md">
<div class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
</div>
</div>
//And design
<p>Lead in statement:</p>
<div class="cnjnctn-type-and cnjnctn-md">
<div class="cnjnctn-col">
<h5>Header A</h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B</h5>
<p>This is content for header B</p>
</div>
</div>Side-by-side ≥ 1200px
This design stacks on 1199px and below.
Or design
Lead in statement:
Header A: Option 1 of 2
This is content for header A
Header B: Option 2 of 2
This is content for header B
And design
Lead in statement:
Header A
This is content for header A
Header B
This is content for header B
View code
//Or design
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
</div>
</div>
//And design
<p>Lead in statement:</p>
<div class="cnjnctn-type-and cnjnctn-lg">
<div class="cnjnctn-col">
<h5>Header A</h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B</h5>
<p>This is content for header B</p>
</div>
</div>Customization
For the examples that follow, the examples will be using a block element and mostly the "or" design for simplicity. However they can also be coded using a list element and using the "and" design.
Custom column widths
Column set to 90% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 90% of default cnjnctn-col-90)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 80% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 80% of default cnjnctn-col-80)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 75% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 75% of default cnjnctn-col-75)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 70% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 70% of default cnjnctn-col-70)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 60% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 60% of default cnjnctn-col-60)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 50% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 50% of default cnjnctn-col-50)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 40% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 40% of default cnjnctn-col-40)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 30% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 30% of default cnjnctn-col-30)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 25% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 25% of default cnjnctn-col-25)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Column set to 20% of original width (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 2
This is content for header A (at 20% of default cnjnctn-col-20)
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
View code
//90% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-90">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//80% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-80">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//75% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-75">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//70% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-70">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//60% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-60">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//50% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-50">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//40% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-40">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//30% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-30">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//25% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-25">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//20% of default width
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-20">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
No left border when stacked
Basic configuration
Or design
Lead in statement:
And design
Lead in statement:
View code
//Basic "or" design
<section class="panel panel-default">
...
<p>Lead in statement:</p>
<div class="cnjnctn-type-or brdr-0">
<div class="cnjnctn-col">
This is content for option A
</div>
<div class="cnjnctn-col">
This is content for option B
</div>
</div>
...
</section>
//Basic "and" design
<section class="panel panel-default">
...
<p>Lead in statement:</p>
<div class="cnjnctn-type-and brdr-0">
<div class="cnjnctn-col">
This is content for part A
</div>
<div class="cnjnctn-col">
This is content for part B
</div>
</div>
</div>
...
</section>
Side-by-side ≥ 992px
Use your browser to resize the view of the page to see that there is no left border when stacked.
Or design
Lead in statement:
- This is content for option A
- This is content for option B
And design
Lead in statement:
- This is content for part A
- This is content for part B
View code
//Side-by-side above 991px "or" design
<section class="panel panel-default">
...
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-md brdr-0">
<div class="cnjnctn-col">
This is content for option A
</div>
<div class="cnjnctn-col">
This is content for option B
</div>
</div>
...
</section>
//Side-by-side above 991px "and" design
<section class="panel panel-default">
...
<p>Lead in statement:</p>
<div class="cnjnctn-type-and cnjnctn-md brdr-0">
<div class="cnjnctn-col">
This is content for part A
</div>
<div class="cnjnctn-col">
This is content for part B
</div>
</div>
</div>
...
</section>
Flexible designs
Multiple columns
If you require more than four options (columns), consider the always stacked default design.
Three columns (example stacks on small devices)
Lead in statement:
Header A: Option 1 of 3
This is content for header A
Header B: Option 2 of 3
This is content for header B
Header C: Option 3 of 3
This is content for header C
Four columns (example stacks on medium devices)
Lead in statement:
Header A: Option 1 of 4
This is content for header A
Header B: Option 2 of 4
This is content for header B
Header C: Option 3 of 4
This is content for header C
Header D: Option 4 of 4
This is content for header D
View code
//Three columns (example stacks on small devices)
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-md">
<div class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 3</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 3</span></h5>
<p>This is content for header B</p>
</div>
<div class="cnjnctn-col">
<h5>Header C<span class="wb-inv">: Option 3 of 3</span></h5>
<p>This is content for header C</p>
</div>
</div>
//Four columns (example stacks on medium devices)
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col">
<h5>Header A<span class="wb-inv">: Option 1 of 4</span></h5>
<p>This is content for header A </p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 4</span></h5>
<p>This is content for header B</p>
</div>
<div class="cnjnctn-col">
<h5>Header C<span class="wb-inv">: Option 3 of 4</span></h5>
<p>This is content for header C</p>
</div>
<div class="cnjnctn-col">
<h5>Header D<span class="wb-inv">: Option 4 of 4</span></h5>
<p>This is content for header D</p>
</div>
</div>Nested conjunctions
For instances where one of the decision points may have it's own set of decision points.
An "or" decision point that stacks on small, nested with an always stacked "and" decision point
Lead in statement:
Header A: Option 1 of 2
This is content for header A
Header B: Option 2 of 2
This is content for header B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Lead in statement:
Header B.1
This is content for header B.1
Header B.2
This is content for header B.2
View code
//Nested decision point example
<p>Lead in statement:</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-80">
<h5>Header A<span class="wb-inv">: Option 1 of 2</span></h5>
<p>This is content for header A</p>
</div>
<div class="cnjnctn-col">
<h5>Header B<span class="wb-inv">: Option 2 of 2</span></h5>
<p>This is content for header B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
<p>Lead in statement:</p>
<div class="cnjnctn-type-and">
<div class="cnjnctn-col">
<h6>Header B.1</h6>
<p>This is content for header B.1</p>
</div>
<div class="cnjnctn-col">
<h6>Header B.2</h6>
<p>This is content for header B.2</p>
</div>
</div>
</div>
</div>Page details
- Date modified: