Skip to content

Commit 1887cc7

Browse files
Christopher-OChristopher-O
authored
revised documentation
Revised documentation to explain about using cnt-wdth-lmtd class and how it affects the list steps component
1 parent 5e22116 commit 1887cc7

File tree

1 file changed

+52
-83
lines changed

1 file changed

+52
-83
lines changed

‎components/list-steps/list-steps-en.html‎

Lines changed: 52 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h2>On this page</h2>
1919
<li><a href="#striped">Striped design</a></li>
2020
<li><a href="#stripedsub">Striped design for sub list</a></li>
2121
<li><a href="#startattr">Start attribute</a></li>
22-
<li><a href="#fullwidth">Full width exemption</a></li>
22+
<li><a href="#limitwidth">Limited width content</a></li>
2323
</ul>
2424
</section>
2525
<section>
@@ -589,86 +589,55 @@ <h4>Example with heading and section of step following a step started at 9, expe
589589
</ol>
590590
</section>
591591
<section>
592-
<h2 id="fullwidth">Full width exemption</h2>
593-
<p>List items are normally restricted in width when using the class <code>cnt-wdth-lmtd</code>. Adding the class <code>full-width</code> will allow items that normally would not be restricted in width (e.g. grids, tables, etc.) to be exempt from this.</p>
594-
<p>Elements normally restricted by the class will remain unaffected.</p>
595-
<div class="cnt-wdth-lmtd">
596-
<div class="wb-tabs">
597-
<div class="tabpanels">
598-
<details id="details-panel1">
599-
<summary>With full-width class</summary>
600-
<ol class="lst-stps ld-zr full-width">
601-
<li>
602-
<h5>Header for step 1</h5>
603-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Vivamus porta turpis sed sapien posuere blandit. Phasellus faucibus quis augue hendrerit tincidunt.</p>
604-
</li>
605-
<li>
606-
<h5>Header for step 2</h5>
607-
<div class="row">
608-
<div class="col-md-6">
609-
<h6>Sub header for step 2</h6>
610-
<p>Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit.</p>
611-
</div>
612-
<div class="col-md-6">
613-
<h6>Sub header for step 2</h6>
614-
<p>Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
615-
</div>
616-
</div>
617-
</li>
618-
<li>
619-
<h5>Header for step 3</h5>
620-
<p>Mauris ut consequat urna, sit amet interdum risus.Sed eu nulla ac nisl commodo laoreet nec eget ante.</p>
621-
<p>Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.</p>
622-
<p>Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tortor tellus.</p>
623-
</li>
624-
<li>
625-
<h5>Header for step 4</h5>
626-
<p>Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.</p>
627-
</li>
628-
</ol>
629-
<details>
630-
<summary>View code</summary>
631-
<pre><code>&lt;ol class="lst-stps ld-zr full-width"&gt;
632-
&lt;li&gt;...&lt;/li&gt;
633-
&lt;li&gt;...&lt;/li&gt;
634-
&lt;li&gt;...&lt;/li&gt;
635-
&lt;li&gt;...&lt;/li&gt;
636-
&lt;/ol&gt;</code></pre>
637-
</details>
638-
</details>
639-
<details id="details-panel2">
640-
<summary>Without full-width class (default)</summary>
641-
<ol class="lst-stps ld-zr">
642-
<li>
643-
<h5>Header for step 1</h5>
644-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Vivamus porta turpis sed sapien posuere blandit. Phasellus faucibus quis augue hendrerit tincidunt.</p>
645-
</li>
646-
<li>
647-
<h5>Header for step 2</h5>
648-
<div class="row">
649-
<div class="col-md-6">
650-
<h6>Sub header for step 2</h6>
651-
<p>Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit.</p>
652-
</div>
653-
<div class="col-md-6">
654-
<h6>Sub header for step 2</h6>
655-
<p>Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
656-
</div>
657-
</div>
658-
</li>
659-
<li>
660-
<h5>Header for step 3</h5>
661-
<p>Mauris ut consequat urna, sit amet interdum risus.Sed eu nulla ac nisl commodo laoreet nec eget ante.</p>
662-
<p>Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.</p>
663-
<p>Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tortor tellus.</p>
664-
</li>
665-
<li>
666-
<h5>Header for step 4</h5>
667-
<p>Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.</p>
668-
</li>
669-
</ol>
670-
</details>
671-
</div>
672-
</div>
673-
</div>
592+
<h2 id="limitwidth">Limited width content</h2>
593+
<p>List items are normally restricted in character width when using the class <code>cnt-wdth-lmtd</code>. A list step that contain a <code>&lt;div&gt;</code>, <code>&lt;section&gt;</code> or <code>&lt;table&gt;</code> tag will not be restricted in character width, nor the components within. </p>
594+
<p>However, elements normally restricted by the <code>cnt-wdth-lmtd</code> class will still be effected within those tags.</p>
595+
<section class="cnt-wdth-lmtd">
596+
<h3>With cnt-wdth-lmtd class</h3>
597+
<ol class="lst-stps ld-zr">
598+
<li>
599+
<h5>Header for step 1</h5>
600+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Vivamus porta turpis sed sapien posuere blandit. Phasellus faucibus quis augue hendrerit tincidunt.</p>
601+
</li>
602+
<li>
603+
<h5>Header for step 2</h5>
604+
<p>Duis condimentum volutpat blandit. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
605+
<div class="row">
606+
<div class="col-md-6">
607+
<h6>Sub header for step 2</h6>
608+
<p>Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit.</p>
609+
</div>
610+
<div class="col-md-6">
611+
<h6>Sub header for step 2</h6>
612+
<p>Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero.</p>
613+
</div>
614+
</div>
615+
</li>
616+
<li>
617+
<h5>Header for step 3</h5>
618+
<p>Mauris ut consequat urna, sit amet interdum risus. Sed eu nulla ac nisl commodo laoreet nec eget ante.</p>
619+
<details>
620+
<summary>Example</summary>
621+
<p>Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.</p>
622+
<p>Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem.</p>
623+
</details>
624+
</li>
625+
<li>
626+
<h5>Header for step 4</h5>
627+
<p>Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.</p>
628+
</li>
629+
</ol>
630+
<details>
631+
<summary>View code</summary>
632+
<pre><code>&lt;section class="cnt-wdth-lmtd"&gt;
633+
&lt;ol class="lst-stps ld-zr"&gt;
634+
&lt;li&gt;...&lt;/li&gt;
635+
&lt;li&gt;&lt;div&gt;...&lt;/div&gt;&lt;/li&gt;
636+
&lt;li&gt;...&lt;/li&gt;
637+
&lt;li&gt;...&lt;/li&gt;
638+
&lt;/ol&gt;
639+
&lt;/section&gt;
640+
</code></pre>
641+
</details>
642+
</section>
674643
</section>

0 commit comments

Comments
 (0)