Tinkercad's web style guide

Tip: click any section title to link to it.

  • Header spans 100% of the page width
  • Header is sticky (fixed at the top of the page)
  • Header hides itself on scroll down, and
  • reveals itself on scroll up.
  • Limit number of main links to 5-6.

Note Larger screens showcase the full Autodesk Tinkercad logo for brand recognition purposes, whereas smaller screens default to only showing the Tinkercad icon/logomark.

The “Remote Control” gives logged-in users an easy access to all the important sections of the community from a single, centralized location.

See in-action

  • Side navigation is sticky.
  • Fixed at the top of the page, directly below the header.
  • Positioned on right-hand side of the website.
  • Is not visible on logged out marketing pages.
  • Is not visible on Gallery pages (use header with avatar instead).
  • Is to be used only on 100% wide fluid container to allow for correct content fit.
  • All the notifications and content section links are able to include an "active" class.

Side navigation consists of 3 main sections:

  1. User information: avatar, username (long ones get truncated), basic user information such as location, community performance, ranking, and Settings shortcut.
  2. Notifications: notifications have been broken up into separate categories (Activity, Messages, Followers, Following, Moderating).
  3. Content sections: houses user-generated content. Sections are added as content is created.
  • Clicking image opens a modal.
  • Clicking the Title opens detail page. Title is limited to 64 characters, including spaces.
  • Clicking user name opens user profile.
  • Clicking "Favorite" will add the design to "Favorites" category without having to go to design detail page/modal.

Time examples:

1s ago, 2d ago, 4mth ago, 10y ago
1 second ago, 2 days ago, 4 months ago, 10 years ago

Sizes

States

Default state – No “Likes”

“Liked” & “Commented” design

Hover state (“Unlike” a “Liked” design)

Note Comment must be deleted in order for comment icon to default back to empty state.

Badges

Implementation:

<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3 col-xl-2">

<div class="thumbnail"> <span class="badges text-sm"> <i class="fas fa-star text-yellow" aria-hidden="true" title="Staff Favorite 1/2/2018"></i> <i class="fas fa-trophy text-success" aria-hidden="true" title="Competitions won ×12"></i> <span class="label label-success" title="Session currently live. Join in!"> <i class="fas fa-bolt" aria-hidden="true"></i> L!VE </span> </span> <a type="button" href="" data-toggle="modal" data-target="#design-detail" title="Quick view"><img alt="" class="img-responsive" src="images/filler.jpg"></a> <a href="yuriysklyar-loggedout.shtml" title="Visit UserName's profile"><img width="40" height="40" class="img-rounded hidden-xs hidden-sm" alt="" src="images/me.jpg"></a> <h3><a href="design-detail.shtml" title="Race spec Ferrari w/BBS wheels GT3 Le Mans">103 Green Ave #Architecture #InteriorDesign</a><br> <small>(6h ago) <a href="yuriysklyar-loggedout.shtml" title="Visit UserName's profile">UserName</a></small></h3>
<div class="design-stats"> <small> <span class="likes"><a rel="" href="#"> <i class="far fa-heart"></i> <span class=""></span></a></span> <span class="comments"><a href="#"> <i class="far fa-comment"></i> <span></span> </a></span> </small> </div>
</div>
</div>

Settings icon + "Tinker this" CTA

  • Both icons serve as a shortcuts to design's settings/features.
  • Both appear only for logged-in users.
  • Both appear on :hover
  • No more than 4-5 dropdown menu items.

Heading 1

Heading 2

Heading 3

Heading 4

Lead paragraph

Regular text with a link

Small text.

Bold text.

Italicized text.

An abbreviation.

Muted (gray) text example.

White text example.

Primary text example.

Yellow text example.

Warning text example.

Danger text example.

Success text example.

Info text example.

“It is not true that people stop pursuing dreams because they grow old, they grow old because they stop pursuing dreams.”

Gabriel Garcí­a Márquez, ILTWMT

Sizes

Styles

States


Default state (no likes)

4.3K
Default like with count


Single like (+hover state)

4.3K 4.3K
Liked with count (+hover state)

Disabled states

Dismissable alerts

Info alert, with a link.
Success alert, with a link.
Warning alert, with a link.
Danger alert, with a link.

Backgrounds

White

Primary

Success

Info

Light Blue

Warning

Danger

Labels

Default Primary Success Warning Danger Info

Default Modal

  • Central location for any and all notifications.
  • Ability to filter notifications by pressing the icon.
  • Tabbed interface allows for management of multiple accounts.
  • Uses default modal size.

Default feed (default modal size)

Small feed (small modal size)

Condensed panel feed See live demo

Global feed L!VE
  • Title is limited to 64 characters.
  • Description is limited to 240 words. If description gets long (more than 3 lines on MD), you can expand it via “more...”/“less...” link at the end of paragraph. This does not appear on LG and XL breakpoints.
  • 10 tag limit.
  • A comprehensive list of modals currently in use.
  • A comprehensive list of modals currently in use.
  • A comprehensive list of modals currently in use.
  • A comprehensive overview of the administrator experience, please see the Admin section.
  • A comprehensive list of modals currently in use.
  • A comprehensive list of modals currently in use.
  • A comprehensive list of modals currently in use.
  • Each comment has a 512 character limit.
  • 24 characters minimum count, to reduce junk and increase quality.
  • 3 consecutive comments per design, every 10 minutes.

Comments

There are currently no comments – be the first to add one!

Comments (4)


Default comment state without likes and replies.

a second ago

A liked reply to a comment.

a second ago

Disliked/downvoted comment.

a second ago

Flagged comment.

a second ago

Load more comments
  • 67 responsive templates (20K lines of code)

Questions & Comments:


yuriy.sklyar@autodesk.com