Created
December 26, 2020 12:44
-
-
Save bsakhanov/2a5a741e31f45ae0a70aadce00b2e185 to your computer and use it in GitHub Desktop.
Uikit 3 news card section
This file contains hidden or 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
| <div class="uk-section"> | |
| <div class="uk-container"> | |
| <div class="uk-grid uk-grid-medium" uk-height-match="target: > div > .uk-card; row: false" uk-grid> | |
| <div class="uk-width-1-2@m"> | |
| <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin featured uk-background-cover" uk-grid> | |
| <div class="uk-card-media-left uk-cover-container"> | |
| <img src="https://getuikit.com/docs/images/light.jpg" alt="" hidden uk-cover> | |
| <canvas width="600" height="400"></canvas> | |
| </div> | |
| <div> | |
| <div class="uk-card-body featured-text"> | |
| <h4>Media Left</h4> | |
| <p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="uk-width-1-4@m"> | |
| <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards"> | |
| <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;"> | |
| <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p> | |
| </div></div> | |
| </div> | |
| <div class="uk-width-1-4@m"> | |
| <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards"> | |
| <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;"> | |
| <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p> | |
| </div></div> | |
| </div> | |
| <div class="uk-width-1-4@m"> | |
| <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards"> | |
| <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;"> | |
| <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p> | |
| </div></div> | |
| </div> | |
| <div class="uk-width-1-4@m"> | |
| <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards"> | |
| <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;"> | |
| <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p> | |
| </div></div> | |
| </div> | |
| <div class="uk-width-1-4@m"> | |
| <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards"> | |
| <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;"> | |
| <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p> | |
| </div></div> | |
| </div> | |
| <div class="uk-width-1-4@m"> | |
| <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards"> | |
| <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;"> | |
| <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p> | |
| </div></div> | |
| </div> | |
| </div> |
This file contains hidden or 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
| <script src="https://getuikit.com/assets/uikit/dist/js/uikit.js?nc=743"></script> | |
| <script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.js?nc=743"></script> |
This file contains hidden or 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
| .featured{ | |
| background-image: url("https://picsum.photos/620/350/?image=690"); | |
| } | |
| .news-cards{ | |
| background-image: url("https://source.unsplash.com/random"); | |
| padding-left:30px; | |
| } | |
| .featured-text{ | |
| background-color: #ffffffc2; | |
| } | |
| .news-text-bck { | |
| background-color: #000000c7; | |
| transition: all 0.15s ease-out; | |
| } | |
| .news-text-bck:hover { | |
| /* white-space: normal; */ | |
| transition: all 0.15s ease-out; | |
| background-color: rgba(0, 0, 0, 0.78); | |
| } | |
| @mixin multiLineEllipsis($lineHeight: 1.4em, $lineCount: 1, $bgColor: white) { | |
| overflow: hidden; | |
| position: relative; | |
| line-height: $lineHeight; | |
| max-height: $lineHeight * $lineCount; | |
| margin-right: 1em; | |
| padding-right: 1em; | |
| padding-left: 1em; | |
| padding-top: 1em; | |
| transition: all 0.35s ease-out; | |
| &:before { | |
| font-family: 'fontawesome'; | |
| content: '\f107'; | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| &:after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| /* width: 1em; | |
| height: 1em; */ | |
| margin-top: 0.2em; | |
| background: $bgColor; | |
| } | |
| } | |
| .subtitle-text-block { | |
| @include multiLineEllipsis( | |
| $lineHeight: 1.4em, | |
| $lineCount: 0, | |
| $bgColor: white | |
| ); | |
| } | |
| .card-hover:hover .subtitle-text-block { | |
| transition: all 0.35s ease-out; | |
| max-height: 9em; | |
| } | |
| .card-hover:hover .subtitle-text-block:before { | |
| content: ''; | |
| transition: all 0.35s ease-out; | |
| } |
This file contains hidden or 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
| <link href="https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=743" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment