Options in "Appearance" tab

Container: Containers Limit the maximum width of content. Your website has a default maximum width, for example 1280px. When browser windows is larger, the content is horizontally centered and margins left and right applied:

  1. Default: Container for default maximum width
  2. No Frame: Use this options when you insert this Element into a Grid or another Component, for Example Panel or Section. Note: When you choose "No Frame"  all other Settigns form the appearance tab are ignored
  3. Narrow: Container with smaller maximum width. It might be uses to create single-column Lead Texts or CTAs
  4. Wider: Sometimes you want to break out of the regular maximum width.
  5. Fullwidth: The content will expand to 100% width but have some padding left and right
  6. Fullwidth (no Paddings): The content will expand to 100% width and have no padding at all. 
  7. Empty: This options is rarely needed.

Background color: Add a Background color to your content-Element. If you need more options, for example Backorung Image, Parallax or Video use the Q3i Component: Section

Panel:  Here you have some presets for Panels that can be applied. If you need more options use the Q3i Component: Panel

Outer space before & after: They correspond with the css property "margin"

Inner space before & after: They correspond with the css property "padding"

The Difference between both is, that the Inner space is applied within the optional backround and outer space is not. In order to illustrate the difference we have added alternating Light grey and Dark grey background to the elements below.

Content Appearance Example (HTML-view)


<div class="section section_narrow section_bg-dark-grey dark section_padding-before-large section_padding-after-large">
    <div class="section__inner">
       <div class="panel panel_padding-small panel_bg-black dark">
             <h5>Here comes the contents<h5>
             <p>At vero eos et accusam et justo duo dolores et ea rebum.<p>
       </div>
    </div>
</div>

Content Appearance Example (Visual Result)

Here comes the contents

At vero eos et accusam et justo duo dolores et ea rebum.

Inner space before & Inner space after

Inner space before: None, Inner space after: None

 

Inner space before: Medium, Inner space after: Medium

 

Inner space before: Large, Inner space after: Large

 

Outer space before & Outer space after

Outer space before: Medium, Outer space after: Medium

 

Outer space before: Large, Outer space after: Large

 

Background options

none
white

 

light-grey
medium-grey

 

dark-grey

 

black

 

primary

 

secondary