This repository has been archived by the owner on Feb 8, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add new loyalty event banner (#1033)
* Add new loyalty event banner * Add aria-hidden and update snapshot
- Loading branch information
1 parent
7f6e03b
commit b02169a
Showing
6 changed files
with
168 additions
and
30 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
|
|
||
| import styles from './style.css'; | ||
| import titleImg from './images/title.png'; | ||
| import loyaltyImage from './images/loyalty-image.png'; | ||
|
|
||
| const Slice = () => { | ||
| return ( | ||
| <div className={`${styles.SliceWrapper}`}> | ||
| <div> | ||
| <div className={styles.Slice}> | ||
| <div className={styles.SliceText}> | ||
| <img | ||
| className={styles.SliceTitleImage} | ||
| src={titleImg} | ||
| alt="text reading: Badger Sessions" | ||
| /> | ||
|
|
||
| <div className={styles.SliceTextContent}> | ||
| <div className={styles.SliceBodyheader}> | ||
| <h3>Is the future of digital loyalty point-less?</h3> | ||
| </div> | ||
| <div className={styles.SliceBodySubHeader}> | ||
| <h4> | ||
| Join us on Wednesday 6th July at 4pm for a virtual panel discussion to find out | ||
| how and why loyalty is evolving | ||
| </h4> | ||
| </div> | ||
| <div> | ||
| <a href="https://bit.ly/3GbWdcw" className={styles.SliceLink}> | ||
| Register now | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={styles.SliceImageWrapper}> | ||
| <img className={styles.SliceImage} src={loyaltyImage} aria-hidden="true" alt="" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Slice; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| @value badgerBlack, badgerWhite, scorpian, badgerRed, midBlue, brightBlue from '../../css/_colors.css'; | ||
| @value mediumScreen, largeScreen from "../../css/_sizes.css"; | ||
|
|
||
| .SliceWrapper { | ||
| composes: dividerMidBlue from '../../css/_divider.css'; | ||
| width: 100%; | ||
| background-color: #fc1d43; | ||
| color: badgerWhite; | ||
| } | ||
|
|
||
| .Slice { | ||
| composes: sansSerif from '../../css/typography/_fonts.css'; | ||
| position: relative; | ||
| max-width: 1440px; | ||
| width: 100%; | ||
| margin: 0 auto; | ||
| padding: 24px 24px 60px; | ||
| line-height: 1.5em; | ||
| } | ||
|
|
||
| .SliceTitleImage { | ||
| display: block; | ||
| width: 100%; | ||
| max-width: 250px; | ||
| } | ||
|
|
||
| .SliceTextContent { | ||
| padding-left: 8px; | ||
| } | ||
|
|
||
| .SliceBodyheader { | ||
| composes: boldSansSerif from '../../css/typography/_fonts.css'; | ||
| display: flex; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .SliceBodyheader h3 { | ||
| font-family: 'Sentinel A', 'Sentinel B', serif; | ||
| font-size: 42px; | ||
| line-height: 46px; | ||
| margin-right: 14px; | ||
| } | ||
|
|
||
| .SliceBodySubHeader { | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| .SliceLink { | ||
| composes: boldSansSerif from '../../css/typography/_fonts.css'; | ||
| cursor: pointer; | ||
| font-size: 18px; | ||
| background: badgerBlack; | ||
| color: badgerWhite; | ||
| display: inline-block; | ||
| text-align: center; | ||
| padding: 12px 18px; | ||
| } | ||
|
|
||
| .SliceLink:hover { | ||
| background: scorpian; | ||
| } | ||
|
|
||
| .SliceImageWrapper { | ||
| display: none; | ||
| max-width: 350px; | ||
| } | ||
|
|
||
| .SliceImage { | ||
| max-width: 350px; | ||
| max-height: 318px; | ||
| width: auto; | ||
| height: auto; | ||
| } | ||
|
|
||
| @media mediumScreen { | ||
| .Slice { | ||
| display: flex; | ||
| flex-direction: row; | ||
| padding: 40px 60px; | ||
| } | ||
|
|
||
| .SliceText { | ||
| width: 100%; | ||
| min-width: 420px; | ||
| } | ||
| } | ||
|
|
||
| @media largeScreen { | ||
| .SliceTitleImage { | ||
| margin-top: 14px; | ||
| margin-bottom: 12px; | ||
| display: block; | ||
| width: 320px; | ||
| } | ||
|
|
||
| .SliceImageWrapper { | ||
| display: flex; | ||
| flex-grow: 1; | ||
| justify-content: center; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters