Styleguide - Site Components - E-Learning Heroes

Avatars

Avatars display profile photos and information relevant to the avatar's context.

Card Setup

Masonry cards should always be setup on a grid. By default, each card will occupy 4 columns, except for Featured cards - which will occupy 8 columns.

When the .grid__row also contains a class of .masonry , the cards will be vertically positioned by our masonry library.

There is a helper method available for each card type in card_helper.rb . Typically, you will only need to provide the object or page location that each card represents.

Standard Dynamic Cards

Standard cards may be rendered for any object that has a title, description, and creator.

Comment / Reply counts will be displayed if the object has that association.

Discussion cards will always have a transparent footer area. Only cards for objects with featured images will have an image.

The following represent a sampling of cards for each type of object.

Examples

This week, your challenge is to create an interactive story around a photo collage. You can use placeholder photos an...

Gamification, or applying the elements of games to other types of content, is a great way to add interest and engagem...

There are many discussions talking about deleting items from the media library in Storyline including this link: Stor...

This week, your challenge is to create an interactive story around a photo collage. You can use placeholder photos an...

Gamification, or applying the elements of games to other types of content, is a great way to add interest and engagem...

Condensed Standard Dynamic Cards

Condensed dynamic cards are essentially the same as the above Standard Dynamic Cards, but without description snippets or imagery.

Featured Dynamic Cards

Featured dynamic cards are also essentially the same as the above Standard Dynamic Cards, but with emphasized title and imagery, and without description snippets.

Only objects with featured images may be used for featured dynamic cards.

Examples

Static Cards

Static cards are stand alone cards that are not based on an instance of an object or location.

Examples

Discover the Secret to
Engaging Learners

Get 5 Pro Strategies That Really Work

Free E‑Learning Downloads

Get hundreds of free templates, graphics, backgrounds, and more.

E‑Learning Jobs

Find your next gig and post open opportunities for free on our job board

Meet Tom Kuhlmann, author of The Rapid E‑Learning Blog and your guide to e‑learning nirvana.

Read Tom's Blog

Related Products

Track and deliver courses to learners everywhere with:

Location Cards

Location cards are based on the page location.

Hub Cards

Hub cards are based on a hub location.

Examples

Getting Started Cards

Studio '13 Tutorials

Support Cards

Hub Without Children Hub With Children

Get Product Support

Search the extensive Articulate Studio knowledge base to find answers to your support questions.

Forum Cards

Hub Without Children Hub With Children

Discuss Studio

Join Discussion

Trial Cards

Hub with Storyline Trial Hub with Studio Trial

Build courses the easy way. Try Articulate software.

Free Trial

Build courses the easy way. Try Articulate software.

Free Trial

Owner Cards

Owner cards are based on an owning user and are only used on profile pages. Because they are tied to a user and only shown on that user's profile, avatar and user name information has been hidden - except in the case of discussions.

Examples

This week, your challenge is to create an interactive story around a photo collage. You can use placeholder photos an...

Gamification, or applying the elements of games to other types of content, is a great way to add interest and engagem...

There are many discussions talking about deleting items from the media library in Storyline including this link: Stor...

is hiring an Instructional Designer - Remote

Contact us : https://www Osman Goni is a seasoned SEO professional with over four years of experience in the industry. W

Add a Course

Build your portfolio. Add samples of your work to your profile.

Featured Thumb

Example

Standard Thumb

Example

Category Thumb

Example

Examples

April 16, 2024

Tango International for HAEC Associate Award is hiring an Instructional Designer

Remote

April 1, 2024

Respectful Ways Social Emotional Learning Programs is hiring a Storyline and graphic updates - 39 courses

Georgia

March 27, 2024

Cybervance is hiring an Instructional Designer Training Specialist

Maryland

Federal Aviation Administration is hiring a Training Specialist (Financial)

Washington, DC

March 22, 2024

Canadian Centre for Occupational Health and Safety is hiring an e-Learning Design Lead (Bilingual)

Hamilton, ON

Examples

Using Photo Mosaics to Design Interactive Stories #459
11 Comments

Visual Storytelling with Photo Collages Build an interactive slide or course from a single image Get rid of bullet points You don't need to be a photographer to make this work Use you...

