@digigov/css 0.38.2 → 1.0.0-rc

package/src/components/tabs.css

@@ -11,8 +11,8 @@
       clear: both;
     }
     .govgr-tabs__list-item {
-      @apply relative  px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left  md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 ;
+      @apply relative px-4 py-2 m-0 shadow-none cursor-pointer;
+      @apply md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2;
       @apply print:hidden;
       &.govgr-tabs__list-item-selected {
         @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
@@ -24,14 +24,10 @@
     }
     .govgr-tabs__tab {
       @apply text-lg no-underline hover:underline focus:underline;
-      text-underline-offset: .1em;
+      text-underline-offset: 0.1em;
       &:after {
         content: "";
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        @apply absolute top-0 right-0 bottom-0 left-0;
       }
       &:focus {
         background-color: var(--color-focus);
@@ -39,16 +35,15 @@
         -webkit-box-shadow: inset 0 0 0 3px var(--color-focus);
         box-shadow: inset 0 0 0 3px var(--color-focus);
         outline-offset: 0px;
-        text-decoration-thickness: .2rem;
+        text-decoration-thickness: 0.2rem;
       }
-
     }
   }
   .govgr-tabs__panel {
     @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
     print:block print:border-0 print:py-3;
-    &.govgr-tabs__panel-visible {
+    &.govgr-tabs__panel--visible {
       @apply block;
     }
   }
-}
+}

package/src/components/task-list.css

@@ -7,10 +7,10 @@
 .govgr-task-list__heading {
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2;
 }
