add button with css to make it visible

nhsuk · Nov 23, 2024 · fb045a9 · fb045a9
1 parent 895bbeb
commit fb045a9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/app/assets/sass/docs.scss b/app/assets/sass/docs.scss
@@ -52,3 +52,10 @@ p .app-code {
 .nhsuk-table__cell {
   padding: 16px 16px 16px 0;
 }
+
+
+// fix with bug for buttons when inverted - should be removed when source code is fixed
+
+.nhsuk-button--reverse, .nhsuk-button--reverse:link .nhsuk-button--reverse:visited, .nhsuk-button--reverse:active, .nhsuk-button--reverse:hover {
+  color: $color_nhsuk-blue !important;
+}
diff --git a/app/views/index.html b/app/views/index.html
@@ -7,13 +7,21 @@
     <div class="nhsuk-width-container nhsuk-hero--border">
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-one-half">
-          <div class="nhsuk-hero__wrapper">
+          <div class="nhsuk-hero__wrapper nhsuk-u-padding-bottom-0">
             <h1 class="nhsuk-heading-l">
               Rapidly create HTML prototypes of NHS services
             </h1>
-            <p class="nhsuk-body-l nhsuk-u-margin-bottom-0">
+            <p class="nhsuk-body-l">
               Use prototypes to get valuable feedback and insights from user research or the people you work with.
-            </p>
+
+<p class="nhsuk-u-margin-bottom-0">
+{{ button({
+  text: "Get started",
+  href: "/install",
+  classes: "nhsuk-button--reverse"
+}) }}
+</p>
+
           </div>
         </div>
         <div class="nhsuk-grid-column-one-half">
@@ -29,6 +37,9 @@ <h1 class="nhsuk-heading-l">
     <div class="nhsuk-grid-column-full">
 
       <ul class="nhsuk-grid-row nhsuk-card-group">
+
+    <!-- hidden as hopefully not needed with 'get started' as action button  -->
+    <!--
         <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
           {{ card({
             "href": "/install",
@@ -38,7 +49,9 @@ <h1 class="nhsuk-heading-l">
             "description": "Download and installation guides"
           }) }}
         </li>
-        <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+      -->
+    <!--  end hidden section -->
+        <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
           {{ card({
             "href": "/how-tos",
             "clickable": "true",
@@ -59,7 +72,7 @@ <h1 class="nhsuk-heading-l">
           }) }}
         </li>
 -->
-        <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+        <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
           {{ card({
             "href": "about",
             "clickable": "true",
@@ -68,7 +81,7 @@ <h1 class="nhsuk-heading-l">
             "description": "Contact the team to get help and support"
           }) }}
         </li>
-        <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
+        <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
           {{ card({
             "href": "contribute",
             "clickable": "true",