"Test"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section data-m-id="2227653" data-m-name="key_information_box" data-m-type="freetext" class="module m-freetext m-key-information-box legacy " data-is-legacy="1"> <div class="header module-row"> <div class="show-logo-image"> <a href="/shows/greys-anatomy" class="back-arrow"> <i class="fa fa-chevron-left fa-2x"></i></a> <a href="/shows/greys-anatomy"> <img class=" lazyloaded" data-src="https://cdn1.edgedatg.com/aws/v2/abc/GreysAnatomy/showimages/1123332428aa36966d0d5dcdf5239baf/350x117-Q80_1123332428aa36966d0d5dcdf5239baf.png" src="https://cdn1.edgedatg.com/aws/v2/abc/GreysAnatomy/showimages/1123332428aa36966d0d5dcdf5239baf/350x117-Q80_1123332428aa36966d0d5dcdf5239baf.png" data-fallback-text="" alt="Grey's Anatomy"> </a></div> <div class="buttons m-favoritelistbutton state-not-in-list" data-show-id="SH559058"> <button class="button list-action remove-from-my-list"> <i class="icon abc-icon-check"></i><span>My List</span></button> <button class="button list-action add-to-list"> <i class="fa fa-plus fa-2x"></i><span>MY LIST</span></button> <a href="/shows/greys-anatomy/about-the-show" class="about-the-show button " data-m-name="key_information_box"> <i class="fa fa-info fa-2x"></i><span>ABOUT</span></a></div></div></section> <div class="columns with-right-button"> <h2 class="module-title text2 " data-qa="module.tilegroup.title">season 15</h2> <span class="see-all right-button" data-qa="module.tilegroup.see-all"> <a href="/shows/greys-anatomy/episode-guide/season-15">See All</a></span></div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .m-key-information-box.non-home, .m-key-information-box.legacy {background-color: rgb(21, 44, 73);} .m-key-information-box.legacy {position:relative;padding: 0 .4375rem;} .m-key-information-box.legacy {position:fixed;top: 0;width: 100%;max-width: 100%;z-index: 10;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);} .m-key-information-box {background:none;margin:0 auto;} .m-key-information-box.legacy::before {content: '';width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;z-index: -1;} .m-key-information-box:not(.sticky).legacy .header {box-shadow: none;} .m-key-information-box.legacy .header {max-width: 62.5rem;padding-left: 0;padding-right: 0;} .m-key-information-box.legacy .header {flex-direction: row;background: none;height: 4.5rem;margin: 0 auto;} .m-key-information-box .header {position: relative;display: flex;color: #fff;} .m-key-information-box.legacy .header .show-logo-image {display: flex;flex: 1;} .m-key-information-box .header .show-logo-image {align-items: center;justify-content: start;} .m-key-information-box.legacy .header .show-logo-image a.back-arrow{min-width: inherit;} .m-key-information-box a.back-arrow{display: inline-block;font-size: 1.5rem;padding-right: .625rem;} .m-key-information-box a.back-arrow i{cursor: pointer;} .m-key-information-box.legacy .header .show-logo-image a {min-width: 10rem;} .m-key-information-box .header .show-logo-image img {max-height: 2.875rem;} .m-key-information-box.legacy .header .buttons {display: flex;padding-top: 0;} .m-key-information-box .header .buttons {justify-content: center;align-items: center;font-size: .5625rem;font-weight: 200;letter-spacing: .0375rem;} .m-key-information-box .header .buttons.state-not-in-list .remove-from-my-list {display: none;visibility: hidden;} .m-key-information-box .header .buttons .button {flex-direction: column;align-items: center;background: none;color: #fff;font-size: .5625rem;padding: 0;width: auto !important;min-width: auto;border-radius: 0;height: 100%;justify-content: center;} .m-favoritelistbutton button.list-action {line-height: 2.1875rem;border: none;} button.button{min-height:2.75rem;text-transform:uppercase;font-weight:300;transition: background 400ms ease-in 0s,border 200ms ease-in 0s,color 200ms ease-in 0s;} .m-key-information-box.legacy .header .buttons .button > span {display: none;} .m-key-information-box .header .buttons .button span {height: 1rem;margin-top: .3125rem;line-height: 1rem;font-weight: 300;} .m-key-information-box .header .buttons .button span {font-size: .5625rem;justify-content: center;align-items: center;padding: .625rem;} .m-key-information-box .header .buttons .button .fa {width: 2.5rem;height: 2.5rem;display: flex;align-items: center;justify-content: center;font-size: 1rem;border-radius: 50%;transition: background-color .3s;} .m-favoritelistbutton .button .fa {background-color: rgb(72, 103, 147);} .m-key-information-box .header .buttons.state-not-in-list .add-to-list {display: flex;visibility: visible;} .m-key-information-box.legacy .header .buttons .button:last-child {margin: 0 0 0 .5rem;} /* MODULE TITLE */ .with-right-button .module-title {float: left;} .module-title {font-size:1.25rem;letter-spacing:5px;font-weight:200px;white-space:normal;margin-top:1.25rem;margin-bottom:.9375rem;text-transform:uppercase;} .text2 {display:block;text-rendering:optimizeLegibility;line-height: 1.4;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased;} .with-right-button .right-button {float: right;margin-top: 1.25rem;} .with-right-button .right-button a {font-size: 1rem;font-weight: 200;text-transform: capitalize;letter-spacing: 1px;}

Related: See More


Questions / Comments: