Web Docs

Tile Groups 

<!-- Default -->
<ul class="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">
        <div class="image">
            <img src="../raw/tile_group/1901-08_002.jpg" alt="Child in superhero costume in grocery store">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11884">Good vs. Evil: How heroes and villains affect the food you buy</a>
            </h2>
            <h3 class="meta">Jan 10, 2019</h3>
            <p>Research led by professor Tamara Masters finds people are willing to pay more for vice foods — think ice cream, cookies, and other unhealthy snacks — when a hero is used in the packaging.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/president_worthen_375.jpg" alt="BYU Devotional Speaker President Kevin J Worthen">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11883">BYU Devotional: Find your spiritual gifts, Know who you are</a>
            </h2>
            <h3 class="meta">Jan 8, 2019</h3>
            <p>President Kevin J Worthen and Sister Peggy S. Worthen welcomed students back to campus with the first devotional of the semester. They spoke about spiritual gifts and eternal identities.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/autism2.jpg" alt="Researchers help child at MRI machine">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/news/way-cool-way-be-byu-team-gains-insights-understudied-group-children-autism">‘A way cool way to be’: BYU team gains insights into understudied group of children with autism</a>
            </h2>
            <h3 class="meta">Jan 2, 2019</h3>
            <p>In the first study of its kind, a team of researchers was able to perform functional MRIs of a group of children with autism whose IQs averaged 54. The scans offer a glimpse into what’s happening in their brains.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/thumbchart.jpg" alt="Leading cause of death chart">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11880">BYU study: Cancer passing heart disease as leading cause of death in more and more states</a>
            </h2>
            <h3 class="meta">Dec 18, 2018</h3>
            <p>Heart disease has been the leading cause of death in the United States for more than a century, ever since the early 1900s when it displaced acute diseases for the distinction. Now a growing number of states are crowning a new leading cause
                of death: cancer.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/capitol_thumbnail.jpg" alt="U.S. Capitol">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/news/does-political-party-trump-ideology">Does political party trump ideology?</a>
            </h2>
            <h3 class="meta">Dec 18, 2018</h3>
            <p>With party and ideology so closely intertwined, the question has in the past been nearly impossible to pin down, but a BYU duo just published a study showing that a person’s policy positions are quite malleable when told that leaders of their
                political party support a different position.</p>
        </div>
    </li>
</ul>


<!-- Wide -->
<ul class="tiles wide">
    <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">
        <div class="image">
            <img src="../raw/tile_group/1901-08_002.jpg" alt="Child in superhero costume in grocery store">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11884">Good vs. Evil: How heroes and villains affect the food you buy</a>
            </h2>
            <h3 class="meta">Jan 10, 2019</h3>
            <p>Research led by professor Tamara Masters finds people are willing to pay more for vice foods — think ice cream, cookies, and other unhealthy snacks — when a hero is used in the packaging.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/president_worthen_375.jpg" alt="BYU Devotional Speaker President Kevin J Worthen">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11883">BYU Devotional: Find your spiritual gifts, Know who you are</a>
            </h2>
            <h3 class="meta">Jan 8, 2019</h3>
            <p>President Kevin J Worthen and Sister Peggy S. Worthen welcomed students back to campus with the first devotional of the semester. They spoke about spiritual gifts and eternal identities.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/autism2.jpg" alt="Researchers help child at MRI machine">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/news/way-cool-way-be-byu-team-gains-insights-understudied-group-children-autism">‘A way cool way to be’: BYU team gains insights into understudied group of children with autism</a>
            </h2>
            <h3 class="meta">Jan 2, 2019</h3>
            <p>In the first study of its kind, a team of researchers was able to perform functional MRIs of a group of children with autism whose IQs averaged 54. The scans offer a glimpse into what’s happening in their brains.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/thumbchart.jpg" alt="Leading cause of death chart">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11880">BYU study: Cancer passing heart disease as leading cause of death in more and more states</a>
            </h2>
            <h3 class="meta">Dec 18, 2018</h3>
            <p>Heart disease has been the leading cause of death in the United States for more than a century, ever since the early 1900s when it displaced acute diseases for the distinction. Now a growing number of states are crowning a new leading cause
                of death: cancer.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/capitol_thumbnail.jpg" alt="U.S. Capitol">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/news/does-political-party-trump-ideology">Does political party trump ideology?</a>
            </h2>
            <h3 class="meta">Dec 18, 2018</h3>
            <p>With party and ideology so closely intertwined, the question has in the past been nearly impossible to pin down, but a BYU duo just published a study showing that a person’s policy positions are quite malleable when told that leaders of their
                political party support a different position.</p>
        </div>
    </li>
