- Adjust line height for body text (1.5)

- Adjust line height for most headings (1.2)
- Add additional padding around 'pills'
- Use small content headings for secondary information items

app/assets/stylesheets/primary.css

@@ -25,7 +25,7 @@ main {
     font-weight: 400;
     color: #4d4d4d;
     word-wrap: break-word;
-    line-height: 28px;
+    line-height: 1.5em;
     flex-grow: 1;
 }
 
@@ -192,6 +192,8 @@ div.callout {
     justify-content: flex-start;
     align-items: flex-start;
     gap: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
 }
 
 .pill-wrapper {
@@ -285,6 +287,8 @@ div.callout {
         justify-content: flex-start;
         align-items: flex-start;
         gap: 8px;
+        padding-top: 4px;
+        padding-bottom: 4px;
     }
 
     .pill-wrapper {
@@ -333,19 +337,19 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    line-height: 42.00px;
+    line-height: 1.2em;
 }
 
 h2.content-heading {
     font-size: 27px;
-    line-height: 37.80px;
+    line-height: 1.2em;
     margin-top: 0;
     margin-bottom: 0;
 }
 
 h3.content-heading {
-    font-size: 22px;
-    line-height: 30.80px;
+    font-size: 16px;
+    line-height: 1.2em;
     margin-top: 0;
     margin-bottom: 0;
 }
@@ -360,6 +364,14 @@ ul.unformatted {
     }
 }
 
+div.about-item {
+    div.content-heading-small {
+        color: grey;
+        font-size: small;
+        line-height: normal;
+    }
+}
+
 /*tables*/
 
 table, td, th {

app/views/search/fragments/_about_this_result.html.erb

@@ -1,5 +1,5 @@
 <section hidden data-controller="claw" data-action="keydown@document->claw#handleKeyDown" id="about-this-result">
-  <h3 class="content-heading">Librarians' tools</h3>
+  <div class="content-heading-small">Librarians' tools</div>
   <div class="claw-grid-container">
     <% unless object.date.blank? %>
       <b class="grid-item" id="about-timestamp">Timestamp</b>

app/views/search/fragments/_assessment.html.erb

@@ -1,6 +1,6 @@
 <% unless assessment.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="assessment">Assessment</h3>
+    <div class="content-heading-small" id="assessment">Assessment</div>
     <%= assessment[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_attachment.html.erb

@@ -1,6 +1,6 @@
 <% unless attachments.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="attachment">Attachment</h3>
+    <div class="content-heading-small" id="attachment">Attachment</div>
     <%= attachments.pluck(:value).join('; ') %>
   </div>
 <% end %>

app/views/search/fragments/_certified_categories.html.erb

@@ -1,6 +1,6 @@
 <% unless certified_categories.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="certified-categories">Certified as</h3>
+    <div class="content-heading-small" id="certified-categories">Certified as</div>
     <%= render 'search/fragments/list', items: certified_categories, terminator: '', singular: false %>
     <% unless certified_date.blank? %>
       <br/><%= format_date(certified_date) %>

app/views/search/fragments/_cleared.html.erb

@@ -1,6 +1,6 @@
 <% unless cleared.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="cleared">Cleared</h3>
+    <div class="content-heading-small" id="cleared">Cleared</div>
     <%= boolean_yes_no(cleared) %>
   </div>
 <% end %>

app/views/search/fragments/_coming_into_force.html.erb

@@ -1,6 +1,6 @@
 <% unless notes.blank? && date.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="coming-into-force">Coming into force</h3>
+    <div class="content-heading-small" id="coming-into-force">Coming into force</div>
     <% unless date.blank? %>
       <%= format_date(date) %>
     <% end %>

app/views/search/fragments/_commission_number.html.erb

@@ -1,6 +1,6 @@
 <% unless commission_number.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="commission_number">Commission number</h3>
+    <div class="content-heading-small" id="commission_number">Commission number</div>
     <%= commission_number[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_considered_by_eu_si_committee.html.erb

@@ -1,7 +1,7 @@
 <% if considered %>
   <div class="about-item">
-    <h3 class="content-heading" id="considered-by-european-statutory-instrument-committee">Considered by the European
-      Statutory Instrument Committee</h3>
+    <div class="content-heading-small" id="considered-by-european-statutory-instrument-committee">Considered by the European
+      Statutory Instrument Committee</div>
     <%= format_date(considered) %>
   </div>
 <% end %>

app/views/search/fragments/_considered_by_secondary_legislation_committee.html.erb

@@ -1,7 +1,7 @@
 <% if considered %>
   <div class="about-item">
-    <h3 class="content-heading" id="considered-by-secondary-legislation-scrutiny-committee">Considered by the Secondary
-      Legislation Scrutiny Committee</h3>
+    <div class="content-heading-small" id="considered-by-secondary-legislation-scrutiny-committee">Considered by the Secondary
+      Legislation Scrutiny Committee</div>
     <%= format_date(considered) %>
   </div>
 <% end %>

app/views/search/fragments/_contains_explanatory_memorandum.html.erb

@@ -1,6 +1,6 @@
 <% if contains_em && contains_em[:value] %>
   <div class="about-item">
-    <h3 class="content-heading" id="contains-explanatory-memorandum">Contains explanatory memorandum</h3>
+    <div class="content-heading-small" id="contains-explanatory-memorandum">Contains explanatory memorandum</div>
     <%= boolean_yes_no(contains_em) %>
   </div>
 <% end %>

app/views/search/fragments/_contains_explanatory_note.html.erb

@@ -1,6 +1,6 @@
 <% if contains_note && contains_note[:value] %>
   <div class="about-item">
-    <h3 class="content-heading" id="contains-explanatory-note">Contains explanatory note</h3>
+    <div class="content-heading-small" id="contains-explanatory-note">Contains explanatory note</div>
     <%= boolean_yes_no(contains_note) %>
   </div>
 <% end %>

app/views/search/fragments/_contains_impact_assessment.html.erb

@@ -1,6 +1,6 @@
 <% if contains_ia && contains_ia[:value] %>
   <div class="about-item">
-    <h3 class="content-heading" id="contains-impact-assessment">Contains impact assessment</h3>
+    <div class="content-heading-small" id="contains-impact-assessment">Contains impact assessment</div>
     <%= boolean_yes_no(contains_ia) %>
   </div>
 <% end %>

app/views/search/fragments/_contains_statistics.html.erb

@@ -1,6 +1,6 @@
 <% if contains_statistics && contains_statistics[:value] %>
   <div class="about-item">
-    <h3 class="content-heading" id="contains-statistics">Contains statistics</h3>
+    <div class="content-heading-small" id="contains-statistics">Contains statistics</div>
     <%= boolean_yes_no(contains_statistics) %>
   </div>
 <% end %>

app/views/search/fragments/_contributions.html.erb

@@ -1,6 +1,6 @@
 <% unless contribution_ids.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="contributions">Proceeding contributions</h3>
+    <div class="content-heading-small" id="contributions">Proceeding contributions</div>
     <div class="flex-list">
       <% contribution_ids[..1].each do |contribution_id| %>
         <%= render 'search/fragments/contribution', contribution: @associated_object_data[contribution_id] %>

app/views/search/fragments/_corporate_author.html.erb

@@ -1,9 +1,9 @@
 <% unless author.blank? %>
   <div class="about-item">
     <% unless label.blank? %>
-      <h3 class="content-heading" id="corporate-author">
+      <div class="content-heading-small" id="corporate-author">
         <%= label %>
-      </h3>
+      </div>
     <% end %>
     <% author.each do |item| %>
       <%= search_link(item) %><br/>

app/views/search/fragments/_corrected_answer.html.erb

@@ -1,6 +1,6 @@
 <% unless object.corrected_answer.blank? && object.correcting_item_link.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="corrected-answer">Corrected answer</h3>
+    <div class="content-heading-small" id="corrected-answer">Corrected answer</div>
     <% unless object.corrected_answer.blank? %>
       <p class="html-content">
         <%= raw(object.corrected_answer[:value]) %>

app/views/search/fragments/_council_number.html.erb

@@ -1,6 +1,6 @@
 <% unless council_number.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="council_number">Council number</h3>
+    <div class="content-heading-small" id="council_number">Council number</div>
     <%= council_number[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_date.html.erb

@@ -1,6 +1,6 @@
 <% unless date.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="<%= title %>"><%= title %></h3>
+    <div class="content-heading-small" id="<%= title %>"><%= title %></div>
     <div>
       <%= format_date(date) %>
     </div>

app/views/search/fragments/_decision.html.erb

@@ -1,6 +1,6 @@
 <% unless decision.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="decision">Decision</h3>
+    <div class="content-heading-small" id="decision">Decision</div>
     <%= decision[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_departments.html.erb

@@ -1,6 +1,6 @@
 <% unless departments.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="department">Department</h3>
+    <div class="content-heading-small" id="department">Department</div>
     <% departments.each do |department| %>
       <%= search_link(department) %><br/>
     <% end %>

app/views/search/fragments/_ec_documents.html.erb

@@ -1,6 +1,6 @@
 <% unless ec_documents.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="ec-documents">EC documents</h3>
+    <div class="content-heading-small" id="ec-documents">EC documents</div>
     <%= ec_documents[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_elc_number.html.erb

@@ -1,6 +1,6 @@
 <% unless elc_number.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="elc_number">ELC number</h3>
+    <div class="content-heading-small" id="elc_number">ELC number</div>
     <%= elc_number[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_eu_parliament_committee.html.erb

@@ -1,6 +1,6 @@
 <% unless eu_parliament_committee.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="european-parliament-committee">European Parliament committee</h3>
+    <div class="content-heading-small" id="european-parliament-committee">European Parliament committee</div>
     <%= eu_parliament_committee[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_failed_oral.html.erb

@@ -1,6 +1,6 @@
 <% if failed_oral && failed_oral[:value] %>
   <div class="about-item">
-    <h3 class="content-heading" id="failed-oral">Question not reached</h3>
+    <div class="content-heading-small" id="failed-oral">Question not reached</div>
     <%= boolean_yes_no(failed_oral) %>
   </div>
 <% end %>

app/views/search/fragments/_grouped_for_answer.html.erb

@@ -1,6 +1,6 @@
 <% if grouped && grouped[:value] %>
   <div class="about-item">
-    <h3 class="content-heading" id="grouped-for-answer">Grouped for answer</h3>
+    <div class="content-heading-small" id="grouped-for-answer">Grouped for answer</div>
     <%= boolean_yes_no(grouped) %>
   </div>
 <% end %>

app/views/search/fragments/_isbn.html.erb

@@ -1,6 +1,6 @@
 <% unless isbn.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="isbn">ISBN</h3>
+    <div class="content-heading-small" id="isbn">ISBN</div>
     <%= isbn[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_laid_in_draft.html.erb

@@ -1,6 +1,6 @@
 <% if laid_in_draft && laid_in_draft[:value] %>
   <div class="about-item">
-    <h3 class="content-heading" id="laid-in-draft">Laid in draft</h3>
+    <div class="content-heading-small" id="laid-in-draft">Laid in draft</div>
     <%= boolean_yes_no(laid_in_draft) %>
   </div>
 <% end %>

app/views/search/fragments/_laying_authority.html.erb

@@ -1,6 +1,6 @@
 <% unless laying_authority.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="laying-authority">Laying authority</h3>
+    <div class="content-heading-small" id="laying-authority">Laying authority</div>
     <%= laying_authority[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_legislation.html.erb

@@ -1,6 +1,6 @@
 <% unless legislation.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="legislation">Legislation</h3>
+    <div class="content-heading-small" id="legislation">Legislation</div>
     <% legislation.each do |legislation| %>
       <%= search_link(legislation) %><br/>
     <% end %>

app/views/search/fragments/_legislative_stage.html.erb

@@ -1,6 +1,6 @@
 <% unless legislative_stage.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="legislative-stage">Legislative stage</h3>
+    <div class="content-heading-small" id="legislative-stage">Legislative stage</div>
     <%= render 'search/fragments/list', items: legislative_stage, terminator: "", singular: false %>
   </div>
 <% end %>

app/views/search/fragments/_library_location.html.erb

@@ -1,6 +1,6 @@
 <% unless commons.blank? && lords.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="library-location">Library location</h3>
+    <div class="content-heading-small" id="library-location">Library location</div>
     <% unless commons.blank? %>
       Commons Library: <%= commons[:value] %><br/>
     <% end %>

app/views/search/fragments/_link.html.erb

@@ -1,6 +1,6 @@
 <% if object.has_link? %>
   <div class="about-item">
-    <h3 class="content-heading" id="link">Link</h3>
+    <div class="content-heading-small" id="link">Link</div>
     <%= link_to "View this #{object_display_name(object.type)} on #{ URI.parse(object.display_link[:value]).host}", object.display_link[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_notes.html.erb

@@ -1,6 +1,6 @@
 <% unless notes.blank? %>
 <div class="about-item">
-  <h3 class="content-heading" id="notes">Notes</h3>
+  <div class="content-heading-small" id="notes">Notes</div>
   <div>
     <%= notes[:value] %>
   </div>

app/views/search/fragments/_oral_question_type.html.erb

@@ -1,6 +1,6 @@
 <% unless contribution_type.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="oral_question_type">Oral question type</h3>
+    <div class="content-heading-small" id="oral_question_type">Oral question type</div>
     <%= contribution_type[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_other_number.html.erb

@@ -1,6 +1,6 @@
 <% unless other_number.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="other_number">Other number</h3>
+    <div class="content-heading-small" id="other_number">Other number</div>
     <%= other_number[:value] %>
   </div>
 <% end %>

app/views/search/fragments/_other_sponsors.html.erb

@@ -1,6 +1,6 @@
 <% unless sponsors.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="other-sponsors">Other sponsors</h3>
+    <div class="content-heading-small" id="other-sponsors">Other sponsors</div>
     <ul class="unformatted">
       <% sponsors.each do |sponsor| %>
         <li>- <%= search_link(sponsor) %></li>

app/views/search/fragments/_paper_procedure.html.erb

@@ -1,6 +1,6 @@
 <% unless procedure.blank? %>
   <div class="about-item">
-    <h3 class="content-heading" id="procedure">Procedure</h3>
+    <div class="content-heading-small" id="procedure">Procedure</div>
     <%= search_link(procedure) %>
     <% unless approval_days.blank? || approval_days[:value]&.to_i.zero? %>
       <br/><%= approval_days[:value] %> days scrutiny period