• Header spans 100% of the page width
  • Header is sticky (fixed at the top of the page)
  • Header hides itself on sroll 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 example

  • 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 avator 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

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

Settings icon + "Tinker this" CTA

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.
  • 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.
  • 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)


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit pellentesque purus vitae ultricies.

a second ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit pellentesque purus vitae ultricies.

a second ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit pellentesque purus vitae ultricies.

a second ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit pellentesque purus vitae ultricies.

a second ago

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

Questions & Comments: yuriy.sklyar@autodesk.com