Web Docs

Tiles 

<li class="tile">
    <div class="image">
        <img src="../raw/tile/madrian_1215.jpg" alt="Portrait of Brigitte C. Madrian, ninth dean of the BYU Marriott School of Business">
    </div>
    <div class="text">
        <h2>
            <a class="tile-link" href="https://news.byu.edu/news/top-10-byu-news-stories-2018">Top 10 BYU News stories of 2018</a>
        </h2>
        <h3 class="meta">Dec 20, 2018</h3>
        <p>The most-read BYU News of the year include Star Wars-inspired research, advice for parents, a new chocolate milk flavor and the DNA of a 7’6” basketball player.</p>
    </div>
</li>
 
<li class="tile">  
    {{#with image }}<div class="image">
        <img src="{{ path url }}" alt="{{ alt }}">
    </div>{{/with}}
    <div class="text">
        <h2>
            <a class="tile-link" href="{{ url }}">{{ title }}</a>
        </h2>
        <h3 class="meta">{{ meta }}</h3>
        <p>{{ text }}</p>
    </div>
</li>
  • Content: 
    %generated
	content: " "
	display: block
	position: absolute
	left: 0
	width: 100%


.tile
	@extend %card
	margin: 1rem
	// max-width: 20rem
	position: relative
	overflow: hidden
	transition: border 250ms ease, box-shadow 250ms ease

	&:before
		@extend %generated
		height: 1em
		background: #fff
		bottom: 0
		box-shadow: 0 0 2em 1em #fff
		z-index: 1

	.image
		width: 100%
		height: 0
		padding-bottom: 56.25%
		overflow: hidden
		position: relative

		&:after
			@extend %generated
			bottom: 0
			height: 3.5em
			background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%,)
			opacity: 0.2
			transition: opacity 250ms ease

	img
		position: absolute
		top: 0
		left: 0
		display: block
		border-radius: 2px 2px 0 0
		max-width: auto
		width: 100%
		@supports (object-fit: cover)
			object-fit: cover
			height: 100%

	.text
		padding: 1.25em
		position: static
		transition: color 200ms ease

	h2
		margin: 0 0 $spacing2
		font-size: $fontSize20
		color: $textcolor
		position: static
		font-weight: bold

	.meta
		font-size: $fontSize15
		color: $royal
		transition: inherit
		margin: 0 0 $spacing2

	a
		text-decoration: none
		position: static
		&, &:link
			color: inherit
		&:hover, &:focus
			text-decoration: none

	p 
		color: $textgrey
		font-size: $fontSize15
		margin-bottom: 0
		line-height: 1.4
		transition: inherit

	.tile-link:after
		@extend %generated
		top: 0
		right: 0
		bottom: 0
		box-shadow: 0 4px 12px 2px rgba(0,0,0,.17)
		transition: opacity 200ms ease
		opacity: 0
		z-index: 1

	&:hover, &:focus
		border-color: mix( $royal, $grey10, 25% )
		box-shadow: 0 4px 12px 2px rgba(0,0,0,.17)
		.image:after
			opacity: 1
		.tile-link:after
			opacity: 1
		.meta
			color: mix( $royal, $textcolor )
		p
			color: mix( $textgrey, $textcolor )
  • URL: /components/raw/tile/tile.sass
  • Filesystem Path: src/components/0-foundation/tile/tile.sass
  • Size: 1.8 KB 
{
  "image": {
    "url": "/components/raw/tile/madrian_1215.jpg",
    "alt": "Portrait of Brigitte C. Madrian, ninth dean of the BYU Marriott School of Business"
  },
  "title": "Top 10 BYU News stories of 2018",
  "url": "https://news.byu.edu/news/top-10-byu-news-stories-2018",
  "meta": "Dec 20, 2018",
  "text": "The most-read BYU News of the year include Star Wars-inspired research, advice for parents, a new chocolate milk flavor and the DNA of a 7’6” basketball player."
}