Bicolor Background component

componente per la generazione contenuti a sfondo bi-color suddiviso orizzontalmente.

component for generating content with a bi-color background divided horizontally.

API Reference

Props

Type definition

type Classes =
  | string
  | Record<string, boolean>
  | (string | Record<string, boolean>)[];

| Name | Type | Description | |:-----------------------------------|:----------|:----------------------------------------------------------------------------------------| | data-bootstrap-container-classes | Classes | default is ['container']. CSS Classes for cotent wrapper. | | data-bootstrap-row-classes | Classes | default is ['row justify-content-center']. CSS Classes for cotent wrapper's rows. | | data-bootstrap-col-classes | Classes | default is ['col-12 col-md-10']. CSS Classes for cotent wrapper's rows. | | data-bg-color-wrapper-like-root | boolean | default is false. CSS Classes for cotent wrapper's rows. | | data-background-color | boolean | default is false. CSS Class for the second half of the background. |

CSS variables

| Name | default | Description | |:---------------------------------------------|:--------------|:---------------------------------| | --bicolor-background-first-color-height | 50% | .color-1 , .color-2 used in flex | | --bicolor-background-bg-color | #1c3775 | .color-2 background-color | | --bicolor-background-wrapper-padding | 0 | .wrapper padding | | --bicolor-background-wrapper-border-radius | 0 | .wrapper border-radius | | --bicolor-background-wrapper-bg-color | transparent | .wrapper |

Usage/Examples

<bicolor-background-cmp>
  <div class="p-10">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
  </div>
</bicolor-background-cmp>

Screenshots