Cards

Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably.

Cards should have a <header>, <article> and <footer>. You can help make cards a standard size by using the .card-content-overflow class on the <article> element.

If you have many cards, you can make a grid of them by putting them in a <div> with the class .cards.

You can make the image B&W by adding the .bw class to the .header-image-background element.

Project Cards

There are a couple options you can also add such as .cards .cards--3 and .cards .cards--2 which can control how many cards are shown in a row. The default is 4.

Auditing the News Evaluating News Quality on Smart Speakers

Alexa, Siri, Google Home, Cortana—smart speakers and agents are now used by about 20% of US homes. People use them to ask about weather, set timers, play games, get information, or listen to the news. But are these devices delivering high-quality news and information or could they be misinforming and sharing “junk” news? This project aims to find out. By developing an audit method that defines what queries to audit and systematically collects data on the results over time for those queries from several different smart speakers, the project will allow for an assessment and comparison of news quality from these different devices.

Designing Information Spaces for Augmented Reality

Immersive technology allows creators to engage users in new and novel ways, many of which can make the interactions users have with information easier or more meaningful. This project will look at a four different storytelling formats that exist today (a cooking blog, a sports broadcast, a web interactive and a podcast) and reimagine them for augmented reality using tools like Torch for iOS and Magic Leap’s Create tool.

Iterative Story Design Play-Testing Augmented Reality

This project will build on the work of the Location Based Storytelling Studio group from Fall 18 which produced and ran an initial play-test for an AR game about climate change. During Winter 19, we will continue play-testing and refining the game while gathering feedback from players through surveys and interviews. Can playing a game really impact attitudes about climate change? Which is more impactful--a game designed for “fun” or a game that’s more transparent about its educational goals?

Juxtapose Improving a Storytelling Tool

Juxtapose helps storytellers compare two pieces of similar media, including photos, and GIFs. It’s ideal for highlighting then/now stories that explain slow changes over time (growth of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.). This popular tool could be more useful to storytellers and web-makers if it had a couple of key features that have come up in user feedback. Auto aligning images and animated GIF social sharing are two features that would be of great improvements.

Personalize My Story Automatically Adapting News Article Text for Individual Users

Algorithmic news curation aggregators (e.g. Google News) are sometimes known to personalize the selection of stories shown to individuals. But far less is known about the potential for article-level personalization in which an article is automatically re-written to appeal to different types of users, perhaps even adapted to each individual. Could this be used to manipulate, persuade, inform, or engage people more effectively? The goal of this project is to prototype one or more templates for automated news articles that adapt to different types of people or individuals based on a given user model based on the types of information a news site might know (e.g. gender, age, race, location, interest-level, etc.). These templates will be used to produce personalizable news articles that are published to the web.

Privacy Mirror

The average person today that has a smartphone, walks around leaking information about themselves over radio signals. WiFi, bluetooth and NFC radiate personal information into the public airwaves. These signals can tell you a lot about a person without their knowledge. To raise awareness around privacy and security for digital devices, this project will seek to create a “mirror” that reflects back information that is radiating out from anyone who stands in front of it. Frequencies include: RFID cell phones, WiFi, bluetooth, Misc RF at 900Mhz 2.4Ghz 5Ghz

🤖

Emoji Background

This card is using an emoji background .header-emoji-background

                
<div class="cards">

    <div class="card">
        <a href="/projects/privacy-mirror/">
            <header class="header-image">
                <div class="header-image-background" style="background-image: url(https://studio.knightlab.com/assets/projects/privacy-mirror.png);"></div>
                <div class="header-image-overlay"></div>
                <div class="header-image-content grid-item-bottom">
                    <h4>Privacy Mirror</h4>
                </div>
            </header>
        </a>
        <article class="card-content-overflow">
            <p>
                The average person today that has a smartphone, walks around leaking information about themselves over radio signals. WiFi, bluetooth and NFC radiate personal information into the public airwaves. These signals can tell you a lot about a person
                without their knowledge. To raise awareness around privacy and security for digital devices, this project will seek to create a “mirror” that reflects back information that is radiating out from anyone who stands in front of it. Frequencies include:
                RFID cell phones, WiFi, bluetooth, Misc RF at 900Mhz 2.4Ghz 5Ghz
            </p>
        </article>
        <footer>
            <a class="button button-small" href="https://studio.knightlab.com/projects/privacy-mirror/">Details</a>
        </footer>
    </div>