</ul>


<!-- Narrow -->
<ul class="tiles narrow">
    <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">
        <div class="image">
            <img src="../raw/tile_group/1901-08_002.jpg" alt="Child in superhero costume in grocery store">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11884">Good vs. Evil: How heroes and villains affect the food you buy</a>
            </h2>
            <h3 class="meta">Jan 10, 2019</h3>
            <p>Research led by professor Tamara Masters finds people are willing to pay more for vice foods — think ice cream, cookies, and other unhealthy snacks — when a hero is used in the packaging.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/president_worthen_375.jpg" alt="BYU Devotional Speaker President Kevin J Worthen">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11883">BYU Devotional: Find your spiritual gifts, Know who you are</a>
            </h2>
            <h3 class="meta">Jan 8, 2019</h3>
            <p>President Kevin J Worthen and Sister Peggy S. Worthen welcomed students back to campus with the first devotional of the semester. They spoke about spiritual gifts and eternal identities.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/autism2.jpg" alt="Researchers help child at MRI machine">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/news/way-cool-way-be-byu-team-gains-insights-understudied-group-children-autism">‘A way cool way to be’: BYU team gains insights into understudied group of children with autism</a>
            </h2>
            <h3 class="meta">Jan 2, 2019</h3>
            <p>In the first study of its kind, a team of researchers was able to perform functional MRIs of a group of children with autism whose IQs averaged 54. The scans offer a glimpse into what’s happening in their brains.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/thumbchart.jpg" alt="Leading cause of death chart">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/node/11880">BYU study: Cancer passing heart disease as leading cause of death in more and more states</a>
            </h2>
            <h3 class="meta">Dec 18, 2018</h3>
            <p>Heart disease has been the leading cause of death in the United States for more than a century, ever since the early 1900s when it displaced acute diseases for the distinction. Now a growing number of states are crowning a new leading cause
                of death: cancer.</p>
        </div>
    </li>
    <li class="tile">
        <div class="image">
            <img src="../raw/tile_group/capitol_thumbnail.jpg" alt="U.S. Capitol">
        </div>
        <div class="text">
            <h2>
                <a class="tile-link" href="https://news.byu.edu/news/does-political-party-trump-ideology">Does political party trump ideology?</a>
            </h2>
            <h3 class="meta">Dec 18, 2018</h3>
            <p>With party and ideology so closely intertwined, the question has in the past been nearly impossible to pin down, but a BYU duo just published a study showing that a person’s policy positions are quite malleable when told that leaders of their
                political party support a different position.</p>
        </div>
    </li>
</ul>


<ul class="tiles{{#if classes}} {{classes}}{{/if}}">
    {{#each tiles }}
        {{> @tile contextData }}
    {{/each}}
</ul>
  • Content: 
    .tiles
	list-style-type: none
	padding: 0
	position: relative

	section &
		@media( min-width: $breakMdLg )
			+emphasis()
		@media( min-width: $breakLg )
			+feature()

@supports (display: grid)
	.tiles
		display: grid
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))
		grid-gap: 1em

		.tile
			margin: 0
			max-height: 24em

	&.wide
		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr))

	.wide .tile
		max-height: 28em

	&.narrow
		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))
		grid-gap: 1em 0.5em

	.narrow .tile
		font-size: 1rem
		max-height: 22em
		.image
			padding-bottom: 66.67%

		h2
			line-height: 1.25
  • URL: /components/raw/tile_group/tile_group.sass
  • Filesystem Path: src/components/tile_group/tile_group.sass
  • Size: 656 Bytes 
