Component library

atwork.ai

The purpose of this page is to showcase the atwork.ai components and their functionality/capability. The component on this page is to be kept up to date and linked to the symbol, so we can easily keep consistency across the website and update elements efficiently.

iN kOOPERATION MIT
Innosuisse
ZHAW
Unsere kunden
Energie360
Mastercard
Ericsson
Samsung
MCM
Innosuisse
ZHAW
Energie360
Mastercard
Ericsson
Samsung
MCM

c_loved-supported

Use within: Body (no deeper nesting!)

Variants available
(via symbol library):

  • header-overlap

combo-classes:

  • no-overlap

Generic Logo component

c_loved-supported (generic logo component)

This component is not a symbol. Copy the entire component, starting at the c_block_container parent and use it within: Body (no deeper nesting!)

Customization:

Use the CMS to populate the component. Note: In order to change the CMS source, you first have to unlink the overwrite field of the current CMS collection. With the logo-list-image selected, unselect both image and alt text:

After doing this, you can change the CMS collection in the parent (logo-collection-list selected):

And then, selecting the logo-list-image once again, relink the logo & alt text to the new collection:

Basics

The golden rule: If it isn't on this page, it cannot exist!

Classes / combo-classes:

Whenever creating new classes or combo classes, add the class name as well as a short description to the "Variants" Section of the corresponding component info box.

As of August 16th 2021, all new classes created should start with c_ -> this helps us determine which classes are already part of our new component library (and are therefore be mentioned on this page) and which classes are our "legacy" and will therefore slowly be sunsetted.

Symbols:

Updating a symbol:
Whenever a change to a symbol is necessary, consider the following:

  • changes to a symbol apply to all instances of that symbol. Are you making an update that should be made globally and applied to all instances on atwork.ai? Then go ahead and make the change directly in the symbol.
  • Is it a change that should not be made globally? Then return to the components page, duplicate the desired symbol and make the changes there. Don't forget to leave one instance of the new symbol as well as description for it on this page ;)

Reusing a symbol:

To reuse a symbol, add the desired symbol via the symbols pannel on the top left:

To overwrite the content of the symbol, select it in the navigator and head over to the settings tab in the inspector. Here you find all overwritteable fields:

Spacing

Text Styles:

c_h1

c_h2

c_h3

c_h4

c_paragraph

Combo classes:

  • cta: sets paragraph text to 20px & line height to 1.7

Spacing:

Spacing is always multiple of 8.

  • Spacing between sections: 208 (padding top 104, padding bottom 104)
  • Spacing between blocks: 208 (margin bottom and margin top: each 104)

Page anatomy:

Body -> c_section -> c_block-container -> c_2columns (if necessary) -> ...

c_section

Description:

c_section is a section wrapper that spanns across 100vw. All content on the page should be placed within a variant of this component.

Variants available
(by adding the following combo-classes):

  • background-light-blue: for a full width section with light-blue background
  • background-blue: for a full width section with atwork-blue background

c_block-container

Description:

Every individual block of content should be place within a c_block-container element. This will set appropriate spacing and wrap behaviour for responsive design.

Combo classes:

  • no-margin-top
  • no-margin-bottom

c_columns

Description:

For arranging content in columns. This class is applied to the parent element, the column wrapper. The individual columns should be given the following classes (depending on how many columns you need):

  1. c_column1
  2. c_column2
  3. c_column3

Combo classes:

  • reverse : this class reverses the order of the flex layout of the columns when it is switched to wrap (for mobile layout, for example).
  • margin-top : adds a margin top (on tablet & mobile breakpoints) to the column -> for use in flex layouts when columns are reversed and need more space between them

c_centered

Description:

This class if for horizontally centring elements within the c_block-container.

Decision making has never been easier

From people insights to business impact.

By collecting feedback through automated pulse checks, the atwork suite offers a comprehensive approach to make decisions more accessible; helping you understand the problems, suggest precise action plans and keep track of their impact on your organisation.

Learn morea

atwork has you covered

Workforce analytics for HR & executives.

Whether your challenges are commonly seen or completely out of the ordinary – the atwork Suite has what you need. Choose from our constantly growing catalogue of algorithm-based & fully automated pulse checks and profit from unique reports, analytics and results in real-time.

c_section_title_element

Use within: Body -> c_section -> c_block-container -> c_2columns (if necessary) -> ...

Variants available
(via symbol library):

  • left aligned
  • centered with CTA
  • centered without CTA

Track your success