</div>

                
            

Emoji Background Variation

Use .header-emoji-background instead of .header-image-background. Pairs well with a gradient fill style such as .gradient-color-tertiary

😈

Mischiveous

This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.

🐹

Hamster Face

This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.

🍕

Pizza

This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.

💩

Pile Of Poo

This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.

👩‍🚀

Woman Astronaut

This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.

🐵

Monkey Face

This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.

🤖

Robot

This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.

                
<div class="cards">

    <div class="card">
        <a  href="#">
            <header class="header-image">
                <div class="header-emoji-background gradient-color-tertiary">😈</div>
                <div class="header-image-overlay"></div>
                <div class="header-image-content grid-item-bottom">
                    <h4>Mischiveous</h4>
                </div>
            </header>
        </a>
        <article class="card-content-overflow">
            <p>
                This card is using an emoji background. Aenean lacinia, nisl a vestibulum interdum, odio nisl lacinia neque, ac vestibulum est ex eu turpis. In laoreet turpis tristique, sollicitudin purus eu, sodales sem. Ut nec sodales nibh.
            </p>
        </article>
        <footer>
            <a class="button button-small" href="#">Details</a>
        </footer>
    </div>

</div>


                
            

Dark Variation

Auditing the News Evaluating News Quality on Smart Speakers

Alexa, Siri, Google Home, Cortana—smart speakers and agents are now used by about 20% of US homes. People use them to ask about weather, set timers, play games, get information, or listen to the news. But are these devices delivering high-quality news and information or could they be misinforming and sharing “junk” news? This project aims to find out. By developing an audit method that defines what queries to audit and systematically collects data on the results over time for those queries from several different smart speakers, the project will allow for an assessment and comparison of news quality from these different devices.

Designing Information Spaces for Augmented Reality

Immersive technology allows creators to engage users in new and novel ways, many of which can make the interactions users have with information easier or more meaningful. This project will look at a four different storytelling formats that exist today (a cooking blog, a sports broadcast, a web interactive and a podcast) and reimagine them for augmented reality using tools like Torch for iOS and Magic Leap’s Create tool.

Iterative Story Design Play-Testing Augmented Reality

This project will build on the work of the Location Based Storytelling Studio group from Fall 18 which produced and ran an initial play-test for an AR game about climate change. During Winter 19, we will continue play-testing and refining the game while gathering feedback from players through surveys and interviews. Can playing a game really impact attitudes about climate change? Which is more impactful--a game designed for “fun” or a game that’s more transparent about its educational goals?

Juxtapose Improving a Storytelling Tool

Juxtapose helps storytellers compare two pieces of similar media, including photos, and GIFs. It’s ideal for highlighting then/now stories that explain slow changes over time (growth of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.). This popular tool could be more useful to storytellers and web-makers if it had a couple of key features that have come up in user feedback. Auto aligning images and animated GIF social sharing are two features that would be of great improvements.

Personalize My Story Automatically Adapting News Article Text for Individual Users

Algorithmic news curation aggregators (e.g. Google News) are sometimes known to personalize the selection of stories shown to individuals. But far less is known about the potential for article-level personalization in which an article is automatically re-written to appeal to different types of users, perhaps even adapted to each individual. Could this be used to manipulate, persuade, inform, or engage people more effectively? The goal of this project is to prototype one or more templates for automated news articles that adapt to different types of people or individuals based on a given user model based on the types of information a news site might know (e.g. gender, age, race, location, interest-level, etc.). These templates will be used to produce personalizable news articles that are published to the web.

Privacy Mirror

