mypgs 2.0.0 → 3.0.0

package/docs/layout/section.md

@@ -1,68 +1,68 @@
-<!-- File generato automaticamente da templates/html/layout/section.html. Modificare templates/html/layout/section.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/layout/section.html. Edit reference/html/layout/section.html and run npm run docs:generate again. -->
 
 # Section
 
-Varianti di sezione che controllano larghezza, padding e trattamento di contenuti specifici mantenendo la spaziatura verticale condivisa.
+Section variants that control width, padding, and specific content treatment while preserving shared vertical spacing.
 
 ## PGS
 
-- `section`: identifica la sezione standard con contenuto centrato.
-- `sectionFull`: identifica una sezione estesa a tutta la larghezza disponibile.
-- `sectionSpecificity`: identifica una sezione che applica una struttura specifica al relativo figlio.
-- `sectionSpecificity-child`: identifica il contenuto figlio gestito dalla variante sectionSpecificity.
-- `sectionMax`: identifica una sezione con larghezza massima estesa.
-- `sectionNoPadding`: identifica una sezione priva del padding standard.
+- `section`: identifies the standard section with centered content.
+- `sectionFull`: identifies a section that spans the full available width.
+- `sectionSpecificity`: identifies a section that applies a specific structure to its child.
+- `sectionSpecificity-child`: identifies child content managed by the sectionSpecificity variant.
+- `sectionMax`: identifies a section with an extended maximum width.
+- `sectionNoPadding`: identifies a section without standard padding.
 
-## Elementi correlati
+## Related elements
 
-- `flexColumnSections`: distanzia verticalmente tutte le sezioni dell'esempio.
-- `flexColumnElements`: organizza verticalmente gli elementi principali di ogni sezione.
-- `flexColumnTexts`: organizza e distanzia i contenuti interni.
-- `card-img`: riutilizza il trattamento delle immagini card nelle sezioni dimostrative.
-- `imgCover`: adatta le immagini alla larghezza della sezione.
+- `flexColumn`: vertically organizes sections and inner content.
+- `gapSections`: applies section spacing to the outer collection.
+- `gapElements`: applies element spacing inside each section.
+- `card-img`: reuses card image treatment in the demonstration sections.
+- `imgCover`: scales images to the section width.
 
 ## Output
 
-Raccolta HTML delle varianti di section disponibili.
+HTML collection of the available section variants.
 