-.govgr-task-list__heading-m {
+.govgr-task-list__heading--md {
   @apply md:text-2xl text-xl md:mb-4 mb-2;
 }
-.govgr-task-list__heading-s {
+.govgr-task-list__heading--sm {
   @apply md:text-lg text-base md:mb-3 mb-1;
 }
 .govgr-task-list__content {
@@ -18,11 +18,11 @@
   .govgr-body {
     @apply mb-2 md:mb-3;
   }
-  .govgr-summary-list__row:first-child  {
-    &>dt {
+  .govgr-summary-list__row:first-child {
+    & > dt {
       @apply border-t-2 border-base-400;
     }
-    &>dd {
+    & > dd {
       @apply sm:border-t-2 sm:border-base-400;
     }
   }
@@ -33,12 +33,13 @@
 .govgr-task-list__content__tag {
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest;
 }
-.govgr-tag__primary {
-  @apply bg-info text-white print:border-2 print:bg-white print:border-info-hover print:text-info-hover print:mr-4; 
+.govgr-task-list__content__tag--primary {
+  @apply bg-info text-white print:border-2 print:bg-white print:border-info-hover print:text-info-hover print:mr-4;
 }
-.govgr-tag__secondary {
+.govgr-task-list__content__tag--secondary {
   @apply bg-secondary text-base-content print:border-2 print:bg-white print:border-info print:text-info print:mr-4;
 }
-.govgr-tag__gray {
+.govgr-task-list__content__tag--gray {
   @apply bg-base-300 print:border-2 print:bg-white print:border-base-800 print:text-base-800 print:mr-4;
-}
+}
+.govgr-tag {}

package/src/components/timeline.css

@@ -17,27 +17,29 @@
     border-b-4 border-secondary;
   }
 }
-.govgr-timeline__heading-m {
-  @apply md:text-2xl text-xl md:mb-4 mb-2 ;
+.govgr-timeline__heading-md {
+  @apply md:text-2xl text-xl md:mb-4 mb-2;
   &::before {
     @apply top-3 w-3;
   }
 }
-.govgr-timeline__heading-s {
-  @apply md:text-lg text-base md:mb-3 mb-1 ;
+.govgr-timeline__heading-sm {
+  @apply md:text-lg text-base md:mb-3 mb-1;
   &::before {
     @apply top-2.5 w-3;
   }
 }
 .govgr-timeline__content {
   @apply mb-4;
-  .govgr-hint, .govgr-body {
+  .govgr-hint,
+  .govgr-body {
     @apply mb-2 md:mb-3;
   }
 }
 .govgr-timeline__actions {
   @apply flex flex-wrap items-center gap-4 mb-6;
-  .govgr-btn, .govgr-link {
+  .govgr-btn,
+  .govgr-link {
     @apply mb-0;
   }
-}
+}

package/src/components/typography.css

@@ -6,29 +6,29 @@
   font-weight: var(--heading-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-heading-l {
+.govgr-heading-lg {
   @apply mx-0;
-  font-size: var(--heading-l-font-size);
-  line-height:var(--heading-l-line-height);
-  margin-bottom:var(--heading-l-margin-bottom);
-  font-weight: var(--heading-l-font-weight);
-  letter-spacing: var(--heading-l-letter-spacing);
+  font-size: var(--heading-lg-font-size);
+  line-height:var(--heading-lg-line-height);
+  margin-bottom:var(--heading-lg-margin-bottom);
+  font-weight: var(--heading-lg-font-weight);
+  letter-spacing: var(--heading-lg-letter-spacing);
 }
-.govgr-heading-m {
+.govgr-heading-md {
   @apply mx-0;
-  font-size: var(--heading-m-font-size);
-  line-height:var(--heading-m-line-height);
-  margin-bottom:var(--heading-m-margin-bottom);
-  font-weight: var(--heading-m-font-weight);
-  letter-spacing: var(--heading-m-letter-spacing);
+  font-size: var(--heading-md-font-size);
+  line-height:var(--heading-md-line-height);
+  margin-bottom:var(--heading-md-margin-bottom);
+  font-weight: var(--heading-md-font-weight);
+  letter-spacing: var(--heading-md-letter-spacing);
 }
-.govgr-heading-s {
+.govgr-heading-sm {
   @apply mx-0 ;
-  font-size: var(--heading-s-font-size);
-  line-height:var(--heading-s-line-height);
-  margin-bottom:var(--heading-s-margin-bottom);
-  font-weight: var(--heading-s-font-weight);
-  letter-spacing: var(--heading-s-letter-spacing);
+  font-size: var(--heading-sm-font-size);
+  line-height:var(--heading-sm-line-height);
+  margin-bottom:var(--heading-sm-margin-bottom);
+  font-weight: var(--heading-sm-font-weight);
+  letter-spacing: var(--heading-sm-letter-spacing);
 } 
 .govgr-caption-xl {
   @apply block mx-0 font-normal;
@@ -40,24 +40,24 @@
   letter-spacing: var(--heading-xl-letter-spacing);
 
 }
-.govgr-caption-l {
+.govgr-caption-lg {
   @apply block mx-0 font-normal;
-  color: var(--caption-l-color);
-  font-size: var(--caption-l-font-size);
-  line-height: var(--caption-l-line-height);
-  margin-bottom: var(--caption-l-margin-bottom);
-  font-weight: var(--caption-l-font-weight);
-  letter-spacing: var(--caption-l-letter-spacing);
+  color: var(--caption-lg-color);
+  font-size: var(--caption-lg-font-size);
+  line-height: var(--caption-lg-line-height);
+  margin-bottom: var(--caption-lg-margin-bottom);
+  font-weight: var(--caption-lg-font-weight);
+  letter-spacing: var(--caption-lg-letter-spacing);
 
 }
-.govgr-caption-m {
+.govgr-caption-md {
   @apply block mx-0 font-normal;
-  color: var(--caption-m-color);
-  font-size: var(--caption-m-font-size);
-  line-height: var(--caption-m-line-height);
-  margin-bottom: var(--caption-m-margin-bottom);
-  font-weight: var(--caption-m-font-weight);
-  letter-spacing: var(--caption-m-letter-spacing);
+  color: var(--caption-md-color);
+  font-size: var(--caption-md-font-size);
+  line-height: var(--caption-md-line-height);
+  margin-bottom: var(--caption-md-margin-bottom);
+  font-weight: var(--caption-md-font-weight);
+  letter-spacing: var(--caption-md-letter-spacing);
 
 }
 .govgr-\!-font-size-14 {
@@ -131,16 +131,13 @@
   color: var(--body-color);
   letter-spacing: var(--body-letter-spacing);
 }
-.govgr-body-l {
-  font-size: var(--body-l-font-size);
-  line-height: var(--body-l-line-height);
+.govgr-body-lg {
+  font-size: var(--body-lg-font-size);
+  line-height: var(--body-lg-line-height);
 }
-.govgr-body-s {
-  font-size: var(--body-s-font-size);
-  line-height: var(--body-s-line-height);
-}
-.govgr-hint-l {
-  @apply mb-4 lg:text-2xl text-lg text-base-800;
+.govgr-body-sm {
+  font-size: var(--body-sm-font-size);
+  line-height: var(--body-sm-line-height);
 }
 .govgr-hint {
   font-size: var(--hint-font-size);
@@ -149,9 +146,6 @@
   color: var(--hint-color);
   letter-spacing: var(--hint-letter-spacing);
 }
-.govgr-hint-s {
-  @apply mb-4 lg:text-base text-sm text-base-800;
-}
 .govgr-background-dark, .govgr-masthead--primary {
   .govgr-hint {
     @apply opacity-70 text-white print:text-base-content;
@@ -171,14 +165,15 @@
   font-size: var(--link-font-size);
   line-height: var(--link-line-height);
   letter-spacing: var(--link-letter-spacing);
-  &:hover:not(:focus) {
+  &:hover {
     text-decoration-thickness: 2px;
     color: var(--link-color-hover);
   }
   &:focus {
+    color: var(--link-color-active);
     background-color: var(--color-focus);
     box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    text-decoration:none;
+    text-decoration:none !important;
     outline: none; 
   }
 }
@@ -207,6 +202,7 @@
     }
   }
 }
+
 .govgr-back-link {
   font-size: var(--back-link-font-size);
   letter-spacing: var(--back-link-letter-spacing);
@@ -220,7 +216,7 @@
     text-decoration:none;
     outline: none; 
   }
-  .govgr-caret--left {
+  .govgr-svg-icon--caret {
     fill:var(--color-base-content);
     @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
   }
@@ -241,7 +237,14 @@
     }
   }
 }
-
+.govgr-visually-hidden {
+  @apply absolute m-0 p-0 overflow-hidden border-0 whitespace-nowrap !important;
+  width: 1px !important;
+  height: 1px !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+}
 @media print {
   .govgr-body .govgr-link[href^="#"]:after {
     display: none;

package/src/pages/admin-filtering-data.js

@@ -3,7 +3,7 @@ import Image from 'next/image';
 
 export default function Home() {
   return (
-    <div className="example">
+    <div>
       <header className="govgr-admin-header" role="banner" data-module="govgr-header">
         <div className="govgr-admin-header__container">
           <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" alt="gov.gr logo" />
@@ -12,14 +12,14 @@ export default function Home() {
       <div className="govgr-admin-wrapper">
         <div className="govgr-admin-width-container">
           <div className="govgr-admin-main-wrapper">
-            <div className="govgr-admin-grid-column-12">
+            <div className="govgr-grid__col-span-12">
               <h1 className="govgr-heading-xl">Αναζήτηση μεταφραστή</h1>
               <div className="govgr-field">
                 <label className="govgr-label"> Αναζήτηση με λέξη-κλειδί  </label>
                 <div className="govgr-search">
                   <input className="govgr-input" type="text" id="business-name" name="business-name" />
                   <button className="govgr-btn govgr-input__search-btn">
-                    <svg className="govgr-search-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true" >
+                    <svg className="govgr-svg-icon--search" focusable="false" viewBox="0 0 24 24" aria-hidden="true" >
                       <path d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z" />
                     </svg>
                   </button>
@@ -29,45 +29,45 @@ export default function Home() {
             <aside className="govgr-admin-side-content">
               <div className="govgr-filter">
                 <div className="govgr-filter__heading">
-                  <a className="govgr-link govgr-filter__close-link" href="#">
+                  <a className="govgr-link govgr-filter__close-btn" href="#">
                     Κλείσιμο
-                    <svg class="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                    <svg class="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
                   </a>
-                  <h3 className="govgr-heading-m">Φίλτρα</h3>
+                  <h3 className="govgr-heading-md">Φίλτρα</h3>
                 </div>
                 <div className="govgr-filter__content">
                   {/* <div className="govgr-filter__selected">
                   <div className="govgr-filter__selected-heading">
-                    <h3 className="govgr-heading-s">Επιλεγμένα φίλτρα</h3>
+                    <h3 className="govgr-heading-sm">Επιλεγμένα φίλτρα</h3>
                   </div>
-                  <p className="govgr-hint-s"> Δεν έχει επιλεχθεί κάποιο φίλτρο. </p>
-                  <p className="govgr-hint-s"> Για να προσθέσετε φίλτρο, επιλέξτε τουλάχιστον μία από τις παρακάτω επιλογές και πατήστε το κουμπί "Αναζήτηση".</p>
+                  <p className="govgr-hint-sm"> Δεν έχει επιλεχθεί κάποιο φίλτρο. </p>
+                  <p className="govgr-hint-sm"> Για να προσθέσετε φίλτρο, επιλέξτε τουλάχιστον μία από τις παρακάτω επιλογές και πατήστε το κουμπί "Αναζήτηση".</p>
                 </div> */}
                   <div className="govgr-filter__selected">
                     <div className="govgr-filter__selected-heading">
-                      <h3 className="govgr-heading-s">Επιλεγμένα φίλτρα</h3>
+                      <h3 className="govgr-heading-sm">Επιλεγμένα φίλτρα</h3>
                       <a className="govgr-link" href="#"> Καθαρισμός</a>
                     </div>
                     <h4 className="govgr-chip--heading">Περιοχή</h4>
                     <ul className="govgr-chips">
                       <li><a className="govgr-chip" href="#">Άλιμος
-                        <svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                        <svg className="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
                       </a></li>
                       <li><a className="govgr-chip" href="#">Πετρούπολη <div className="govgr-chip--x-icon">
-                        <svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                        <svg className="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
                       </div> </a></li>
                       <li><a className="govgr-chip" href="#">Δροσιά <div className="govgr-chip--x-icon">
-                        <svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                        <svg className="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
                       </div> </a></li>
                     </ul>
                   </div>
                   <div className="govgr-filter__options">
                     <div className="govgr-field">
-                      <label className="govgr-heading-s govgr-label" for="business-name">Αναζήτηση λέξης</label>
+                      <label className="govgr-heading-sm govgr-label" for="business-name">Αναζήτηση λέξης</label>
                       <input className="govgr-input" type="text" id="business-name" name="business-name" />
                     </div>
                     <div className="govgr-field">
-                      <label className="govgr-heading-s govgr-label" for="select-list">Περιοχή</label>
+                      <label className="govgr-heading-sm govgr-label" for="select-list">Περιοχή</label>
                       <select className="govgr-select" id="select-list" name="select-list">
                         <option value="popular" selected>France</option>
                         <option value="recently" selected>Άγιος Δημήτριος</option>
@@ -77,7 +77,7 @@ export default function Home() {
                     </div>
                     <div className="govgr-field">
                       <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
-                        <legend className="govgr-heading-s govgr-fieldset__legend">Γλώσσα</legend>
+                        <legend className="govgr-heading-sm govgr-fieldset__legend">Γλώσσα</legend>
                         <div className="govgr-checkboxes">
                           <div className="govgr-checkboxes__item">
                             <input className="govgr-checkboxes__input" type="checkbox" id="runny-nose" name="runny-nose" value="runny-nose" />
@@ -104,13 +104,13 @@ export default function Home() {
             </aside>
             <main className="govgr-admin-main-content">
               <div className="govgr-results-heading">
-                <h3 className="govgr-heading-m">146 Αποτελέσματα</h3>
+                <h3 className="govgr-heading-md">146 Αποτελέσματα</h3>
                 <div className="govgr-results-heading__actions">
                   <a className="govgr-link" href="#"> Εξαγωγή δεδομένων</a>
                   <a className="govgr-link govgr-link-filters" href="#"> Φίλτρα</a>
                 </div>
               </div>
-              <hr className="govgr-section-break govgr-section-break--visible govgr-section-break--m" />
+              <hr className="govgr-section-break govgr-section-break--visible govgr-section-break--md" />
               <div className="govgr-results-action-bar">
                 <div className="govgr-field">
                   <label className="govgr-label" for="select-list2"> Ταξινόμηση: </label>
@@ -132,21 +132,21 @@ export default function Home() {
                 <div className="govgr-card govgr-grid__col-span-12">
                   <div className="govgr-card__body">
                     <div role="heading" aria-level="2" className="govgr-card__heading">This is a Card</div>
-                    <div className="govgr-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    <div className="govgr-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     </div>
                   </div>
                 </div>
                 <div className="govgr-card govgr-grid__col-span-12">
                   <div className="govgr-card__body">
                     <div role="heading" aria-level="2" className="govgr-card__heading">This is a Card</div>
-                    <div className="govgr-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
+                    <div className="govgr-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
                     </div>
                   </div>
                 </div>
                 <div className="govgr-card govgr-grid__col-span-12">
                   <div className="govgr-card__body">
                     <div role="heading" aria-level="2" className="govgr-card__heading">This is a Card</div>
-                    <div className="govgr-card__text">Lorem ipsum dolor sit amet.
+                    <div className="govgr-card__content">Lorem ipsum dolor sit amet.
                     </div>
                   </div>
                 </div>

package/src/pages/admin.js

@@ -1,8 +1,8 @@
 export default function Home() {
   return (
-    <div className="example">
+    <div>
       <header className="govgr-header" role="banner" data-module="govgr-header">
-        <div className="govgr-header__container-full">
+        <div className="govgr-admin-header__container">
           <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" alt="gov.gr logo" />
           {/* <div class="govgr-header__container">
             <input class="govgr-input" type="text" id="business-name" name="business-name" />
@@ -11,7 +11,7 @@ export default function Home() {
       </header>
       <div className="govgr-admin-main-wrapper">
         <div className="govgr-admin-side-content">
-          <h4 className="govgr-heading-s">Σχετικοί Σύνδεσμοι</h4>
+          <h4 className="govgr-heading-sm">Σχετικοί Σύνδεσμοι</h4>
           <nav className="govgr-vertical-nav">
             <a className="govgr-link govgr-vertical-nav__item govgr-vertical-nav__item--active" href="#"> Σύνδεσμος 1</a>
             <a className="govgr-link govgr-vertical-nav__item" href="#"> Σύνδεσμος 2</a>
@@ -40,20 +40,20 @@ export default function Home() {
           <div class="govgr-card--border govgr-card">
             <div class="govgr-card__body">
               <div role="heading" aria-level="2" class="govgr-card__heading">This is a Card with border</div>
-              <div class="govgr-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore   magna aliqua.
+              <div class="govgr-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore   magna aliqua.
               </div>
             </div>
           </div>
-          <div class="govgr-button-group">
+          <div class="govgr-btn-group">
             <button class="govgr-btn govgr-btn-primary">
               Save and continue
             </button>
             <button class="govgr-btn govgr-btn-secondary">Save as draft</button>
           </div>
-          <span className="govgr-caption-l"> Caption for h2 </span>
-          <h2 className="govgr-heading-l">Heading 2</h2>
-          <span className="govgr-caption-m"> Caption for h3 </span>
-          <h3 className="govgr-heading-m">Heading 2</h3>
+          <span className="govgr-caption-lg"> Caption for h2 </span>
+          <h2 className="govgr-heading-lg">Heading 2</h2>
+          <span className="govgr-caption-md"> Caption for h3 </span>
+          <h3 className="govgr-heading-md">Heading 2</h3>
         </div>
       </div>
     </div >