/* Default */
{
  "tiles": [
    {
      "contextData": {
        "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."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/1901-08_002.jpg",
          "alt": "Child in superhero costume in grocery store"
        },
        "title": "Good vs. Evil: How heroes and villains affect the food you buy",
        "url": "https://news.byu.edu/node/11884",
        "meta": "Jan 10, 2019",
        "text": "Research led by professor Tamara Masters finds people are willing to pay more for vice foods — think ice cream, cookies, and other unhealthy snacks — when a hero is used in the packaging."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/president_worthen_375.jpg",
          "alt": "BYU Devotional Speaker President Kevin J Worthen"
        },
        "title": "BYU Devotional: Find your spiritual gifts, Know who you are",
        "url": "https://news.byu.edu/node/11883",
        "meta": "Jan 8, 2019",
        "text": "President Kevin J Worthen and Sister Peggy S. Worthen welcomed students back to campus with the first devotional of the semester. They spoke about spiritual gifts and eternal identities."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/autism2.jpg",
          "alt": "Researchers help child at MRI machine"
        },
        "title": "‘A way cool way to be’: BYU team gains insights into understudied group of children with autism",
        "url": "https://news.byu.edu/news/way-cool-way-be-byu-team-gains-insights-understudied-group-children-autism",
        "meta": "Jan 2, 2019",
        "text": "In the first study of its kind, a team of researchers was able to perform functional MRIs of a group of children with autism whose IQs averaged 54. The scans offer a glimpse into what’s happening in their brains."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/thumbchart.jpg",
          "alt": "Leading cause of death chart"
        },
        "title": "BYU study: Cancer passing heart disease as leading cause of death in more and more states",
        "url": "https://news.byu.edu/node/11880",
        "meta": "Dec 18, 2018",
        "text": "Heart disease has been the leading cause of death in the United States for more than a century, ever since the early 1900s when it displaced acute diseases for the distinction. Now a growing number of states are crowning a new leading cause of death: cancer."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/capitol_thumbnail.jpg",
          "alt": "U.S. Capitol"
        },
        "title": "Does political party trump ideology?",
        "url": "https://news.byu.edu/news/does-political-party-trump-ideology",
        "meta": "Dec 18, 2018",
        "text": "With party and ideology so closely intertwined, the question has in the past been nearly impossible to pin down, but a BYU duo just published a study showing that a person’s policy positions are quite malleable when told that leaders of their political party support a different position."
      }
    }
  ]
}