-## Esempio
+## Example
 
 ```html
-<div pgs="flexColumnSections">
-    <section pgs="section flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <strong>Sezione standard</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+<div pgs="flexColumn gapSections">
+    <section pgs="section flexColumn gapElements">
+        <div pgs="flexColumn">
+            <strong>Standard section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
-    <section pgs="sectionFull flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <strong>Sezione full-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+    <section pgs="sectionFull flexColumn gapElements">
+        <div pgs="flexColumn">
+            <strong>Full-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
-    <section pgs="sectionSpecificity flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Immagine segnaposto">
+    <section pgs="sectionSpecificity flexColumn gapElements">
+        <div pgs="flexColumn">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Placeholder image">
         </div>
-        <div pgs="sectionSpecificity-child flexColumnTexts">
-            <strong>Sezione specificità-child</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        <div pgs="sectionSpecificity-child flexColumn">
+            <strong>Specificity-child section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
-    <section pgs="sectionMax flexColumnElements" style="background-color: var(--color-primary-soft)">
-        <div pgs="flexColumnTexts">
-            <strong>Sezione max-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+    <section pgs="sectionMax flexColumn gapElements" style="background-color: var(--color-primary-soft)">
+        <div pgs="flexColumn">
+            <strong>Max-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
-    <section pgs="sectionNoPadding flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Immagine segnaposto">
+    <section pgs="sectionNoPadding flexColumn gapElements">
+        <div pgs="flexColumn">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Placeholder image">
         </div>
     </section>
 </div>

package/docs/patterns/cookieConsent.md

@@ -1,48 +1,51 @@
-<!-- File generato automaticamente da templates/html/patterns/cookieConsent.html. Modificare templates/html/patterns/cookieConsent.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/patterns/cookieConsent.html. Edit reference/html/patterns/cookieConsent.html and run npm run docs:generate again. -->
 
 # Cookie Consent
 
-Pattern accessibile per raccogliere e memorizzare il consenso ai cookie analitici, applicare le preferenze e caricare Google Analytics solo quando autorizzato.
+Accessible pattern for collecting and storing analytics cookie consent, applying preferences, and loading Google Analytics only when authorized.
 
 ## PGS
 
-- `cookieConsent`: identifica il pannello principale inizializzato dal pattern JavaScript.
-- `cookieConsent-panel`: identifica il gruppo delle preferenze configurabili.
-- `cookieConsent-featureEssential`: identifica la riga dei cookie tecnici sempre attivi.
-- `cookieConsent-panel-badge`: identifica l'indicatore dello stato dei cookie tecnici.
-- `cookieConsent-featureAnalytics`: identifica la riga dei cookie analitici opzionali.
-- `cookieConsent-toggleAnalytics`: identifica il controllo che abilita il consenso analytics.
-- `cookieConsent-actionReject`: applica le preferenze selezionate senza accettare automaticamente analytics.
-- `cookieConsent-actionAccept`: accetta tutti i cookie disponibili.
-- `cookieConsent-actionOpen`: identifica controlli esterni che riaprono il pannello delle preferenze.
-- `cookieConsent-gaUnavailable`: token runtime applicato al root quando manca un measurement ID utilizzabile.
-- `cookieConsent-accepted`: token runtime applicato al root quando analytics è consentito.
-- `cookieConsent-declined`: token runtime applicato al root quando analytics non è consentito.
-
-## Elementi correlati
-
-- `flexColumn`: organizza verticalmente il pannello delle preferenze.
-- `flexRow`: dispone righe e azioni del pannello.
-- `nowrap`: impedisce il ritorno a capo nella riga dei cookie essenziali.
-- `toggle`: presenta il consenso analytics come interruttore.
-- `button`: presenta l'azione di selezione con lo stile standard.
-- `buttonStrong`: presenta l'accettazione completa come azione primaria.
+- `cookieConsent`: identifies the main panel initialized by the JavaScript pattern.
+- `cookieConsent-panel`: identifies the configurable preference group.
+- `cookieConsent-featureEssential`: identifies the row of always-active essential cookies.
+- `cookieConsent-panel-badge`: identifies the essential-cookie status indicator.
+- `cookieConsent-featureAnalytics`: identifies the optional analytics-cookie row.
+- `cookieConsent-toggleAnalytics`: identifies the control that enables analytics consent.
+- `cookieConsent-actionReject`: applies selected preferences without automatically accepting analytics.
+- `cookieConsent-actionAccept`: accepts all available cookies.
+- `cookieConsent-actionOpen`: identifies external controls that reopen the preference panel.
+- `cookieConsent-gaUnavailable`: runtime token applied to the root when no usable measurement ID is available.
+- `cookieConsent-accepted`: runtime token applied to the root when analytics is allowed.
+- `cookieConsent-declined`: runtime token applied to the root when analytics is not allowed.
+
+## PGS Options
+
+- `buttonStrong`: presents full acceptance as the primary action.
+
+## Related elements
+
+- `flexColumn`: vertically organizes the preference panel.
+- `flexRow`: arranges panel rows and actions.
+- `nowrap`: prevents wrapping in the essential-cookie row.
+- `toggle`: presents analytics consent as a switch.
+- `button`: presents the selection action with standard styling.
 
 ## Output
 
-Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attributi accessibili.
+Consent panel HTML with essential and analytics preferences, actions, and accessible attributes.
 
-## Esempio
+## Example
 
 ```html
 <section id="pgs-cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id="G-XXXXXXXXXX" hidden tabindex="-1">
