Add card, top bar and workspace description

beyond-essence/design/card.md

@@ -0,0 +1,117 @@
+---
+layout: beyond-essence
+header_image: private/main.jpg
+title: Workspace card
+background_image: index.jpg
+---
+The card UI design is used on each view in the cockpit.
+
+{% image_custom image="/assets/img/pages/essence/card-single.png" width="100" %}
+
+The card is used to structure the content or the function semantically on each view. This helps the user to scan quickly over the content which makes it easier for him to find the function he is searching for.
+
+The most common usage is the arrangement in a one-column layout where each card follows another.
+
+{% image_custom image="/assets/img/pages/essence/card-row.png" width="100" %}
+
+
+## Structure
+
+A card is characterized by the following elements:
+
+* a headline 
+* and the content/functionality.
+
+
+A card is a mandatory UI element. Each view contains at least one card. Even our empty states, logins, and dashboard content are placed on a card.
+
+## Layout types
+
+### One column layout - MOST COMMON
+
+With several cards in view.
+
+{% image_custom image="/assets/img/pages/essence/card-one-column-layout.png" width="100" %}
+
+### One third column layout - MOST COMMON
+
+This layout will be used to split primary content - left side, from secondary content - right side.
+
+Only two cards are in usage to keep the focus on the left content. Use this pattern if you have a lot of information that relates to each other. If you want to give the card more structure use the line element, which splits the card into different areas.
+
+{% image_custom image="/assets/img/pages/essence/card-one-third-column-layout.png" width="100" %}
+
+If you have much information that is not related to each other than use several cards in each column. This helps the user to focus on one feature and it keeps the view well structured and organized.
+
+{% image_custom image="/assets/img/pages/essence/card-one-third-column-layout-2.png" width="100" %}
+
+### Two-column mixture layout - EXPERIENCED USAGE
+
+Use two equal cards next to each other to show that the content on both cards has the same relevance. To ensure that both cards have the same height you also need to keep the content amount and UI the same.
+
+This layout type should be used rarely and only in cooperation with experienced UX/UI designers.
+
+{% image_custom image="/assets/img/pages/essence/card-two-column-layout.png" width="100" %}
+
+### One column layout - MOST COMMON
+
+With one card in view.
+
+Single cards are used primarily for empty states or overviews. They don't have a card title.
+
+{% image_custom image="/assets/img/pages/essence/card-one-column-one-card-layout.png" width="100" %}
+
+## Card headline
+
+A typical card starts always with a title. Define a descriptive title to summarise the content of the card. If the functionality differs a lot from each other, use another card to add your functionality. With this approach is guaranteed that the user can follow your content easily.
+
+The font-size is set to 19.6px and is colored with our tertiary CI color.
+
+{% image_custom image="/assets/img/pages/essence/card-title.png" width="100" %}
+
+A card headline is a mandatory UI element with one exception:
+
+### Overview pages and empty states
+
+Overview pages and empty states are primarily used without any other content above or below this card. As the table is self-explanatory and described by the workspace title you can use the card without a workspace headline.
+
+## Elements to structure the card
+
+You can structure your content within a card with a grid, spacings, or a line element.
+
+### Line element
+
+If you have functionality which belongs to each other, but you need an optical separator to get a better structure and overview you can use our line element which is a simple <hr />
+
+{% image_custom image="/assets/img/pages/essence/card-line-element.png" width="100" %}
+
+### Spacing
+
+Every component or content listed on the card shall get a default spacing of 30px. It is important to pre-define that spacing to keep the gap between e.g. form groups consistent in the whole cockpit.
+
+We solved that by using a component called StackPanel which wraps components inside a card. You only need to define once the spacing and it will be applied between all listed components.
+
+{% image_custom image="/assets/img/pages/essence/card-stack-panel.png" width="100" %}
+
+	<StackPanel>
+		<p>Lorem ipsum...</p>
+		<p>Lorem ipsum...</p>
+	</StackPanel> 
+	// Every component listed inside the StackPanel gets a spacing between each other 
+	// Use e.g. 'spacing={20}' for defining customised spacing (default -> 30px) 
+	// Use e.g. 'orientation="vertical"' for columns next to each other (default -> horizontal)
+
+A horizontal spacing and vertical spacing are needed in several places in the cockpit.
+{% image_custom image="/assets/img/pages/essence/card-spacing.png" width="100" %}
+
+### Grid
+
+The layout you use on the card depends on your content. Some content can be used in a horizontal layout, some of them need a box layout if you need to group content within the card (e.g. App overview page). All have the commonality of responsive behavior, and a defined spacing for horizontal and vertical placed elements.
+
+## Responsive behavior
+
+All cards, the content inside and the cockpit itself are responsive so that the user can see all functions on wide screens > 1900px and small screens >=768px (e.g. iPad portrait format).
+
+## Design
+
+The card comes with a white background and rounded edges. A shadow effect behind the card increases the contrast to the beige background and helps to separate each card. Inner padding of `40px` gives enough room for content inside the card which makes the look of the card lighter and easy to scan.

beyond-essence/design/topbar.md

@@ -0,0 +1,76 @@
+---
+layout: beyond-essence
+header_image: private/main.jpg
+title: Top bar
+background_image: index.jpg
+---
+The top bar is used to display the main actions of a page. The right side is used for buttons that have an impact on the current page content, the left side for more general actions.
+
+The amount and order of the buttons and links can differ on particular pages.
+
+{% image_custom image="/assets/img/pages/essence/Topbar - Save content - Default.png" width="100" %}
+
+## Structure
+
+The top bar is characterized by the following elements:
+
+* The sticky white area at the top of the page
+* Primary action elements on the right side
+* Secondary actions elements on the left side
+* Flexible usage of the number of action elements
+
+
+## Usage
+
+* Place Primary/Secondary button and Cancel button on the right side: In the top bar as well as at [the bottom.](https://epages.atlassian.net/wiki/spaces/~kmueller/pages/2397274278/Top+bar#The-bottom-bar "https://epages.atlassian.net/wiki/spaces/~kmueller/pages/2397274278/Top+bar#The-bottom-bar")
+
+* List _Save_ or _Add_ last in order to ‘end with the conclusion’ and in order to stay consistent with _Previous/Next_ buttons
+
+* We do not use _Back_ buttons but _Cancel_ buttons.
+
+* The wording for the three buttons mentioned is globally the same
+
+* The top bar displays two different types of primary action elements:
+
+
+### _Save_ button always comes with a _Cancel_ button
+{% image_custom image="/assets/img/pages/essence/Topbar - Save content - Default.png" width="100" %}
+
+### _Add_ button always comes as a single button
+{% image_custom image="/assets/img/pages/essence/Topbar - Add content - default.png" width="100" %}
+
+### Top bar without primary action elements
+
+If you create views where the user can’t add new content pages like products or marketing coupons you can use the top bar without primary action elements.
+{% image_custom image="/assets/img/pages/essence/Topbar - no primary buttons.png" width="100" %}
+
+### View without top bar
+
+Depending on your content and structure there can be the need to use the views without a top bar. This can happen if you want to guide the user through a landing page or dashboard.
+
+## Secondary action elements
+
+### _View your shop_ link
+
+The _View your shop_ link is used in the top bar if the content in this view relates to the shop and website features. Use this link to give the user quick access to the customer’s web page.
+{% image_custom image="/assets/img/pages/essence/topbar-view your shop link.png" width="100" %}
+
+### _Related apps_ link
+
+Use this link to give the user quick access to the apps which relate to the content on this view. A pop-up will open where the user can activate or deactivate the application.
+{% image_custom image="/assets/img/pages/essence/Topbar - Save content.png" width="100" %}
+
+### Top bar without secondary action elements
+
+The cockpit contains workspace areas where the user can set up a shop or website related content. Administrative settings that relate to the cockpit only don’t get a secondary action element. For example the ‘Account settings’ page
+{% image_custom image="/assets/img/pages/essence/Topbar - Save content - no secondary actions.png" width="100" %}
+
+## The bottom bar
+
+The bottom bar is only used in an edit view.
+
+Place _Delete_ to the left bottom corner so that it is separated from the main buttons. It only appears after the user has been added/changed and then saved content for the first time.
+
+## Design
+
+The top bar comes with a white background, and a gray border on the bottom of the top bar to separate this area from the content area. The top bar has a fixed height of 73px and needs to be aligned always with the logo area in the sidebar.

beyond-essence/design/workspace.md

@@ -0,0 +1,44 @@
+---
+layout: beyond-essence
+header_image: private/main.jpg
+title: The workspace in the merchant's cockpit
+background_image: index.jpg
+---
+The view in which the merchant interacts most is characterized through a pre-defined order of several UI elements:
+
+* Top bar
+* Breadcrumb
+* Workspace title
+* Workspace card
+* Bottom bar
+
+Not all elements are used at the same time. The most flexible UI element are the cards which can be placed in different layouts.
+{% image_custom image="/assets/img/pages/essence/workspace.png" width="100" %}
+
+## Top bar
+
+The top bar is used for action elements.
+
+The counterpart to the bar on top is the bottom bar which contains almost the same elements as the top bar. With this pattern, we ensure that the user has short click ways.
+
+[More details about top bar](/beyond-essence/design/topbar/)
+
+## Breadcrumb
+
+The breadcrumb is secondary navigation within a website. The breadcrumb navigation on the view offers users the option of finding their way back to the home page or quickly reaching other levels of the website in the form of internal links.
+
+The breadcrumb is a mandatory element.
+
+## Workspace title
+
+Describe the content of the workspace as accurately as possible with as few words as possible.
+
+The page title is never part of a card, but is standing on the top of all cards of this page!
+
+## Workspace card
+
+[More details about workspace card](/beyond-essence/design/card/)
+
+## Bottom bar
+
+[More details about bottom bar](/beyond-essence/design/topbar/)