The average person today that has a smartphone, walks around leaking information about themselves over radio signals. WiFi, bluetooth and NFC radiate personal information into the public airwaves. These signals can tell you a lot about a person without their knowledge. To raise awareness around privacy and security for digital devices, this project will seek to create a “mirror” that reflects back information that is radiating out from anyone who stands in front of it. Frequencies include: RFID cell phones, WiFi, bluetooth, Misc RF at 900Mhz 2.4Ghz 5Ghz

                
<div class="cards">

    <div class="card">
        <a href="https://studio.knightlab.com/projects/auditing-news-on-smart-speakers/">
            <header class="header-image">
                <div class="header-image-background" style="background-image: url(https://studio.knightlab.com/assets/projects/audit-smart-speaker.png);-webkit-filter:none;
    filter: none;"></div>
                <div class="header-image-overlay"></div>
                <div class="header-image-content grid-item-bottom">
                    <h4>Auditing the News
                        <small>Evaluating News Quality on Smart Speakers</small>
                    </h4>
                </div>
            </header>
        </a>
        <article class="card-content-overflow">
            <p>
                Alexa, Siri, Google Home, Cortana—smart speakers and agents are now used by about 20% of US homes. People use them to ask about weather, set timers, play games, get information, or listen to the news. But are these devices delivering high-quality
                news and information or could they be misinforming and sharing “junk” news? This project aims to find out. By developing an audit method that defines what queries to audit and systematically collects data on the results over time for those queries
                from several different smart speakers, the project will allow for an assessment and comparison of news quality from these different devices.

            </p>
        </article>
        <footer>
            <a class="button button-small" href="https://studio.knightlab.com/projects/auditing-news-on-smart-speakers/">Details</a>
        </footer>
    </div>
</div>

                
            

Story Cards

Story Cards are a little different than project cards. The image sits alone without type on top of it. The headline is a content typeface. The use of .dateline and .byline is considered in the layout.

				
<div class="cards cards--story">

    <div class="card">
        <a href="https://studio.knightlab.com/projects/auditing-news-on-smart-speakers/">
            <header class="header-image">
                <div class="header-image-background" style="background-image: url(https://localnewsinitiative.northwestern.edu/assets/post_images/space_for_lease.jpg);"></div>
            </header>
        </a>
        <article>
            <p class="dateline">
                <a href="https://localnewsinitiative.northwestern.edu/category/opinion/">opinion</a> |
                <time datetime="2019-01-14T08:00:00-06:00" itemprop="datePublished">Jan 14, 2019</time>
            </p>
            <a href="https://localnewsinitiative.northwestern.edu/posts/2019/01/14/local-news-neighborhood-economics/index.html">
                <h3>Opinion: Local News Organizations Slow to Invest in Neighborhood Economics Reporting</h3>
            </a>
            <p class="byline">
                by
                <span class="author">
                    <a class="name" href="/people/jeannette-hinkle/">Jeannette Hinkle</a> |
                    <a href="https://twitter.com/Jenny_Hinkle">
                        <span class="icon-twitter"></span>Jenny_Hinkle
                    </a>
                </span>
            </p>
            <p>
                Neighborhoods, like the cities they inhabit, are built on hard economic truths: jobs, housing, public transit, water, sewage, power and communications connections, shops, theaters and ...

            </p>
        </article>
    </div>

</div>

				
			

Product Cards

Product Cards are a little different than project cards. The image sits alone without type on top of it.

				
<div class="cards cards--product">

    <div class="card">
        <a href="http://timeline.knightlab.com/">
            <header class="header-image">
                <div class="header-image-background" style="background-image: url(https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-timeline.png);"></div>
            </header>
            <article>
                <h3 class="product-logo product-logo-smaller">Timeline <span>JS</span></h3>
                <p class="product-tagline">Easy-to-make, beautiful timelines.</p>
            </article>
        </a>
    </div>

</div>
				
			

Dark variation

				
<div class="cards cards--product cards--dark">

    <div class="card">
        <a href="http://timeline.knightlab.com/">
            <header class="header-image">
                <div class="header-image-background" style="background-image: url(https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-timeline.png);"></div>
            </header>
            <article>
                <h3 class="product-logo product-logo-smaller">Timeline <span>JS</span></h3>
                <p class="product-tagline">Easy-to-make, beautiful timelines.</p>
            </article>
        </a>
    </div>

</div>