-    <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookie e privacy <br></p>
-    <h2>La tua privacy prima di tutto</h2>
+    <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookies and privacy <br></p>
+    <h2>Your privacy comes first</h2>
 
     <p>
-        Utilizziamo cookie tecnici per offrire il servizio e, previo consenso, cookie analitici di
-        <strong>Google Analytics</strong> per misurare in modo anonimo il traffico e migliorare i contenuti.
-        Puoi modificare la scelta in qualsiasi momento.
+        We use essential cookies to provide the service and, with your consent, analytics cookies from
+        <strong>Google Analytics</strong> to measure traffic anonymously and improve our content.
+        You can change your choice at any time.
     </p>
 
     <p>
@@ -50,17 +53,17 @@ Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attribut
         <a href="/cookie-policy/" target="_blank" rel="noopener">Cookie Policy</a>
     </p>
 
-    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Preferenze cookie">
+    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Cookie preferences">
         <div pgs="flexRow nowrap cookieConsent-featureEssential">
             <div>
                 <p>
-                    <strong>Cookie tecnici</strong>
+                    <strong>Essential cookies</strong>
                     <br>
-                    <small>Sempre attivi per garantire il corretto funzionamento del sito.</small>
+                    <small>Always active to ensure the website works correctly.</small>
                 </p>
             </div>
 
-            <span pgs="cookieConsent-panel-badge">Attivi</span>
+            <span pgs="cookieConsent-panel-badge">Active</span>
         </div>
 
         <div pgs="flexRow cookieConsent-featureAnalytics">
@@ -68,21 +71,21 @@ Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attribut
                 <p>
                     <strong>Analytics</strong>
                     <br>
-                    <small>Dati di navigazione raccolti in forma aggregata per statistiche anonime.</small>
+                    <small>Browsing data collected in aggregate form for anonymous statistics.</small>
                 </p>
 
-                <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Abilita Google Analytics">
+                <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Enable Google Analytics">
             </label>
         </div>
     </div>
 
     <div pgs="flexRow">
         <button type="button" pgs="button cookieConsent-actionReject">
-            <i class="fa-solid fa-duotone fa-sliders"></i>Solo selezionati
+            <i class="fa-solid fa-duotone fa-sliders"></i>Selected only
         </button>
 
-        <button type="button" pgs="buttonStrong cookieConsent-actionAccept">
-            <i class="fa-solid fa-check"></i> Accetta tutto
+        <button type="button" pgs="button cookieConsent-actionAccept" pgs-option="buttonStrong">
+            <i class="fa-solid fa-check"></i> Accept all
         </button>
     </div>
 </section>

package/docs/utilizzo-css-scss.md

@@ -1,6 +1,6 @@
-# Utilizzo CSS/SCSS
+# CSS/SCSS usage
 
-La libreria espone molte custom properties da preferire agli hardcode, per esempio:
+The library exposes many custom properties that should be preferred to hardcoded values, for example:
 
 ```scss
 :root {
@@ -13,7 +13,7 @@ La libreria espone molte custom properties da preferire agli hardcode, per esemp
 }
 ```
 
-Override consigliato:
+Recommended override:
 
 ```scss
 #danger-action {
@@ -22,15 +22,39 @@ Override consigliato:
 }
 ```
 
-Evita di riscrivere da zero padding, gap, border-radius o colori se esiste gia' una variabile o un token PGS adatto.
+Avoid rewriting padding, gaps, border radii, or colors from scratch when a suitable variable or PGS token already exists.
 
-## Il sistema `pgs`
+## Button mixins
 
