diff --git a/CHANGELOG.md b/CHANGELOG.md index b084649c48..2ea0b89981 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * Use component wrapper on 'add another' component ([PR #4632](https://github.com/alphagov/govuk_publishing_components/pull/4632)) * Use component wrapper on 'copy to clipboard' component ([PR #4633](https://github.com/alphagov/govuk_publishing_components/pull/4633)) * **BREAKING** Remove custom_header and custom_layout options ([PR #4635](https://github.com/alphagov/govuk_publishing_components/pull/4635)) +* Swap inset text top margin with padding ([PR #4634](https://github.com/alphagov/govuk_publishing_components/pull/4634)) ## 51.2.1 diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss b/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss index 5b61dc845b..2560a7e7e8 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss @@ -6,3 +6,15 @@ break-inside: avoid; } } + +.gem-c-inset-text { + padding-top: govuk-spacing(4); + + .govuk-inset-text { + margin-top: 0; + } + + @include govuk-media-query($from: tablet) { + padding-top: govuk-spacing(6); + } +} diff --git a/app/views/govuk_publishing_components/components/_inset_text.html.erb b/app/views/govuk_publishing_components/components/_inset_text.html.erb index ef5e4c5852..af6fb0951f 100644 --- a/app/views/govuk_publishing_components/components/_inset_text.html.erb +++ b/app/views/govuk_publishing_components/components/_inset_text.html.erb @@ -5,13 +5,15 @@ local_assigns[:margin_bottom] ||= 6 component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) - component_helper.add_class("gem-c-inset-text govuk-inset-text gem-c-force-print-link-styles-within") + component_helper.add_class("gem-c-inset-text gem-c-force-print-link-styles-within") component_helper.set_id(id) %> <%= tag.div(**component_helper.all_attributes) do %> - <% if defined? text %> - <%= text %> - <% elsif block_given? %> - <%= yield %> - <% end %> +