1 day ago04/26/24 at 1:12 pm (UTC)

Everything You Need To Know About Gamification in E-Learning

Gamification, or applying the elements of games to other types of content, is a great way to add interest and engagement to e-learning. And if you can master gamification techniques, you’ll be ...

over 8 years ago11/24/15 at 9:16 pm (UTC)

There are many discussions talking about deleting items from the media library in Storyline including this link: Storyline 360: Managing a Project’s Assets with the Media Library - E-Learning Hero...

1 minute ago04/27/24 at 8:47 pm (UTC)

Retro Music Icons
934 Downloads

Get learners grooving with illustrated music icons, including a tape deck, speaker, and more.

over 6 years ago01/24/18 at 9:14 pm (UTC)

E-Learning for Beginners

New to e-learning? Our in-depth e-book will tell you everything you need to know. You’ll be creating great courses in no time! Grab this free e-book to learn: What e-learning is all about ...

almost 9 years ago04/28/15 at 3:42 pm (UTC)

Race to the Rocket Dice Game

Engage your learners with this rocket-themed quiz game by community member Diana Myers. The game features random numbers using custom JavaScript. The questions are easily updated using ...

over 7 years ago01/18/17 at 7:09 pm (UTC)

Examples

E-Learning 101 Hub

Hub

E-Learning 101 Hub

How to Delete item from Media Asset Library in Storyline

Discussion

How to Delete item from Media Asset Library in Storyline

Hi Babette, Yeah, you can get the documentation online, which is kind of nice because then you ca...

Reply

Hi Babette, Yeah, you can get the documentation online, which is kind of nice because then you ca...

from Discussion: Documentation?

Retro Music Icons

Download

Retro Music Icons

Everything You Need To Know About Gamification in E-Learning

Series

Everything You Need To Know About Gamification in E-Learning

Using Photo Mosaics to Design Interactive Stories #459

Article

Using Photo Mosaics to Design Interactive Stories #459

Article

Using Photo Mosaics to Design Interactive Stories #459

from Series: Everything You Need To Know About Gamification in E-Learning

Course Design

Download Category

Course Design

Course Design > Storyboards

Download Category

Course Design > Storyboards

E-Learning for Beginners

E‑Book

E-Learning for Beginners

Race to the Rocket Dice Game

E‑Learning Example

Race to the Rocket Dice Game

Examples

Activity

Adam Schwartz posted a new discussion How to Delete item from Media Asset Library in Storyline

"There are many discussions talking about deleting items from the media library in Storyline including this link: Storyline 360: Managing ..."

2 hours ago04/27/24 at 7:07 pm (UTC)

Activity

Adam Schwartz replied to the discussion Documentation?

"Hi Babette, Yeah, you can get the documentation online, which is kind of nice because then you can just print or save the parts that you ..."

over 13 years ago12/22/10 at 9:52 am (UTC)

Activity

Adam Schwartz published a new download Retro Music Icons

"Get learners grooving with illustrated music icons, including a tape deck, speaker, and more."

over 6 years ago01/24/18 at 9:12 pm (UTC)

Activity

Adam Schwartz published a new series Everything You Need To Know About Gamification in E-Learning

"Gamification, or applying the elements of games to other types of content, is a great way to add interest and engagement to e-learning. A..."

over 8 years ago11/24/15 at 8:59 pm (UTC)

Activity

Adam Schwartz published a new article Using Photo Mosaics to Design Interactive Stories #459

"Visual Storytelling with Photo Collages Build an interactive slide or course from a single image Get rid of bullet points You don't need..."

1 day ago04/26/24 at 12:31 pm (UTC)

Activity

Adam Schwartz commented on the article Creating Custom Shapes in PowerPoint

"Nice techniques Jeanette, I didn't even know about these new drawing features in PPT. Now I'm going to have to try them out!"

over 13 years ago01/26/11 at 7:47 am (UTC)

Examples

Your comment was successfully posted.

Something went wrong, please try again.

An error occurred, please try again later.

Implementation Details

All images are constrained by width, but not by height.

This is to ensure that we can use CSS to fill the image space with the image, via background-image and background-size , without having to use massive image files and hopefully avoiding pixelation.

Authors have been provided the below optimal image dimensions and are expected to upload only images with those dimensions.