Pixelstrap - Rica Document

Basic UI Elements

Buttons

Preview
tsx

read more read more read more read more read more read more read more read more read more

    
  import Link from "next/link";

  <div>
   <Link href="#" > <a className="btn btn-gradient btn-pill color-1">read more</a> </Link>
   <Link href="#" > <a className="btn btn-gradient btn-pill color-2">read more</a> </Link>
   <Link href="#" > <a className="btn btn-light-bg btn-pill color-2"><span>read more</span></a> </Link>
   <Link href="#" > <a className="btn btn-white btn-pill color-1"> <span>read more</span></a> </Link>
   <Link href="#" > <a className="btn btn-solid color-3 btn-flat">read more</a> </Link>
   <Link href="#" > <a className="btn btn-gradient  btn-flat color-4">read more</a> </Link>
   <Link href="#" > <a className="btn btn-light-bg color-3 btn-flat">read more</a> </Link>
   <Link href="#" > <a className="btn btn-gradient color-4">read more</a> </Link>
   <Link href="#" > <a className="btn btn-dashed btn-pill color-1"> <span>read more</span></a> </Link>
  </div>

Title modules

Title 1

Preview
tsx

rica

awesome serviceService

                                    
<div className="title-3">
  <span className="title-label">rica</span>
  <h2>awesome service<span>Service</span></h2>
  <hr>
</div>

Auto height adjustment

Ratio

Ratio Classes: Change your image proportion by just adding class

If you use image as background than add class ".bg-img" in image and add below class in parent.

.ratio_40 - 40%
.ratio_45 - 45%
.ratio_50 - 50%
.ratio_68 - 68%
.ratio2_1 - 50%
.ratio2_3 - 60%
.ratio3_2 - 66.66%
.ratio_landscape - 75%
.ratio_square - 100%
.ratio_asos - 127.77%
.ratio_portrait - 150%
.ratio1_2 - 200%

  

import { Container, Row, Col } from "reactstrap";
import Img from "../../../utils/BackgroundImageRatio";

<Row className="portfolio-section zoom-gallery-multiple gy-md-4 gy-3">
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/1.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/banner-image.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/3.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/4.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
</Row>

Ratio - "ratio_square"

Preview
tsx

  
import { Container, Row, Col } from "reactstrap";
import Img from "../../../utils/BackgroundImageRatio";

<Row className="portfolio-section ratio_square gy-md-4 gy-3">
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/1.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/banner-image.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/3.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/4.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
</Row>

Ratio - "ratio_portrait"

Preview
tsx

  
import { Container, Row, Col } from "reactstrap";
import Img from "../../../utils/BackgroundImageRatio";

<Row className="portfolio-section ratio_portrait gy-md-4 gy-3">
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/1.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/banner-image.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/3.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
  <Col lg="3" sm="6" className="grid-item ">
  <div className="grid-box">
    <div className="overlay">
      <div className="portfolio-image">
        <Img src="/assets/images/4.jpg" className="bg-img" />
      </div>
    </div>
  </div>
  </Col>
</Row>

Icons

FontAwesome

Rica have mainly used FontAwesome Icons. FontAwesome icons available in FontAwesome.com/icons, other icons are available in svg file

how to use FontAwesome font

You can place Font Awesome icons just about anywhere using a style prefix and the icon’s name.
To reference an icon, you need to know two bits of information. 1) its name, prefixed with fa- (meaning “font awesome” naturally!) and 2) the style you want to use’s corresponding prefix**.

Preview
tsx

  
  <div class="fluid-container pt-4 demo-icons">
    <i class="fas fa-map-marker-alt"></i>
    <i class="fas fa-phone-alt"></i>
    <i class="fas fa-envelope"></i>
    <i class="fas fa-globe"></i>
  </div>

how to use Feather icon

Firstly you have to run one command which is given bellow :

import { Settings, Home, Lock } from 'react-feather';

As you see our given demo.
See the complete list of icons at feathericons.com.

Preview
tsx

  
  import { Settings, Home, Lock } from 'react-feather';
  <div class="fluid-container pt-4 demo-icons">
    <Lock />
    <Settings />
    <Home />
  </div>

Charts

Apex Charts Example

Preview
tsx

  
import Chart from "react-apexcharts";

