update listbox snippet.

listbox-snippet.html

@@ -13,10 +13,12 @@
       }
       .facture__header_column {
           padding: 0.5em;
+          text-align: center;
       }
       .facture__row {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
+          text-align: center;
       }
       .facture__column {
           padding: 0.5em;
@@ -24,6 +26,13 @@
       .facture__column--highlighted {
           background: #ccc;
       }
+      .facture__download {
+          border-radius: 0.5em;
+          background: #666;
+          color: white;
+          padding: 0.2em;
+          text-decoration: none;
+      }
 
       @media (min-width: 800px) {
           .facture__header_row {
@@ -40,6 +49,7 @@
               display: none;
           }
       }
+
       @media (max-width: 800px) {
           .facture__header_row {
               display: none;
@@ -59,24 +69,24 @@
     <!--
       This is an example of listbox HTML snippet.
       * 'facture' is the name of the listbox. For generic case, you can use 'listbox'.
-      * '--highlighted' is a modifier class for which you can differentiate the appearance of a certain column.
-      * You can put more HTML tags "inside" column <div> element, but you mush strictly follow the HTML structure below.
+      * '--highlighted' is a modifier class for which you can differentiate the appearance of a certain column (ex. the second column in this sample).
+      * You can put more HTML tags "inside" column <div> element, but you mush strictly follow the HTML structure below (ex. the third column in this sample).
     -->
     <div class="facture__container">
       <div class="facture__header_row">
-        <div class="facture__header_column">Header 1</div>
-        <div class="facture__header_column facture__header_column--highlighted">Header 2</div>
-        <div class="facture__header_column">Header 3</div>
+        <div class="facture__header_column">Reference</div>
+        <div class="facture__header_column facture__header_column--highlighted">Amount</div>
+        <div class="facture__header_column">Action</div>
       </div>
       <div class="facture__row">
-        <div class="facture__column"><div class="facture__header">Header 1</div><div class="facture__data">Value 1-1</div></div>
-        <div class="facture__column facture__column--highlighted"><div class="facture__header">Header 2</div><div class="facture__data">Value 1-2</div></div>
-        <div class="facture__column"><div class="facture__header">Header 3</div><div class="facture__data">Value 1-3</div></div>
+        <div class="facture__column"><div class="facture__header">Reference</div><div class="facture__data">SI-1234</div></div>
+        <div class="facture__column facture__column--highlighted"><div class="facture__header facture__header--highlighted">Amount</div><div class="facture__data facture__data--highlighted">20.30</div></div>
+        <div class="facture__column"><div class="facture__header">Action</div><div class="facture__data"><a href="#" class="facture__download">Download</a></div></div>
       </div>
       <div class="facture__row">
-        <div class="facture__column"><div class="facture__header">Header 1</div><div class="facture__data">Value 2-1</div></div>
-        <div class="facture__column facture__column--highlighted"><div class="facture__header">Header 2</div><div class="facture__data">Value 2-2</div></div>
-        <div class="facture__column"><div class="facture__header">Header 3</div><div class="facture__data">Value 2-3</div></div>
+        <div class="facture__column"><div class="facture__header">Reference</div><div class="facture__data">SI-1235</div></div>
+        <div class="facture__column facture__column--highlighted"><div class="facture__header facture__header--highlighted">Amount</div><div class="facture__data facture__data--highlighted">121.85</div></div>
+        <div class="facture__column"><div class="facture__header">Action</div><div class="facture__data"><a href="#" class="facture__download">Download</a></div></div>
       </div>
     </div>
   </body>