Skip to content

Instantly share code, notes, and snippets.

@cpilsworth
Last active May 11, 2023 15:47
Show Gist options
  • Save cpilsworth/bea26b99e4e1e03739166fdf8071c174 to your computer and use it in GitHub Desktop.
Save cpilsworth/bea26b99e4e1e03739166fdf8071c174 to your computer and use it in GitHub Desktop.
DLG teaser
.cmp-teaser {
}
.cmp-teaser__image {
}
.cmp-teaser__content {
}
.cmp-teaser__pretitle {
}
.cmp-teaser__title {
}
.cmp-teaser__title-link {
}
.cmp-teaser__description {
}
.cmp-teaser__action-container {
}
.cmp-teaser__action-link {
}
@import url('https://use.typekit.net/iej2ape.css');
.hero .cmp-teaser {
position: relative;
color: #fff;
max-width: 1120px;
margin-bottom: 36px;
font-family: 'montserrat', sans-serif;
font-weight: 400;
font-style: normal;
}
.hero .cmp-teaser > .cmp-teaser__image {
position: absolute;
top: 0;
left: 0;
width: auto;
object-fit: cover;
z-index: 0;
}
.hero * .cmp-image__image {
height: 100%;
min-width: 1280px;
}
.hero .cmp-teaser .cmp-teaser__image .cmp-image {
height: 100%;
width: 1280px;
object-fit: cover;
overflow: hidden;
}
.hero .cmp-teaser__content {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
background-image: linear-gradient(to bottom, #e70c2c 0%, #ad0921 60%);
padding: 16px 32px 16px 32px;
min-height: 348px;
max-width: 638px;
margin: auto auto auto 112px;
bottom: -45px;
z-index: 1;
}
.hero .cmp-teaser__content:last-child {
justify-content: flex-end;
}
.hero .cmp-teaser__content .cmp-teaser__pretitle {
position: absolute;
display: inline-block;
background-color: #000;
text-transform: uppercase;
color: #fff;
line-height: 40px;
padding: 0 16px;
top: -36px;
left: 0;
}
.hero .cmp-teaser__content .cmp-teaser__title {
position: relative;
font-size: 30px;
line-height: 36px;
}
.cmp-teaser__title-link {
}
.cmp-teaser__description {
}
.hero .cmp-teaser__content .cmp-teaser__description p i {
font-size: 14px;
}
.hero * .cmp-teaser__action-container {
color: white;
display: flex;
gap: 16px;
margin-top: auto;
bottom: 0%;
}
.hero * .cmp-teaser__action-link {
text-decoration: none;
background-color: transparent;
border: 2px solid #fff;
color: #fff;
line-height: 40px;
border-radius: 4px;
min-height: 40px;
vertical-align: baseline;
font-size: 18px;
padding: 0 11px 0 11px;
}
.hero * .cmp-teaser__action-link:hover {
text-decoration: none;
background-color: #fff;
border: 2px solid #fff;
color: #222;
}
.hero * .cmp-teaser__action-link:first-child {
background-color: #bfe401;
border-color: #bfe401;
color: #222;
}
.hero * .cmp-teaser__action-link:first-child:hover {
background-color: #b1d300;
}
@media screen and (max-width: 768px) {
.hero .cmp-teaser > .cmp-teaser__image {
display: none;
}
.hero .cmp-teaser__content {
position: static;
width: 100%;
height: 100%;
margin: 50px auto;
top: revert;
z-index: auto;
}
.hero .cmp-teaser__content > * {
position: static;
top: unset;
}
.hero .cmp-teaser__content .cmp-teaser__pretitle {
display: inline-block;
padding: 0 16px;
position: relative;
top: unset;
left: -32px;
}
}
@cpilsworth
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment