Layout components

All Nextcloud apps are built using individual reusable components for consistency and efficiency. Currently, these components are written in Vue and can be found at the nextcloud-vue repository on Github with the documentation available at the Nextcloud Vue components style guide.

List item

List item Vue component.

Penpot list item

Talk list

List items can be used to display a collection of elements from which one can be selected. List items are seen in the left list of chats in Talk, as well as the list of messages in Mail and the list of contacts in Contacts. List items usually have an avatar or a descriptive icon, a main line and optionally a subline. A list item may also contain:

  • an Action menu which has commonly used actions for that type of item

  • a counter bubble: Talk for example uses an unread messages counter

Content

The content section of your app takes up the most screen space, and is the core of what your app does. The content of every app is unique, but do make sure that it follows some basic rules like responsiveness, accessibility, and support in different languages so that it can be used by everyone. The layout of your content depends on what your app does, as the content of almost every Nextcloud app looks different. The appContent Vue component should be used for the content of your app.

Views

Some apps offer different views on their content so people can pick a preference which should be remembered automatically. It is important to consider which should be the default one and whether to have different views at all, since most people do not change the default.

  • Files (web, Android & iOS), Bookmarks: List view or grid view

  • Calendar: Month view, week view, day view, list view / agenda

  • Talk (web, Android & iOS): Speaker view and grid view in a call

The content is also the section where you can quickly explain to people how to get started with your app, for example using an Empty content atomic component.

Sizing

For text-based apps like chat, mails, and other paragraphs of text, the width of the content should not go over a certain width to facilitate readability. In Nextcloud Text for example the width is limited to 650px and we do it similarly in Mail and Talk, even if the screen size is larger.

For every clickable element in your interface, make sure it has a minimum clickable area of at least 44px by 44px (48px for Android). Anything smaller than this will make your app inaccessible and difficult for users to use your app on mobile as they might miss while trying to tap on the element.

Spacing between elements in your app should be in multiples of 4px.