diff --git a/assets/scss/03-organisms/_page-header.scss b/assets/scss/03-organisms/_page-header.scss index 967850b8f6..35ad4d7d45 100644 --- a/assets/scss/03-organisms/_page-header.scss +++ b/assets/scss/03-organisms/_page-header.scss @@ -188,6 +188,10 @@ $page-header-widget-width: 350px; &:last-child { margin-bottom: 0; } + + .ma__page-header__sub-title { + margin-top: .8em; + } } .ma__page-banner ~ & &__title { @@ -210,7 +214,7 @@ $page-header-widget-width: 350px; } // Control font size and line height - // regardless of it's added to page + // regardless of it's added to page &__sub-title, &__sub-title * { font-size: 1.625rem !important; diff --git a/changelogs/DP-13965.md b/changelogs/DP-13965.md new file mode 100644 index 0000000000..f35862a9d2 --- /dev/null +++ b/changelogs/DP-13965.md @@ -0,0 +1,4 @@ +___DESCRIPTION___ +Minor +Added +- (Patternlab) [page-header] DP-13965: MF Change title and H1 on news overflow pages diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header-for-news-overflow.md b/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header-for-news-overflow.md new file mode 100644 index 0000000000..51399daf48 --- /dev/null +++ b/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header-for-news-overflow.md @@ -0,0 +1,6 @@ +### Description +This is a variant of the [Page Header](./?p=organisms-page-header) pattern showing an example of how it is being used on the news overflow page. + +### How to generate +* set the `nested` variable to true +* add a `title`, `subTitle`, and `headerTags` diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header.twig index 6fd7a0757e..285c4c1d71 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header.twig +++ b/patternlab/styleguide/source/_patterns/03-organisms/by-template/page-header.twig @@ -35,10 +35,18 @@ {% include "@atoms/04-headings/comp-heading.twig" %} {% endif %} - -