@frankhoodbs/bicolor-background-cmp

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