diff --git a/content/patterns/coding/writing-inline-demos.md b/content/patterns/coding/writing-inline-demos.md index fd959e2..48a114a 100644 --- a/content/patterns/coding/writing-inline-demos.md +++ b/content/patterns/coding/writing-inline-demos.md @@ -9,7 +9,7 @@ There are some issues with {{% pattern "CodePen embedding" %}}, like them not wo Here's the example code for an inline demo of a toggle button: -{{}} +{{}} {{<demo>}} <button aria-pressed="false">Toggle Me</button> <style> @@ -85,10 +85,20 @@ The "Launch in separate window" button takes the demo code and pushes it to a ne It's possible to give your demo a caption using an accessible `
` and `
` structure. All _you_ need to do is supply a `caption` attribute. For example: -{{}} +{{}} {{<demo caption="A basic button element">}} <!-- demo code here --> {{</demo>}} {{}} Along with the standard `figure` shortcodes (described in {{% pattern "Including images" %}}), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value. + +## Background colors + +Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the `backgroundColor` attribute. Any valid CSS color value is acceptable: + +{{}} +{{<demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}} +<!-- demo code here --> +{{</demo>}} +{{}} diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html index 8304903..3dce0d2 100644 --- a/docs/patterns/coding/writing-inline-demos/index.html +++ b/docs/patterns/coding/writing-inline-demos/index.html @@ -398,6 +398,12 @@ +
  • + + Background colors + +
    • + @@ -411,7 +417,7 @@

    Here’s the example code for an inline demo of a toggle button:

    -
    
+
    
 {{<demo>}}
 <button aria-pressed="false">Toggle Me</button>
 <style>
@@ -450,7 +456,7 @@ toggle.addEventListener('click', (e) => {
 
 
    
   
-      
    
+      
    
         
    
         
       
    
@@ -512,7 +518,8 @@ toggle.addEventListener('click', (e) => {
         var standalone = window.open();
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
-        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"
+        
+        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });
     })();
   
@@ -532,7 +539,7 @@ toggle.addEventListener('click', (e) => {
 
 
    It’s possible to give your demo a caption using an accessible <figure> and <figcaption> structure. All you need to do is supply a caption attribute. For example:
    
 
-
    
+
    
 {{<demo caption="A basic button element">}}
 <!-- demo code here -->
 {{</demo>}}
@@ -541,6 +548,17 @@ toggle.addEventListener('click', (e) => {
 
 
    Along with the standard figure shortcodes (described in Including images), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.
    
 
+
    Background colors
    
+
+
    Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the backgroundColor attribute. Any valid CSS color value is acceptable:
    
+
+
    
+{{<demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
+<!-- demo code here -->
+{{</demo>}}
+
    
+
+