const overviewChartData = {
  options: {
    chart: {
      type: 'area',
      dropShadow: {
        enabled: true,
        top: 10,
        left: 0,
        blur: 3,
        color: '#720f1e',
        opacity: 0.15,
      },
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: false,
      },
    },
    markers: {
      strokeWidth: 4,
      strokeColors: '#ffffff',
      hover: {
        size: 9,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
      lineCap: 'butt',
      width: 4,
    },
    legend: {
      show: false,
    },
    colors: ['#ff5c41'],
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.5,
        opacityTo: 0.4,
        stops: [0, 90, 100],
      },
    },
    grid: {
      xaxis: {
        lines: {
          borderColor: 'transparent',
          show: false,
        },
      },
      yaxis: {
        lines: {
          borderColor: 'transparent',
          show: false,
        },
      },
      padding: {
        right: -112,
        bottom: 0,
        left: 15,
      },
    },
    responsive: [
      {
        breakpoint: 1200,
        options: {
          grid: {
            padding: {
              right: -95,
            },
          },
        },
      },
      {
        breakpoint: 992,
        options: {
          grid: {
            padding: {
              right: -69,
            },
          },
        },
      },
    ],
    yaxis: {
      labels: {
        formatter: function (value) {
          return value + 'K';
        },
      },
      axisBorder: {
        low: 0,
        offsetX: 0,
        show: false,
      },
      axisTicks: {
        show: false,
      },
      crosshairs: {
        show: false,
      },
    },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      range: undefined,
      axisBorder: {
        low: 0,
        offsetX: 0,
        show: false,
      },
      axisTicks: {
        show: false,
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#ff5c41',
          width: 1,
          dashArray: 0,
        },
      },
    },
    tooltip: {
      formatter: undefined,
    },
  },
  series: [
    {
      name: '$2530.00',
      data: [20, 25, 20, 30, 20, 50, 30, 35, 25, 60, 0],
    },
  ],
};

const SalesOverview = () => {
    <Chart options={overviewChartData?.options} series={overviewChartData?.series} id="overviewchart" type="area" height={280} />
  );
};

export default SalesOverview;

  
  <!-- apexchart js-->
  <script src="../assets/js/chart/apex-chart/apex-chart.js"></script>
  
  <script>
  var options = {
    series: [{
        name: '$2530.00',
        data: [20, 25, 20, 30, 20, 50, 30, 35, 25, 60, 0]
    }],
    chart: {
        height: 280,
        type: 'area',
        dropShadow: {
            enabled: true,
            top: 10,
            left: 0,
            blur: 3,
            color: '#720f1e',
            opacity: 0.15
        },
        toolbar: {
            show: false
        },
        zoom: {
            enabled: false
        },
    },
    markers: {
        strokeWidth: 4,
        strokeColors: "#ffffff",
        hover: {
            size: 9,
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth',
        lineCap: 'butt',
        width: 4,
    },
    legend: {
        show: false
    },
    colors: ["#ff5c41"],
    fill: {
        type: 'gradient',
        gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.5,
            opacityTo: 0.4,
            stops: [0, 90, 100]
        }
    },
    grid: {
        xaxis: {
            lines: {
                borderColor: 'transparent',
                show: false,
            }
        },
        yaxis: {
            lines: {
                borderColor: 'transparent',
                show: false,
            }
  
        },
        padding: {
            right: -112,
            bottom: 0,
            left: 15
        }
    },
    responsive: [{
        breakpoint: 1200,
        options: {
            grid: {
                padding: {
                    right: -95,
                }
            },
        },
    },
    {
        breakpoint: 992,
        options: {
            grid: {
                padding: {
                    right: -69,
                }
            },
        },
    }
    ],
    yaxis: {
        labels: {
            formatter: function (value) {
                return value + "K";
            }
        },
        axisBorder: {
            low: 0,
            offsetX: 0,
            show: false,
        },
        axisTicks: {
            show: false,
        },
        crosshairs: {
            show: false,
        },
    },
    xaxis: {
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",],
        range: undefined,
        axisBorder: {
            low: 0,
            offsetX: 0,
            show: false,
        },
        axisTicks: {
            show: false,
        },
        crosshairs: {
            show: true,
            position: 'back',
            stroke: {
                color: '#ff5c41',
                width: 1,
                dashArray: 0,
            },
        },
    },
    tooltip: {
        formatter: undefined,
    },
  };
  
  var chart = new ApexCharts(document.querySelector("#overviewchart"), options);
  chart.render();
  </script>

Maps

Google Map

Preview
tsx

  
import Google from "../../../../components/listing/gridView/map/GoogleMap";

const GoogleMap = () => {
  return (<Google />);
  };

export default GoogleMap;

Leaflet Map

Preview
tsx

  
import React, { Fragment} from "react";
import { MapContainer } from "react-leaflet/MapContainer";
import { TileLayer } from "react-leaflet/TileLayer";
import "../../../../node_modules/leaflet/dist/leaflet.css";

const LeafletMap = () => {

  return (
    <Fragment>
      {display && (
        <MapContainer
          className="jvector-map-height"
          style={{ height: "100%", width: "100%" }}
          zoom={13}
          center={[51.505, -0.09]}
          attributionControl={true}
          zoomControl={true}
          doubleClickZoom={true}
          scrollWheelZoom={true}
          dragging={true}
          animate={true}
          easeLinearity={0.35}>
          <TileLayer attribution="© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </MapContainer>
      )}
    </Fragment>
  );
};

export default LeafletMap;

pigeon Map

Preview
tsx

  
import { Map, Marker } from "pigeon-maps";
import React from "react";

const PigeonMap = () => {
return (
  <Map defaultCenter={[50.879, 4.6997]} defaultZoom={11}>
    <Marker width={50} anchor={[50.879, 4.6997]} />
  </Map>
);
};

export default PigeonMap;