Real-time results, analytics and reports highlight and track change within your organisation as it happens.

Stop guessing, start asking

Access a science-based catalogue of 340 algorithm-powered pulse checks for unlimited surveys & insights.

Make meaningful changes

atwork makes implementing proven recommendations a breeze, by putting all necessary information at your disposal.

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

c_card_white / c_card_blue

Use within: Body -> c_section -> c_block-container -> c_2columns (if necessary) -> ...

Variants available
(via symbol library):

  • c_card_white_no-icon
  • c_card_blue_no-icon

Combo classes:

  • center-vertically : centers content vertically in the card.
  • margin-right : adds 24px of margin on the right.

We believe that by unlocking each person's full potential, organisations ultimately win.

atwork

Aktives Feedback erhalten durch pulse checks der atwork suite
Aktives Feedback erhalten durch pulse checks der atwork suite
Aktives Feedback erhalten durch pulse checks der atwork suite

c_quote-block

Use within: Body -> c_section -> c_block-container -> c_columns (if necessary) -> ...

c_circle-image

Use within: Body -> c_section -> c_block-container -> c_columns (necessary, always!) -> ...

Variants:

  • c_circle-image_mint
  • c_circle-image_blue
  • c_circle-image_magenta

This is the default text value for a symbol field

This is the default text value for a symbol field

Ich möchte kontaktiert werden

c_cta_atwork-blue

Classes:

c_cta-wrapper: centers the content

Combo classes:

black: text in black

This is the default text value for a symbol field

c_media-logos_section

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

c_spotlight-slider

Use within: Body -> c_section -> c_block-container -> c_columns () -> ...

Comment:

Element is not a symbol just yet. If we decide to use it again exactly the same way, let's convert it into a symbol. If it stays a isolated element, this is not necesary.

back button magenta

Zielgerichtete Massnahmen definieren

Ergreifen Sie auf der Basis des eingeholten Feedbacks darauf abgestimmte, zielgerichtete Massnahmen. Werden Sie mit Massnahmen aktiv in der Verbesserung ausgewählter und von der Software in Echtzeit hervorgehobenen Bereiche.

Wissenschaftlich fundierte und personalisierte Handlungsempfehlungen | Demnächst verfügbar

Massnahmen können verschiedenen Formen annehmen und die Intensität der Intervention ergibt sich aus dem Reporting des Feedbacks. Wir unterstützen Sie durch zielgerichtete, personalisierte Handlungsempfehlungen (Nudges) sowie Aktionspläne, die auf arbeitspsychologischen und soziologische Erkenntnissen basieren.

Aktives Feedback erhalten durch pulse checks der atwork suite

Zielgerichtete Massnahmen definieren

Ergreifen Sie auf der Basis des eingeholten Feedbacks darauf abgestimmte, zielgerichtete Massnahmen. Werden Sie mit Massnahmen aktiv in der Verbesserung ausgewählter und von der Software in Echtzeit hervorgehobenen Bereiche.

Wissenschaftlich fundierte und personalisierte Handlungsempfehlungen | Demnächst verfügbar

Massnahmen können verschiedenen Formen annehmen und die Intensität der Intervention ergibt sich aus dem Reporting des Feedbacks. Wir unterstützen Sie durch zielgerichtete, personalisierte Handlungsempfehlungen (Nudges) sowie Aktionspläne, die auf arbeitspsychologischen und soziologische Erkenntnissen basieren.

Aktives Feedback erhalten durch pulse checks der atwork suite

Zielgerichtete Massnahmen definieren

Ergreifen Sie auf der Basis des eingeholten Feedbacks darauf abgestimmte, zielgerichtete Massnahmen. Werden Sie mit Massnahmen aktiv in der Verbesserung ausgewählter und von der Software in Echtzeit hervorgehobenen Bereiche.

Wissenschaftlich fundierte und personalisierte Handlungsempfehlungen | Demnächst verfügbar

Massnahmen können verschiedenen Formen annehmen und die Intensität der Intervention ergibt sich aus dem Reporting des Feedbacks. Wir unterstützen Sie durch zielgerichtete, personalisierte Handlungsempfehlungen (Nudges) sowie Aktionspläne, die auf arbeitspsychologischen und soziologische Erkenntnissen basieren.

Aktives Feedback erhalten durch pulse checks der atwork suite
back button magenta

c_tabs

Keep in mind: this element uses custom code to work – if it is added to a new page, the custom code has to be added to the page's "head" section using the <script> </script> tags.