From fa1ba1d42386a8f879792fc6dfc8af3bbbe5a9c1 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Wed, 23 Nov 2022 00:29:16 +0100
Subject: [PATCH] block CTA
---
assets/sass/_theme/_configuration.sass | 84 +++++----
assets/sass/_theme/_utils.sass | 13 +-
assets/sass/_theme/blocks/call_to_action.sass | 162 ++++++++++--------
assets/sass/_theme/blocks/contact.sass | 2 +-
assets/sass/_theme/blocks/definitions.sass | 2 +-
assets/sass/_theme/blocks/files.sass | 4 +-
assets/sass/_theme/blocks/timeline.sass | 4 +-
.../sass/_theme/design-system/pagination.sass | 2 +-
assets/sass/_theme/design-system/table.sass | 4 +-
.../design-system/table_of_content.sass | 6 +-
.../sass/_theme/design-system/typography.sass | 9 +-
.../design-system/vendors/glightbox.sass | 2 +-
assets/sass/_theme/sections/diplomas.sass | 2 +-
assets/sass/_theme/sections/persons.sass | 2 +-
assets/sass/_theme/sections/posts.sass | 8 +-
assets/sass/_theme/sections/programs.sass | 8 +-
.../blocks/templates/call_to_action.html | 7 +-
17 files changed, 173 insertions(+), 148 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 3a7439be..8421380c 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -8,18 +8,11 @@ $color-border: rgba(0, 0, 0, 0.30) !default
$color-background-alt: #F2F2F2 !default
$color-background: #FFFFFF !default
-// legacy
-$main-color: $color-text !default // Text color
-$main-active-color: $color-accent !default
-$main-background-color: $color-background !default // Background color
-$main-border-color: $color-border !default // Border color
-$main-light-color: $color-background-alt !default
// TODO : faut-il mettre les largeur de border dans le config ? overkill ?
-$body-color: $main-color !default
-$body-background-color: $main-background-color !default
-
-$link-color: $main-color !default
+$body-color: $color-text !default
+$body-background-color: $color-background !default
+$link-color: $color-text !default
// TYPOGRAPHY
@@ -63,15 +56,15 @@ $h4-weight: bold !default
$h4-text-transform: none !default
// h5 or Section
-$h5-size-md: px2rem(20) !default
-$h5-size: px2rem(24) !default
+$h5-size-md: px2rem(24) !default
+$h5-size: px2rem(20) !default
$h5-line-height: 130% !default
$h5-weight: $heading-font-weight !default
$h5-text-transform: uppercase !default
// h6 or Tab
-$h6-size-md: px2rem(14) !default
-$h6-size: px2rem(20) !default
+$h6-size-md: px2rem(20) !default
+$h6-size: px2rem(14) !default
$h6-line-height: 18% !default
$h6-weight: $heading-font-weight !default
$h6-text-transform: uppercase !default
@@ -98,8 +91,8 @@ $small-weight: normal !default
// Signature
$signature-font-family: $heading-font-family !default
-$signature-size: px2rem(18)
$signature-size-md: px2rem(22)
+$signature-size: px2rem(18)
$signature-line-height: 130% !default
$signature-weight: $heading-font-weight !default
@@ -120,11 +113,14 @@ $quote-weight: normal !default
// Buttons
$btn-font-size-md: px2rem(18) !default // TODO
$btn-font-size: px2rem(14) !default
-$btn-padding-x: px2rem(12) !default
-$btn-padding-y: px2rem(6) !default
+$btn-padding-x-md: px2rem(50) !default
+$btn-padding-y-md: px2rem(15) !default
+$btn-padding-x: px2rem(20) !default
+$btn-padding-y: px2rem(13) !default
+$btn-border-radius: px2rem(4) !default
// Breadcrumb
-$breadcrumb-color: invert($main-color) !default
+$breadcrumb-color: invert($color-text) !default
// Spacing
$spacing0: px2rem(12) !default
@@ -151,9 +147,9 @@ $zindex-toc-cta: 49 !default
$zindex-aside: 48 !default
// Header
-$header-color: $main-color !default
+$header-color: $color-text !default
$header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
-$header-background: $main-background-color !default
+$header-background: $color-background !default
$header-sticky-enabled: true !default
$header-sticky-background: $header-background !default
$header-sticky-color: $header-color !default
@@ -173,16 +169,16 @@ $header-height-md: 74px !default
$body-overlay-color: rgba(0, 0, 0, 0.3) !default
// Footer
-$footer-color: $main-color !default
-$footer-background-color: color-contrast($main-background-color, 3%) !default
+$footer-color: $color-text !default
+$footer-background-color: color-contrast($color-background, 3%) !default
$footer-logo-height: $header-logo-height !default
$footer-logo-height-md: $footer-logo-height !default
// Hero
$hero-height: 375px !default
$hero-height-md: 550px !default
-$hero-color: invert($main-color) !default
-$hero-background-color: invert($main-background-color) !default
+$hero-color: invert($color-text) !default
+$hero-background-color: invert($color-background) !default
// Icons
$icons: ()
@@ -219,8 +215,8 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 144
// System
// Table of content
-$toc-color: $main-color !default
-$toc-active-color: $main-active-color !default // TODO : checker ce que ça fait
+$toc-color: $color-text !default
+$toc-active-color: $color-accent !default // TODO : checker ce que ça fait
$toc-font-family: $body-font-family !default
$toc-font-size: $body-size !default
$toc-font-size-md: $body-size-md !default
@@ -238,23 +234,23 @@ $table-body-size-md: $small-size-md !default
// BLOCKS
// Block call to action
-$block-call-to-action-background: invert($main-background-color) !default
-$block-call-to-action-color: invert($main-color) !default
-$block-call-to-action-button-background: invert($block-call-to-action-background) !default
-$block-call-to-action-button-color: invert($block-call-to-action-color) !default
+$block-call-to-action-background: $color-accent !default
+$block-call-to-action-color: $color-background !default
+$block-call-to-action-button-background: $color-background !default
+$block-call-to-action-button-color: $color-text !default
// Block definitions
-$block-definition-border-color: $main-border-color !default
-$block-block-definition-border-color-hovered: color-contrast($block-definition-border-color, 100%) !default
+$block-definition-border-color: $color-border !default
+$block-definition-border-color-hovered: color-contrast($block-definition-border-color, 100%) !default
$block-definition-font-size: $body-size !default
$block-definition-font-size-md: $body-size-md !default
// Block pages
-$block-pages-card-background: color-contrast($main-background-color, 10%) !default
-$block-pages-card-page-background: invert($main-color) !default
-$block-pages-card-page-color: $main-color !default
-$block-pages-card-page-background-hover: color-contrast($main-background-color, 100%) !default
-$block-pages-card-page-color-hover: invert($main-color) !default
+$block-pages-card-background: color-contrast($color-background, 10%) !default
+$block-pages-card-page-background: invert($color-text) !default
+$block-pages-card-page-color: $color-text !default
+$block-pages-card-page-background-hover: color-contrast($color-background, 100%) !default
+$block-pages-card-page-color-hover: invert($color-text) !default
// Block timeline
$block-timeline-horizontal-background: black !default
@@ -267,8 +263,8 @@ $block-testimonials-xl-font-size-long-text: $quote-size-long !default
$block-testimonials-xl-line-height-long-text: $quote-line-height !default
$block-testimonials-font-size: $quote-size-md !default
$block-testimonials-line-height: $quote-line-height !default
-$block-testimonials-pagination-background: $main-border-color !default
-$block-testimonials-pagination-progress-background: $main-color !default
+$block-testimonials-pagination-background: $color-border !default
+$block-testimonials-pagination-progress-background: $color-text !default
// Block key_figures
$block-key_figures-font-size: px2rem(16) !default
@@ -287,20 +283,20 @@ $block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
$block-key_figures-number-font-size-xxl: px2rem(80) !default
// Block gallery
-$block-gallery-carousel-background: $main-light-color
+$block-gallery-carousel-background: $color-background-alt
// Sections
$article-title-size: $h4-size !default
$article-title-size-md: $h4-size-md !default
-$article-media-background: color-contrast($main-background-color, 3%) !default
+$article-media-background: color-contrast($color-background, 3%) !default
$article-media-aspect-ratio: 2 !default
$post-media-background: $article-media-background !default
-$post-categories-color: color-contrast($main-color, 20%) !default
-$post-time-color: color-contrast($main-color, 20%) !default
+$post-categories-color: color-contrast($color-text, 20%) !default
+$post-time-color: color-contrast($color-text, 20%) !default
// Person
-$persons-avatar-background-color: $main-light-color !default
+$persons-avatar-background-color: $color-background-alt !default
// Program
$program-essential-font-size: $h5-size !default
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 46479c11..d5b39ccf 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -16,6 +16,15 @@
main > .blocks &,
body.full-width &,
@content
+@mixin in-page-with-sidebar
+ body:not(.full-width) &
+ @content
+
+@mixin in-page-with-or-without-sidebar
+ body:not(.full-width) &,
+ main > .blocks &,
+ body.full-width &,
+ @content
// Aliases
@mixin full-page
@@ -35,7 +44,7 @@
text-decoration-color: rgba($color, 0.3)
text-decoration-line: underline
text-decoration-thickness: 1px
- text-underline-offset: 3px
+ text-underline-offset: 6px
transition: text-decoration-color .3s ease
&:hover
text-decoration-color: rgba($color, 1)
@@ -191,7 +200,7 @@
user-select: none
&:active,
&:focus
- box-shadow: 0 0 0 0.25rem rgba($main-color, 0.25)
+ box-shadow: 0 0 0 0.25rem rgba($color-text, 0.25)
// TODO : vérifier si l'outline 0 est vraiment nécessaire
// outline: 0
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index 6eb5c1c4..438e9546 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -1,101 +1,115 @@
.block-call_to_action
+ @include in-page-with-or-without-sidebar
+ h2, h3
+ @extend .h5
+ margin-bottom: $spacing0
.call_to_action
color: $block-call-to-action-color
- p:last-of-type
- margin-bottom: 0
-
- > div
+ .description
+ p
+ @extend .h2
+ .actions
[role="group"]
@include media-breakpoint-down(md)
display: flex
flex-direction: column
- // button
- div + div,
- & >
+ a
+ @extend .meta
+ color: $block-call-to-action-color
+ margin-right: $spacing2
+ margin-top: $spacing1
+ text-decoration-color: rgba($block-call-to-action-color, .3)
+ display: inline-block
+ &:hover
+ text-decoration-color: $block-call-to-action-color
+ &:first-child
+ @extend .btn
+ background: $block-call-to-action-button-background
+ color: $block-call-to-action-button-color
+ &:last-child
+ margin-bottom: 0
+ * + .actions
+ margin-top: calc(#{$spacing2} - #{$spacing1})
+
+ @include media-breakpoint-down(md)
+ background-color: $block-call-to-action-background
+ .call_to_action
+ padding: $spacing3 0
+ .actions
a
- margin-top: 1rem
- color: $block-call-to-action-color
- text-decoration-color: rgba($block-call-to-action-color, .3)
- &:hover
- text-decoration-color: $block-call-to-action-color
- &:first-of-type
- @extend .btn
- background: $block-call-to-action-button-background
- color: $block-call-to-action-button-color
- @include in-page-with-sidebar
+ margin-right: $spacing1
+ &:last-child
+ margin-bottom: 0
+ .call_to_action--with-image
+ padding-top: calc(#{$grid-gutter-sm} / 2)
display: flex
flex-direction: column
> *
order: 2
picture
+ margin-bottom: offset(1)
order: 1
- padding-left: $grid-gutter
- position: relative
- img
- margin-bottom: -50px
- > div
- background-color: $block-call-to-action-background
- padding: $grid-gutter
- width: 100%
- &--with-image
- > div
- padding-top: calc(#{$grid-gutter} + 50px)
-
- @include media-breakpoint-up(md)
- picture
- padding-left: offset(1, 8)
- padding-right: offset(3, 8)
- @include media-breakpoint-up(xxl)
- padding-left: offset(1, 7)
- padding-right: offset(3, 7)
- > div
- padding: offset(1, 8)
- @include media-breakpoint-up(xxl)
- padding: offset(1, 7)
-
- [role="group"]
- a
- margin-right: px2rem(20)
- @include in-page-without-sidebar
- .block-content
- background-color: $block-call-to-action-background
- padding: offset(1)
- .call_to_action--with-image
- @include media-breakpoint-down(md)
+ @include media-breakpoint-up(md)
+ @include in-page-with-sidebar
+ .call_to_action
display: flex
flex-direction: column
+ margin-left: -$grid-gutter
+ margin-right: -$grid-gutter
> *
order: 2
- picture
- margin-bottom: offset(1)
- order: 1
- @include media-breakpoint-up(md)
- @include grid(2, md)
- align-items: center
> div
- > *
- margin-right: offset(1, 5) // ???
- div + div
- a
- margin-right: 1rem
- .call_to_action--without-image
- @include media-breakpoint-up(md)
+ background-color: $block-call-to-action-background
+ padding: $grid-gutter
+ width: 100%
+ &--with-image
+ picture
+ order: 1
+ padding-left: $grid-gutter
+ padding-right: $grid-gutter
+ position: relative
+ img
+ margin-bottom: calc(-#{$grid-gutter} + -#{$spacing1})
+ > div
+ padding-top: calc(#{$grid-gutter} + #{$spacing3})
+
+ @include in-page-without-sidebar
+ .block-content
+ background-color: $block-call-to-action-background
+ padding: $spacing4 $grid-gutter
+ margin-left: -$grid-gutter
+ margin-right: -$grid-gutter
+ .call_to_action--with-image
+ align-items: start
+ display: grid
+ grid-template-columns: repeat(12,1fr)
+ > div
+ grid-column: 1/7
+ > picture
+ grid-column: 8/13
+ .call_to_action--without-image
display: block
> div
column-gap: $grid-gutter
display: grid
- grid-template-columns: repeat(10,1fr)
- > *
- grid-column: 1/5
- div + div,
- & > a
- grid-column: 6/11
- div + div
+ grid-template-columns: repeat(12,1fr)
+ h2, h3, .description
+ grid-column: 1/9
+ .actions
align-items: flex-start
display: flex
flex-direction: column
- div + div,
- & >
- a:first-of-type
- margin-top: 0
+ grid-column: 10/13
+ margin-top: 0
+ a
+ margin-right: 0
+ a + a
+ margin-top: $spacing0
+ @include media-breakpoint-down(lg)
+ > div
+ h2, h3, .description
+ grid-column: 1/8
+ .actions
+ grid-column: 9/13
+
diff --git a/assets/sass/_theme/blocks/contact.sass b/assets/sass/_theme/blocks/contact.sass
index 0c012932..ae429326 100644
--- a/assets/sass/_theme/blocks/contact.sass
+++ b/assets/sass/_theme/blocks/contact.sass
@@ -10,7 +10,7 @@
ul
@include list-reset
li
- border-bottom: 1px solid $main-border-color
+ border-bottom: 1px solid $color-border
display: flex
flex-wrap: wrap
padding-bottom: calc(#{$line-height-base/2}rem + 1px)
diff --git a/assets/sass/_theme/blocks/definitions.sass b/assets/sass/_theme/blocks/definitions.sass
index cd51ed01..269f27a5 100644
--- a/assets/sass/_theme/blocks/definitions.sass
+++ b/assets/sass/_theme/blocks/definitions.sass
@@ -2,7 +2,7 @@
details
&:not([open]):hover
&::after
- border-bottom-color: $block-block-definition-border-color-hovered
+ border-bottom-color: $block-definition-border-color-hovered
summary,
p
font-size: $block-definition-font-size
diff --git a/assets/sass/_theme/blocks/files.sass b/assets/sass/_theme/blocks/files.sass
index d8420298..58c672ea 100644
--- a/assets/sass/_theme/blocks/files.sass
+++ b/assets/sass/_theme/blocks/files.sass
@@ -13,7 +13,7 @@
text-decoration: none
&::before
align-items: center
- border: 1px solid $main-border-color
+ border: 1px solid $color-border
display: flex
flex-shrink: 0
font-size: px2rem(18)
@@ -26,7 +26,7 @@
content: none !important // Remove default icon _blank
&:hover
&::before
- background-color: $main-border-color
+ background-color: $color-border
border-color: transparent
span span
@extend .small
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index 5bc746d8..e8e56acc 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -3,7 +3,7 @@
padding-left: calc(#{$grid-gutter} / 2)
position: relative
&::before
- background: $main-color
+ background: $color-text
bottom: 0
content: ""
left: 4px
@@ -14,7 +14,7 @@
&:not(:last-child)
margin-bottom: $grid-gutter
&::before
- background: $main-color
+ background: $color-text
border-radius: 50%
content: ""
height: 9px
diff --git a/assets/sass/_theme/design-system/pagination.sass b/assets/sass/_theme/design-system/pagination.sass
index fc92bcff..946da4fb 100644
--- a/assets/sass/_theme/design-system/pagination.sass
+++ b/assets/sass/_theme/design-system/pagination.sass
@@ -113,7 +113,7 @@
content: none
li.previous
- border-bottom: 1px solid $main-border-color
+ border-bottom: 1px solid $color-border
a
@include icon(arrow-left)
li.next
diff --git a/assets/sass/_theme/design-system/table.sass b/assets/sass/_theme/design-system/table.sass
index 421c7349..ed95bf62 100644
--- a/assets/sass/_theme/design-system/table.sass
+++ b/assets/sass/_theme/design-system/table.sass
@@ -28,13 +28,13 @@ table
font-size: $table-body-size-md
th,
td
- border-bottom: 1px solid $main-border-color
+ border-bottom: 1px solid $color-border
+ th, + td
padding-left: $spacing1
tr:first-child
th,
td
- border-top: 1px solid $main-border-color
+ border-top: 1px solid $color-border
.table-responsive
overflow-x: auto
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/table_of_content.sass b/assets/sass/_theme/design-system/table_of_content.sass
index c0f32729..e6a946fb 100644
--- a/assets/sass/_theme/design-system/table_of_content.sass
+++ b/assets/sass/_theme/design-system/table_of_content.sass
@@ -18,7 +18,7 @@
flex-direction: column
height: 100%
.toc-title
- border-bottom: 1px solid $main-border-color
+ border-bottom: 1px solid $color-border
font-size: $toc-title-font-size
padding: $header-nav-padding-y
@include media-breakpoint-up(md)
@@ -45,7 +45,7 @@
justify-content: space-between
align-items: center
padding: $header-nav-padding-y $spacing1
- border-top: 1px solid $main-border-color
+ border-top: 1px solid $color-border
line-height: inherit
@include icon(close, after)
@include media-breakpoint-up(md)
@@ -76,7 +76,7 @@
@include in-page-with-sidebar
display: none
@include media-breakpoint-down(md)
- border-top: 1px solid $main-border-color
+ border-top: 1px solid $color-border
position: fixed
bottom: 0
background: white
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 8778947d..fa65178f 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -1,6 +1,7 @@
%heading
font-family: $heading-font-family
margin-top: 0
+ margin-bottom: 0
h1, .h1
@extend %heading
@@ -145,6 +146,10 @@ a,
padding: $btn-padding-y $btn-padding-x
text-decoration: none
display: inline-block
+ border-radius: $btn-border-radius
+ @include media-breakpoint-up(md)
+ font-size: $btn-font-size-md
+ padding: $btn-padding-y-md $btn-padding-x-md
.link-more
@include link
@@ -158,8 +163,8 @@ dd
margin-left: 0
::selection
- background: rgba($main-color, .7)
- color: $main-background-color
+ background: rgba($color-text, .7)
+ color: $color-background
text-shadow: none
*:focus-visible
diff --git a/assets/sass/_theme/design-system/vendors/glightbox.sass b/assets/sass/_theme/design-system/vendors/glightbox.sass
index 491a1472..255e9d22 100644
--- a/assets/sass/_theme/design-system/vendors/glightbox.sass
+++ b/assets/sass/_theme/design-system/vendors/glightbox.sass
@@ -6,7 +6,7 @@
background-color: transparent
&-title,
&-desc
- color: $main-background-color
+ color: $color-background
.gnext,
.gprev
color: white
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index 0398be1f..3ce5a8f9 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -42,7 +42,7 @@ ul.diplomas
padding: $spacing0
white-space: normal
&:not(:first-child)
- border-top: 1px solid $main-border-color
+ border-top: 1px solid $color-border
@include media-breakpoint-up(md)
font-size: px2rem(22)
&:hover
diff --git a/assets/sass/_theme/sections/persons.sass b/assets/sass/_theme/sections/persons.sass
index e01e6c05..de24a06e 100644
--- a/assets/sass/_theme/sections/persons.sass
+++ b/assets/sass/_theme/sections/persons.sass
@@ -43,7 +43,7 @@ div.persons
ol.persons
@include list-reset
> li
- border-bottom: 1px solid $main-border-color
+ border-bottom: 1px solid $color-border
padding-bottom: $spacing1
padding-top: $spacing1
position: relative
diff --git a/assets/sass/_theme/sections/posts.sass b/assets/sass/_theme/sections/posts.sass
index 74a960d9..015e2df2 100644
--- a/assets/sass/_theme/sections/posts.sass
+++ b/assets/sass/_theme/sections/posts.sass
@@ -22,7 +22,7 @@
@include grid(1)
grid-gap: 0
> div
- border-bottom: 1px solid $main-border-color
+ border-bottom: 1px solid $color-border
margin-bottom: $spacing3
padding-bottom: $spacing3
.post
@@ -88,7 +88,7 @@
content: none
.post-infos
- border-top: 1px solid $main-border-color
+ border-top: 1px solid $color-border
margin-bottom: 0
&, li
@extend .small
@@ -98,12 +98,12 @@
@include visually-hidden
position: relative !important // Fix safari iOS border issue
th
- color: color-contrast($main-color, 25%)
+ color: color-contrast($color-text, 25%)
font-weight: 400
padding-left: 0
white-space: nowrap
tr
- border-color: $main-border-color
+ border-color: $color-border
td:last-of-type
padding-right: 0
text-align: right
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index 95cc5e38..fec17185 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -9,7 +9,7 @@ section.programs
ol.programs
@include list-reset
> li
- border-bottom: 1px solid $main-border-color
+ border-bottom: 1px solid $color-border
padding-bottom: $spacing1
padding-top: $spacing1
> .title
@@ -47,8 +47,8 @@ ol.programs
&:hover,
&:active,
&:focus
- background: $main-background-color
- color: $main-color
+ background: $color-background
+ color: $color-text
// a11y
&:active,
&:focus
@@ -107,7 +107,7 @@ ol.programs
.document-content
.content
@include grid(12, md)
- border-top: 1px solid $main-color
+ border-top: 1px solid $color-text
position: relative
> *
grid-column: 6/13
diff --git a/layouts/partials/blocks/templates/call_to_action.html b/layouts/partials/blocks/templates/call_to_action.html
index 9dfe74b7..fcd70e26 100644
--- a/layouts/partials/blocks/templates/call_to_action.html
+++ b/layouts/partials/blocks/templates/call_to_action.html
@@ -13,13 +13,13 @@
"context" $context
) }}
{{- if (partial "GetTextFromHTML" .text) }}
- <div>
+ <div class="description">
{{ partial "PrepareHTML" .text }}
</div>
{{ end -}}
{{- if .buttons }}
- <div {{ if gt (len .buttons) 1 }}role="group"{{ end -}}>
+ <div class="actions" {{ if gt (len .buttons) 1 }}role="group"{{ end -}}>
{{- range .buttons -}}
{{ if .title }}
{{- $title := partial "PrepareHTML" .title -}}
@@ -30,7 +30,8 @@
{{ else }}
title="{{ $title }}"
{{ end }}
- >{{ $title }}</a>
+ >{{- $title -}}
+ </a>
{{ end -}}
{{- end -}}
</div>
--
GitLab