-Il markup usa token separati da spazio dentro l'attributo `pgs`:
+Button styling is split into small mixins so each consumer can include only the behavior it needs. A standard button is composed explicitly:
+
+```scss
+.action {
+  @include buttonBase();
+  @include buttonContent();
+  @include buttonHover();
+}
+```
+
+Use `buttonIcon` instead of `buttonContent` for icon-only controls, and `buttonNohover` instead of `buttonHover` when pointer interaction must remain neutral:
+
+```scss
+.icon-action {
+  @include buttonBase();
+  @include buttonIcon();
+  @include buttonNohover();
+}
+```
+
+`buttonStrong`, `buttonMini`, `buttonBig`, and `buttonClose` contain only their variant declarations and must be added after the required base, content/icon, and interaction mixins. This explicit composition is also the preferred pattern for components such as menus, accordions, forms, and step tabs.
+
+## The `pgs` system
+
+Markup uses space-separated tokens inside the `pgs` attribute:
 
 ```html
-<button pgs="button buttonStrong" type="button">Salva</button>
-<section pgs="section flexColumnElements"></section>
+<button pgs="button" pgs-option="buttonStrong" type="button">Save</button>
+<section pgs="section flexColumn gapElements"></section>
 ```
 
-Gli stessi token collegano HTML, SCSS e JavaScript.
+The same tokens connect HTML, SCSS, and JavaScript.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mypgs",
-    "version": "2.0.0",
+    "version": "3.0.0",
     "description": "MyPGS frontend theme and UI behaviors, with bundled JavaScript and CSS assets.",
     "main": "./dist/javascript/index.js",
     "module": "./assets/javascript/index.js",

package/reference/html/components/accordion.html

@@ -0,0 +1,52 @@
+<!--
+/**
+* @title Accordion
+* @description Interactive component that expands one panel at a time while synchronizing visibility, ARIA attributes, and keyboard navigation.
+*
+* @pgs
+* - accordion: identifies each expandable element initialized by the JavaScript module.
+* - accordion-button: identifies the control that opens or closes the associated panel.
+* - accordion-content: identifies the content panel managed through the hidden attribute.
+*
+* @pgs-state
+* - open: indicates the accordion element that is currently open and visible.
+*
+* @api
+* - pgs.accordion.init(root): initializes unregistered accordions within the specified Document or Element.
+* - pgs.accordion.api(element): returns the instance associated with an initialized accordion root.
+* - instance.open(): opens the panel and closes any other accordions on the page.
+* - instance.close(): closes the current panel.
+* - instance.toggle(): toggles the panel between its open and closed states.
+* - instance.refresh(): reruns initialization within the accordion container and returns the instance.
+* - instance.isOpen(): returns true when the open state is active.
+*
+* @related
+* - flexColumn: applies text spacing between the list items.
+*
+* @return HTML list of accessible accordion items with an associated button and panel.
+*/
+-->
+
+<ul pgs="flexColumn">
+    <li pgs="accordion">
+        <button pgs="accordion-button" type="button">
+            <i class="fa-solid fa-circle-question" aria-hidden="true"></i>
+            <span>Frequently asked question</span>
+        </button>
+
+        <div pgs="accordion-content" hidden>
+            <p>Example answer with reusable text content.</p>
+        </div>
+    </li>
+
+    <li pgs="accordion">
+        <button pgs="accordion-button" type="button">
+            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+            <span>Second section</span>
+        </button>
+
+        <div pgs="accordion-content" hidden>
+            <p>Additional accordion panel content.</p>
+        </div>
+    </li>
+</ul>

package/reference/html/components/alerts.html

