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

E-learning developers use sliders to create some really cool learning experiences, from self-assessment tools to inte...

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You...

I was super excited to see the x64 version of Storyline pushed to the public, but with it marked "Beta" on the instal...

E-learning developers use sliders to create some really cool learning experiences, from self-assessment tools to inte...

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You...

Condensed Standard Dynamic Cards

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

Examples

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

E-learning developers use sliders to create some really cool learning experiences, from self-assessment tools to inte...

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You...

I was super excited to see the x64 version of Storyline pushed to the public, but with it marked "Beta" on the instal...

is hiring an Instructional Designer - Remote

"Explore expert tips, comprehensive guides, and daily inspiration at tipsj.com! From tech to wellness, we've got you cov

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 Interactive Sliders in E-Learning 2018 #205
127 Comments

Using Sliders in E-Learning #205: Challenge | Recap E-learning developers use sliders to create some really cool learning experiences, from self-assessment tools to interactive game...

over 5 years ago08/18/18 at 9:11 pm (UTC)

E-Learning Challenges - Complete List!

Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your publish...

9 years ago02/05/15 at 8:55 pm (UTC)

How "ready" is x64?
17 Replies

I was super excited to see the x64 version of Storyline pushed to the public, but with it marked "Beta" on the installer, my team has questions about whether we can/should use this in our developm...

29 minutes ago04/25/24 at 1:12 am (UTC)

Ukranian Text Labels for Storyline 360 Player
250 Downloads

Need to translate your Storyline 360 course into Ukranian? Grab these player labels.

8 months ago08/30/23 at 2:13 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

Hub

Discussion

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?

Ukranian Text Labels for Storyline 360 Player

Download

Ukranian Text Labels for Storyline 360 Player

E-Learning Challenges - Complete List!

Series

E-Learning Challenges - Complete List!

Using Interactive Sliders in E-Learning 2018 #205

Article

Using Interactive Sliders in E-Learning 2018 #205

Article

Using Interactive Sliders in E-Learning 2018 #205

from Series: E-Learning Challenges - Complete List!

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 "ready" is x64?

"I was super excited to see the x64 version of Storyline pushed to the public, but with it marked "Beta" on the installer, my team has que..."

5 months ago11/28/23 at 5:43 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 Ukranian Text Labels for Storyline 360 Player

"Need to translate your Storyline 360 course into Ukranian? Grab these player labels."

8 months ago08/30/23 at 2:12 pm (UTC)

Activity

Adam Schwartz published a new series E-Learning Challenges - Complete List!

"Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Sta..."

9 years ago02/05/15 at 8:21 pm (UTC)

Activity

Adam Schwartz published a new article Using Interactive Sliders in E-Learning 2018 #205

"Using Sliders in E-Learning #205: Challenge | Recap E-learning developers use sliders to create some really cool learning exper..."

over 5 years ago08/18/18 at 9:05 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!"

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.