Update pattern documentation

public/patterns/core/breakpoints/index.html

@@ -12,11 +12,17 @@
     <h2>How to use it</h2>
     <p>This pattern is only available for SCSS breakpoints. The  mixin is avai</p>
     <p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p>
-    <div class="tab-group" id="breakpoints">
-      <pre class="language-css" data-tab="scss">//-		DS2 core (c) 2024 Alexander McIlwraith 
+    <tabset id="breakpoints">
+      <div tab="scss">
+        <pre class="language-sass">@import "[path-to]/breakpoints";
+@include break([breakpoint]) {
+	// css here
+}</pre>
+        <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
 
-$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
+// default breakpoints match bootstrap 5 breakpoints.
+$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
 
 @mixin breakpoint-debug {
 	body::before, body::after {
@@ -99,6 +105,7 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !defau
 		}
 	}
 }</pre>
-    </div>
+      </div>
+    </tabset>
   </body>
 </html>