@@ -0,0 +1,59 @@
+<!--
+/**
+ * @title Alerts
+ * @description Static inline feedback messages for contextual information, successful operations, warnings, and errors. Use the notification API for dynamic floating alerts and toasts.
+ *
+ * @pgs
+ * - alert: identifies the inline alert container.
+ * - alert-icon: identifies the decorative status icon.
+ * - alert-content: groups the title and descriptive message.
+ * - alert-title: identifies the alert heading.
+ *
+ * @pgs-state
+ * - info: presents neutral informational feedback.
+ * - success: presents confirmation of a successful operation.
+ * - warning: presents a condition that requires attention.
+ * - error: presents a failure or blocking problem.
+ *
+ * @related
+ * - flexColumn: vertically arranges the alert examples.
+ * - gapElements: applies element spacing between the examples.
+ * - notification: provides dynamic floating alerts and toast messages.
+ *
+ * @return Accessible HTML examples of the four inline alert states.
+ */
+-->
+
+<div pgs="flexColumn gapElements">
+    <div pgs="alert" pgs-state="info" role="status">
+        <i pgs="alert-icon" class="fa-solid fa-circle-info" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Information</strong>
+            <p>Your profile information can be updated at any time.</p>
+        </div>
+    </div>
+
+    <div pgs="alert" pgs-state="success" role="status">
+        <i pgs="alert-icon" class="fa-solid fa-circle-check" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Changes saved</strong>
+            <p>Your preferences were updated successfully.</p>
+        </div>
+    </div>
+
+    <div pgs="alert" pgs-state="warning" role="alert">
+        <i pgs="alert-icon" class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Check your information</strong>
+            <p>Some fields may require your attention before continuing.</p>
+        </div>
+    </div>
+
+    <div pgs="alert" pgs-state="error" role="alert">
+        <i pgs="alert-icon" class="fa-solid fa-circle-xmark" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Unable to save</strong>
+            <p>Correct the reported errors and try again.</p>
+        </div>
+    </div>
+</div>

package/reference/html/components/badges.html

@@ -0,0 +1,62 @@
+<!--
+/**
+ * @title Badge
+ * @description Collection of compact indicators for displaying categories, priorities, and visual states with consistent color variants.
+ *
+ * @pgs
+ * - badge: identifies the base badge variant.
+ *
+ * @pgs-option
+ * - badgePrimary: applies the primary color variant.
+ * - badgeStrong: applies the high-contrast variant.
+ * - badgeSuccess: represents a successful result.
+ * - badgeDot: adds a dot indicator to the badge.
+ * - badgeWarning: represents a warning.
+ * - badgeError: represents an error.
+ * - badgeInfo: represents informational content.
+ * - badgeNeutral: applies the neutral variant.
+ *
+ * @related
+ * - flexRow: arranges badges horizontally and allows them to wrap.
+ *
+ * @return HTML examples of the available badge variants.
+ */
+-->
+
+<div pgs="flexRow">
+    <span pgs="badge">
+        Base
+    </span>
+
+    <span pgs="badge" pgs-option="badgePrimary">
+        Primary
+    </span>
+
+    <span pgs="badge" pgs-option="badgeStrong">
+        Strong
+    </span>
+
+    <span pgs="badge" pgs-option="badgeSuccess badgeDot">
+        Active
+    </span>
+
+    <span pgs="badge" pgs-option="badgeWarning">
+        <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+        Warning
+    </span>
+
+    <span pgs="badge" pgs-option="badgeError">
+        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+        Error
+    </span>
+
+    <span pgs="badge" pgs-option="badgeInfo">
+        <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+        Info
+    </span>
+
+    <span pgs="badge" pgs-option="badgeNeutral">
+        Neutral
+    </span>
+
+</div>

package/{templates → reference}/html/components/breadcumbs.html

@@ -1,14 +1,14 @@
 <!--
 /**
  * @title Breadcrumb
- * @description Navigazione gerarchica che mostra il percorso della pagina corrente con collegamenti, separatori e indicazione semantica dell'elemento attivo.
+ * @description Hierarchical navigation that shows the current page path with links, separators, and a semantic indication of the active item.
  *
  * @pgs
- * - breadcrumb: identifica la lista principale del percorso di navigazione.
- * - breadcrumb-item: identifica ogni livello del percorso.
- * - breadcrumb-item-separator: identifica il separatore decorativo nascosto alle tecnologie assistive.
+ * - breadcrumb: identifies the main navigation path list.
+ * - breadcrumb-item: identifies each level in the path.
+ * - breadcrumb-item-separator: identifies the decorative separator hidden from assistive technologies.
  *
- * @return Struttura HTML semantica di una breadcrumb racchiusa in un elemento nav.
+ * @return Semantic breadcrumb HTML structure wrapped in a nav element.
  */
 -->
 