/* Wide */
{
  "tiles": [
    {
      "contextData": {
        "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."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/1901-08_002.jpg",
          "alt": "Child in superhero costume in grocery store"
        },
        "title": "Good vs. Evil: How heroes and villains affect the food you buy",
        "url": "https://news.byu.edu/node/11884",
        "meta": "Jan 10, 2019",
        "text": "Research led by professor Tamara Masters finds people are willing to pay more for vice foods — think ice cream, cookies, and other unhealthy snacks — when a hero is used in the packaging."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/president_worthen_375.jpg",
          "alt": "BYU Devotional Speaker President Kevin J Worthen"
        },
        "title": "BYU Devotional: Find your spiritual gifts, Know who you are",
        "url": "https://news.byu.edu/node/11883",
        "meta": "Jan 8, 2019",
        "text": "President Kevin J Worthen and Sister Peggy S. Worthen welcomed students back to campus with the first devotional of the semester. They spoke about spiritual gifts and eternal identities."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/autism2.jpg",
          "alt": "Researchers help child at MRI machine"
        },
        "title": "‘A way cool way to be’: BYU team gains insights into understudied group of children with autism",
        "url": "https://news.byu.edu/news/way-cool-way-be-byu-team-gains-insights-understudied-group-children-autism",
        "meta": "Jan 2, 2019",
        "text": "In the first study of its kind, a team of researchers was able to perform functional MRIs of a group of children with autism whose IQs averaged 54. The scans offer a glimpse into what’s happening in their brains."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/thumbchart.jpg",
          "alt": "Leading cause of death chart"
        },
        "title": "BYU study: Cancer passing heart disease as leading cause of death in more and more states",
        "url": "https://news.byu.edu/node/11880",
        "meta": "Dec 18, 2018",
        "text": "Heart disease has been the leading cause of death in the United States for more than a century, ever since the early 1900s when it displaced acute diseases for the distinction. Now a growing number of states are crowning a new leading cause of death: cancer."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/capitol_thumbnail.jpg",
          "alt": "U.S. Capitol"
        },
        "title": "Does political party trump ideology?",
        "url": "https://news.byu.edu/news/does-political-party-trump-ideology",
        "meta": "Dec 18, 2018",
        "text": "With party and ideology so closely intertwined, the question has in the past been nearly impossible to pin down, but a BYU duo just published a study showing that a person’s policy positions are quite malleable when told that leaders of their political party support a different position."
      }
    }
  ],
  "classes": "wide"
}


/* Narrow */
{
  "tiles": [
    {
      "contextData": {
        "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."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/1901-08_002.jpg",
          "alt": "Child in superhero costume in grocery store"
        },
        "title": "Good vs. Evil: How heroes and villains affect the food you buy",
        "url": "https://news.byu.edu/node/11884",
        "meta": "Jan 10, 2019",
        "text": "Research led by professor Tamara Masters finds people are willing to pay more for vice foods — think ice cream, cookies, and other unhealthy snacks — when a hero is used in the packaging."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/president_worthen_375.jpg",
          "alt": "BYU Devotional Speaker President Kevin J Worthen"
        },
        "title": "BYU Devotional: Find your spiritual gifts, Know who you are",
        "url": "https://news.byu.edu/node/11883",
        "meta": "Jan 8, 2019",
        "text": "President Kevin J Worthen and Sister Peggy S. Worthen welcomed students back to campus with the first devotional of the semester. They spoke about spiritual gifts and eternal identities."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/autism2.jpg",
          "alt": "Researchers help child at MRI machine"
        },
        "title": "‘A way cool way to be’: BYU team gains insights into understudied group of children with autism",
        "url": "https://news.byu.edu/news/way-cool-way-be-byu-team-gains-insights-understudied-group-children-autism",
        "meta": "Jan 2, 2019",
        "text": "In the first study of its kind, a team of researchers was able to perform functional MRIs of a group of children with autism whose IQs averaged 54. The scans offer a glimpse into what’s happening in their brains."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/thumbchart.jpg",
          "alt": "Leading cause of death chart"
        },
        "title": "BYU study: Cancer passing heart disease as leading cause of death in more and more states",
        "url": "https://news.byu.edu/node/11880",
        "meta": "Dec 18, 2018",
        "text": "Heart disease has been the leading cause of death in the United States for more than a century, ever since the early 1900s when it displaced acute diseases for the distinction. Now a growing number of states are crowning a new leading cause of death: cancer."
      }
    },
    {
      "contextData": {
        "image": {
          "url": "/components/raw/tile_group/capitol_thumbnail.jpg",
          "alt": "U.S. Capitol"
        },
        "title": "Does political party trump ideology?",
        "url": "https://news.byu.edu/news/does-political-party-trump-ideology",
        "meta": "Dec 18, 2018",
        "text": "With party and ideology so closely intertwined, the question has in the past been nearly impossible to pin down, but a BYU duo just published a study showing that a person’s policy positions are quite malleable when told that leaders of their political party support a different position."
      }
    }
  ],
  "classes": "narrow"
}