diff --git a/source/components/editing/card.rst b/source/components/editing/card.rst
new file mode 100644
index 0000000..e4114b5
--- /dev/null
+++ b/source/components/editing/card.rst
@@ -0,0 +1,86 @@
+Card
+====
+
+Purpose
+-------
+
+A card serves as overview and an entry point for more detailed information and can
+offer direct access to the most important actions on an item.
+
+Example
+-------
+
+Guidelines
+----------
+
+Is this the right control
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+- Don't use a card to display long texts.
+- Cards can be used to display items with different content types, e.g. images
+ text, videos.
+- Don't use cards for content that should be directly comparable, use a
+ table view or a grid view for that.
+- If you would show more than 20 cards at a time, or if the user would have to scroll
+ for more than three screen heights to see all of them, consider using a list instead.
+- Don't use cards with text input elements.
+- If your cards consist of just one image a grid with overlay actions
+ might be more suitable.
+
+Behavior
+~~~~~~~~
+
+|desktopicon| Desktop
+^^^^^^^^^^^^^^^^^^^^^
+
+Cards are responsive. They resize to fit into the available
+space.
+
+.. raw:: html
+
+
+
+
+It is recommended that you adjust the number of cards displayed next to each other
+depending on the available space.
+
+.. raw:: html
+
+
+
+|mobileicon| Mobile
+^^^^^^^^^^^^^^^^^^^
+
+- Cards only resize to orientation changes.
+- The number of columns only adjust to orientation changes.
+
+Appearance
+~~~~~~~~~~
+
+It is recomended that you use the standard card layout for consistency, but cards can have
+a lot of different layouts.
+
+ .. figure:: /img/Card6.qml.png
+ :alt: Default card layout
+
+ Default card layout with a header image, text content and optional actions.
+
+The only common requirement is the container around it. While cards can have a lot of
+different layouts, each should focus only on one bit of information or content.
+
+Here are some general recommendations for card layouts:
+
+- Use images, icons or video elements to create visually immersive cards.
+ Feel free to use different text sizes, cards are not a control for plain text.
+
+- Use a well known aspect ratio for a header image
+
+ .. image:: /img/Card5.qml.png
+ :alt: Cards with 16x9, 4x3, 1x1 header image aspect ratio
+
+- Add a padding of at least largeSpacing to the card, except for videos
+ and images. These can ignore the padding and span the entire width or
+ height of a card.
+
+ .. image:: /img/Card2.qml.png
+ :alt: Padding for text and buttons
diff --git a/source/components/editing/index.rst b/source/components/editing/index.rst
index d613936..cfca402 100644
--- a/source/components/editing/index.rst
+++ b/source/components/editing/index.rst
@@ -1,51 +1,54 @@
Editing and manipulation
========================
.. toctree::
:maxdepth: 1
:titlesonly:
:hidden:
+ card
checkbox
combobox
date
dropdown
grid
lineedit
list
radiobutton
slider
spinbox
swipelistitem
tableview
textedit
togglebutton
tree
Editing and Manipulation considers the behaviors that result in persistent changes to user’s stored information. Behaviors in this layer can often be recognized by the following traits: they result in persistent, stored changes; they require an implicit or explicit save operation; and they typically require validation of the input data.
Selection
~~~~~~~~~
+
+* :doc:`card`
* :doc:`checkbox`
* :doc:`combobox`
* :doc:`dropdown`
* :doc:`grid`
* :doc:`list`
* :doc:`radiobutton`
* :doc:`swipelistitem`
* :doc:`togglebutton`
* :doc:`tree`
Unconstrained input
~~~~~~~~~~~~~~~~~~~
* :doc:`lineedit`
* :doc:`tableview`
* :doc:`textedit`
Constrained input
~~~~~~~~~~~~~~~~~
* :doc:`date`
* :doc:`slider`
* :doc:`spinbox`
diff --git a/source/components/index.rst b/source/components/index.rst
index d2d1347..e5152ca 100644
--- a/source/components/index.rst
+++ b/source/components/index.rst
@@ -1,80 +1,82 @@
Components
==========
.. toctree::
:maxdepth: 1
:titlesonly:
:hidden:
formating/index
navigation/index
assistance/index
editing/index
Formating
---------
* :doc:`formating/groupbox`
* :doc:`formating/splitter`
Navigation
----------
* :doc:`navigation/actionbutton`
* :doc:`navigation/commandlink`
* :doc:`navigation/contextdrawer`
* :doc:`navigation/contextmenu`
* :doc:`navigation/dialog`
* :doc:`navigation/globaldrawer`
* :doc:`navigation/menubar`
* :doc:`navigation/pushbutton`
* :doc:`navigation/tab`
* :doc:`navigation/toolbar`
User assistance
---------------
User Assistance guidance considers interface elements that inform users of the application’s activity and status, as well as elements dedicated to user education. This includes online help, error alerts, and status alerts.
Notification
~~~~~~~~~~~~
* :doc:`assistance/inline`
* :doc:`assistance/message`
* :doc:`assistance/progress`
* :doc:`assistance/statusbar`
Help
~~~~
* :doc:`assistance/tooltip`
Editing and manipulation
------------------------
Editing and Manipulation considers the behaviors that result in persistent changes to user’s stored information.
Selection
~~~~~~~~~
+
+* :doc:`editing/card`
* :doc:`editing/checkbox`
* :doc:`editing/combobox`
* :doc:`editing/dropdown`
* :doc:`editing/grid`
* :doc:`editing/list`
* :doc:`editing/radiobutton`
* :doc:`editing/swipelistitem`
* :doc:`editing/togglebutton`
* :doc:`editing/tree`
Unconstrained input
~~~~~~~~~~~~~~~~~~~
* :doc:`editing/lineedit`
* :doc:`editing/tableview`
* :doc:`editing/textedit`
Constrained input
~~~~~~~~~~~~~~~~~
* :doc:`editing/date`
* :doc:`editing/slider`
* :doc:`editing/spinbox`
diff --git a/source/img/Card2.qml.png b/source/img/Card2.qml.png
new file mode 100644
index 0000000..d54d013
Binary files /dev/null and b/source/img/Card2.qml.png differ
diff --git a/source/img/Card5.qml.png b/source/img/Card5.qml.png
new file mode 100644
index 0000000..0bdea3b
Binary files /dev/null and b/source/img/Card5.qml.png differ
diff --git a/source/img/Card6.qml.png b/source/img/Card6.qml.png
new file mode 100644
index 0000000..ef70a97
Binary files /dev/null and b/source/img/Card6.qml.png differ