@@ -30,7 +30,7 @@
 
         <li pgs="breadcrumb-item">
             <span aria-current="page">
-                Articolo di prova
+                Sample article
             </span>
         </li>
     </ul>

package/reference/html/components/button.html

@@ -0,0 +1,51 @@
+<!--
+/**
+ * @title Button
+ * @description Button and action-link variants with sizes, emphasis, and icon-text composition defined by the design system.
+ *
+ * @pgs
+ * - button: identifies the standard button, which can also be used on anchor elements.
+ *
+ * @pgs-option
+ * - buttonReverse: reverses the visual order of the text and icon on the button.
+ * - buttonStrong: applies the variant with stronger visual emphasis.
+ * - buttonIcon: identifies a compact button composed primarily of an icon.
+ * - buttonMini: applies the smallest size variant.
+ * - buttonBig: applies the large size variant.
+ *
+ * @related
+ * - flexRow: arranges the button examples in a flexible row.
+ *
+ * @return HTML collection of the main button variants.
+ */
+-->
+
+<div pgs="flexRow">
+    <a pgs="button" href="#">
+        <i class="fa-duotone fa-solid fa-store"></i>
+        About
+    </a>
+
+    <button pgs="button" type="button" pgs-option="buttonReverse">
+        Next
+        <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+    </button>
+
+    <button pgs="button" pgs-option="buttonStrong" type="button">
+        <i class="fa-solid fa-check" aria-hidden="true"></i>
+        Submit
+    </button>
+
+    <button pgs="button" pgs-option="buttonIcon" type="button" aria-label="Settings">
+        <i class="fa-solid fa-gear" aria-hidden="true"></i>
+    </button>
+
+    <button pgs="button" pgs-option="buttonMini" type="button" aria-label="Information">
+        <i class="fa-solid fa-info" aria-hidden="true"></i>
+    </button>
+
+    <button pgs="button" pgs-option="buttonBig" type="button" aria-label="Large button">
+        <i class="fa-solid fa-rocket" aria-hidden="true"></i>
+        Large button
+    </button>
+</div>

package/reference/html/components/card.html

@@ -0,0 +1,45 @@
+<!--
+/**
+ * @title Card
+ * @description Reusable container for grouping an image, title, text, and actions in responsive previews or collections.
+ *
+ * @pgs
+ * - card: identifies the main card container.
+ * - card-img: identifies the main card image.
+ *
+ * @pgs-option
+ * - column-2: configures the related flex layout with two columns.
+ *
+ * @related
+ * - flexRow: arranges the cards in a responsive layout.
+ * - flexColumn: organizes the card or link content vertically.
+ * - imgCover: scales the image to fill the available area.
+ * - button: presents the final link as a standard button.
+ *
+ * @return Two card HTML structures, one with a separate action and one that is fully clickable.
+ */
+-->
+
+<div pgs="flexRow" pgs-option="column-2">
+
+    <article pgs="card flexColumn">
+        <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image">
+        
+        <div pgs="flexColumn">
+            <h3>Reusable card</h3>
+            <p>Descriptive card content suitable for lists, previews, and grids.</p>
+            <a pgs="button" href="#">Read more</a>
+        </div>
+    </article>
+    
+    <article pgs="card">
+        <a pgs="flexColumn" href="">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image">
+            
+            <div pgs="flexColumn">
+                <h3>Reusable card</h3>
+                <p>Descriptive card content suitable for lists, previews, and grids.</p>
+            </div>
+        </a>
+    </article>
+</div>