Created
January 19, 2019 14:46
-
-
Save bsakhanov/be1fcfa3f3745d392ada43fe70e80a5e 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