############
Area Classes
############
Play with classes on Areas to create unique content style

.. index:: Classes; Area

*******************************
Customize Areas through classes
*******************************
* Concrete5 introduces custom classes for blocks and Areas. This is great
  news for designers who can now create skins for it.

* Supermint offers classes of **colors**, **spacing** and **topics** for Areas. The
  three categories can be mixed between them, so you can add a class for
  color, one for spacing and finally a topic if necessary. Understand quickly
  by looking at the following examples.

.. index:: Classes; Area-color

Color classes
-------------
There are eight classes available for Area:

1. ``area-primary``
2. ``area-secondary``
3. ``area-tertiary``
4. ``area-quaternary``
5. ``page-content-style`` : Take the design of page content
   (here white with a small grey border)
6. ``area-white``
7. ``area-black``
8. ``area-body`` : Take the pattern and color of the body

.. image:: ./figures/area_classes/area-colors1.jpg

.. image:: ./figures/area_classes/area-colors2.jpg

.. image:: ./figures/area_classes/custom-classes-on-whole-area.jpg


.. index:: Classes; Area-other

Other classes
-------------
Take color defined in the `color customization <./02-color-customization.html>`_ .

.. index:: Area; spacing

Spacing classes
---------------
Four classes are available to add padding into an Area:

1. small: ``area-space-s``
2. medium: ``area-space-m``
3. large: ``area-space-l``
4. extra large: ``area-space-xl``

.. image:: ./figures/area_classes/area-space-s-m.jpg

.. image:: ./figures/area_classes/area-space-l-xl.jpg

.. index:: Area; topic

Topics classes
--------------

Six classes are available to add topics into an Area :

1. ``topic-get-in-touch``
2. ``topic-idea``
3. ``topic-help``
4. ``topic-config``
5. ``topic-news``
6. ``topic-conversation``

Below topics classes are applied with both **space-s** class and
a **secondary** or **tertiary** color class.

.. image:: ./figures/area_classes/topics-class1.jpg

.. image:: ./figures/area_classes/topics-class2.jpg

.. image:: ./figures/area_classes/topics-class3.jpg

-----

Original reference: web.archive.org `page <https://web.archive.org/web/20180212144337/http://supermint3.myconcretelab.com:80/index.php/documentation/area-classes>`_