Theme Components

This is a quick showcase of some of the main Bootstrap components that come with this template.

Documentation
Components
Accordion

Block components used to create an Accordion using Bootstrap' collapse plugin.

Option one

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Paypal
Pay on delivery
import { Card, Accordion, useAccordionButton } from "react-bootstrap"

const CustomToggle = ({ children, eventKey }) => {
    const decoratedOnClick = useAccordionButton(eventKey)
    return (
      <span
        style={{ cursor: "pointer" }}
        className="text-primary accordion-link"
        onClick={decoratedOnClick}
      >
        {children}
      </span>
    )
  }
return (
<div role="tablist">
    <Accordion defaultActiveKey="1">
        <Card className="border-0 shadow mb-3">
            <Card.Header className="bg-primary-100 border-0 py-0">
                <CustomToggle eventKey="0">Option one</CustomToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Card.Body className="py-5">
                    <p className="text-muted">...</p>
                    <p className="text-muted mb-0">...</p>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card className="border-0 shadow mb-3">
            <Card.Header className="bg-primary-100 border-0 py-0">
                <CustomToggle eventKey="1">Paypal</CustomToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="1">
                <Card.Body className="py-5">
                    <p className="text-muted">...</p>
                    <p className="text-muted mb-0">...</p>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
    </Accordion>
</div>
)
Cards

This theme comes with a variety of card styles useful for directory and marketplace websites.

Restaurant
Blue Hill

Blue Hill

Restaurants

Cupidatat excepteur non dolore laborum et quis nostrud veniam dolore deserunt. Pariatur dolore ut in elit id nulla....

ByBianca Briggs

Restaurant,Contemporary

Plutorque

Plutorque

Restaurant

Proident irure eiusmod velit veniam consectetur id minim irure et nostrud mollit magna velit. Commodo amet proident...

ByBianca Briggs

Restaurant,Fusion

Junipoor

Junipoor

Music club

Lorem amet ex duis in et fugiat consectetur laborum eiusmod labore. Quis cupidatat et do dolor in in magna. Eu sit ...

ByBianca Briggs

Music,Techno,House

import CardRestaurant from '../../CardRestaurant'

import geoJSON from './public/content/restaurants-geojson.json'

export default () => {
    return (
        geoJSON.features.map(restaurant => 
            <CardRestaurant data={restaurant.properties} />
        )
    )
}
Room
Modern, Well-Appointed Room
...
Pamela
Modern, Well-Appointed Room

Private room

$80 per night

Cute Quirky Garden apt, NYC adjacent
...
John
Cute Quirky Garden apt, NYC adjacent

Entire apartment

$121 per night

Modern Apt - Vibrant Neighborhood!
...
Julie
Modern Apt - Vibrant Neighborhood!

Entire apartment

$75 per night

import CardRoom from '../../CardRoom'

import geoJSON from './public/content/rooms-geojson.json'

export default () => {
    return (
        geoJSON.features.map(room => 
            <CardRestaurant data={room.properties} />
        )
    )
}
Property
Modern, Well-Appointed Room
Modern, Well-Appointed Room

San Francisco

House

350 m232$150k

Cute Quirky Garden apt, NYC adjacent
Cute Quirky Garden apt, NYC adjacent

San Francisco

Apartment

85 m221$65k

Modern Apt - Vibrant Neighborhood!
Modern Apt - Vibrant Neighborhood!

San Francisco

House

350 m232$150k

import CardProperty from '../../CardProperty'

import properties from './public/content/properties.json'

export default () => {
    return (
        properties.map(property => 
            <CardProperty data={property} />
        )
    )
}
Card with a background image
Card image
New York

The big apple

Card image
Paris

Artist capital of Europe

Card image
Barcelona

Dalí, Gaudí, Barrio Gotico

import CardPoster from '../../CardPoster'

import posters from './public/content/posters.json'

export default () => {
    return (
        posters.map(poster => 
            <CardPoster data={poster} />
        )
    )
}
Blog Post
...
Travel
Escape the city today

January 16, 2016

Is am hastily invited settled at limited civilly fortune me. Really spring in extent an by. Judge but built party world...

Read more
...
Travel
Autumn fashion tips and tricks

January 16, 2016

Pellentesque habitant morbi tristique senectus. Vestibulum tortor quam, feugiat vitae, ultricies ege...

Read more
...
Living
Newest photo apps

January 16, 2016

ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibu...

Read more 
import CardPost from '../../CardPost'

import posts from './public/content/posts.json'

export default () => {
    return (
        posts.map(post => 
            <CardPost data={post} />
        )
    )
}
Review
Dec 2018
Padmé Amidala

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections

Dec 2018
Luke Skywalker

The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. 'What's happened to me?' he thought. It wasn't a dream.

Dec 2018
Princess Leia

His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table.

import CardReview from '../../CardReview'

import reviews from './public/content/reviews.json'

export default () => {
    return (
        reviews.map(review => 
            <CardReview data={review} />
        )
    )
}
Team member
Meredith Goodwin
Meredith Goodwin

CEO & Founder

Weeks Garrett
Weeks Garrett

Co-founder

Fisher Bauer
Fisher Bauer

CTO

import CardTeam from '../../CardTeam'

import teams from './public/content/teams.json'

export default () => {
    return (
        teams.map(team => 
            <CardTeam data={team} />
        )
    )
}
Testimonial
...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

Jessica Watson
...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

Jessica Watson
import CardTestimonial from '../../CardTestimonial'

import testimonials from './public/content/testimonials.json'

export default () => {
    return (
        testimonials.map(testimonial => 
            <CardTestimonial data={testimonial} />
        )
    )
}
Gallery with lightbox

A simple gallery using the React Image Lightbox as the lightbox.

React Image Lightbox is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

Visit plugin website

Supported props for Gallery component:

  • rowClasses - classes for Row element
  • colClasses - classes for Col element
  • data - images object
  • xs - extra small column size
  • sm - small column size
  • md - medium column size
  • lg - large column size
  • xl - extra large column size
import Gallery from '../components/Gallery'

import data from 'data.json'

export default () => {
    return (
        <Gallery
            rowClasses="ms-n1 me-n1"
            lg="4"
            xs="6"
            colClasses="px-1 mb-2"
            data={data.gallery}
                                
        />
    )
}
Images

Since Version 1.1, this theme uses Next.js next/image component for image optimization.

It has many features, e.g., automatically creates srcsets for your images, serves WebP versions for your Jpegs, and lazy loads the images. For more information, check out next.js docs.

We developed <CustomImage /> component for usage with next export since, by default, static export won't work without using paid external loaders. Using this component, your static export will use normal <img /> element instead of Next.js <Image /> component.

Usage of <CustomImage /> component:

You can use the same props as the next/image component has.

import Image from './components/CustomImage'

export default () => {
  return (
    <Image
      src="/some/src.jpg"
      alt="..."
      width={1080}
      height={720}
      layout="intrinsic"
      className="img-fluid card-img-top"
  />
  )
}

To setup your project for static export, following configuration is needed.

next.config.js

{
  images: {
    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    // loader: "imgix", // Uncoment this line
    // path: "", // Uncoment this line
  },
  env: {
    production_type: "server", // Change variable to "static"
  },
  // trailingSlash: true, // Uncoment this line
},

Maps

Maps inside this theme use React Leaflet and tiles from Carto Maps.

A big advantage compared to Google Maps is that these maps are free to use. For the map tiles, you can also use maps from Mapbox or OpenStreet maps.

React Leaflet website

Since Next.js doesn't support JavaScript window function, we have to load the Map component dynamically using Next.js dynamic feature. Read more about dynamic importing here.

Supported props for Map component:
  • className - classes for Map element
  • center - map center
  • zoom - zoom level
  • geoJSON - geoJSON data import
  • popupVenue - if true, the map will use Venues style (for markers and popups) instead of Rentals
  • hoverCard - here you define which listing is hovered to show hover effect on according map marker (used at /category listing pages)
Maps with multiple points

Maps that are used in the category listings show multiple points/markers. Also, popup windows are automatically attached to these points. To display this type of map, you need to provide your list of points in a GeoJSON file. These files will contain location data and accompanying data like title, description, image path, etc. See below the links to the particular GeoJSON files used in this theme.

Venues

GeoJSON file used to generate markers: restaurants-geojson.json

loading


import geoJSON from './public/content/rooms-geojson.json'
import Map from '../components/Map'

export default () => {
    return (
        <div className="map-wrapper-300 mb-3">
            <Map
                className="h-100"
                center={[51.505, -0.09]}
                zoom={14}
                popupVenue
                geoJSON={geoJSON}
            />
        </div>
    )
}
Rentals

GeoJSON file used to generate markers: rooms-geojson.json

loading


import geoJSON from './public/content/rooms-geojson.json'
import Map from '../components/Map'

export default () => {
    return (
        <div className="map-wrapper-300 mb-3">
            <Map
                className="h-100"
                center={[51.505, -0.09]}
                zoom={14}
                geoJSON={geoJSON}
            />
        </div>
    )
}
Maps with a single marker

Maps used on the detail pages do not contain popups and do not use a GeoJSON file. You pass all the data to the JavaScript function.

Single-marker map

loading


import geoJSON from './public/content/rooms-geojson.json'
import Map from '../components/Map'

export default () => {
    return (
        <div className="map-wrapper-300 mb-3">
            <Map
                className="h-100"
                center={[40.732346, -74.0014247]}
                zoom={14}
                geoJSON={geoJSON}
            />
        </div>
    )
}
Single-marker map, circle instead of the marker

loading


import geoJSON from './public/content/rooms-geojson.json'
import Map from '../components/Map'

export default () => {
    return (
        <div className="map-wrapper-300 mb-3">
            <Map
                className="h-100"
                center={[40.732346, -74.0014247]}
                circlePosition={[40.732346, -74.0014247]}
                circleRadius={500}
                zoom={14}
                geoJSON={geoJSON}
            />
        </div>
    )
}
React Select

Directory Theme uses React Select plugin for showing select input. You can customize it using props.

Visit plugin website

Most popular
Swiper

Touch-enabled JS plugin that lets you create beautiful responsive carousel sliders.

Used for the single-item carousels and also for the card carousels. You can use Swiper templates included in this template or import and customize on your own using docs for this plugin.

Visit plugin website

  • simple - if true, simple style will be used
  • cards - if true, room cards style will be used
  • propertyCards - if true, property cards style will be used
  • imgCards - if true, image cards style will be used
  • restaurantCards - if true, restaurant cards style will be used
  • className - classes for Swiper container
  • slidesPerView - slides per view at smallest size
  • effect - Swiper effect
  • allowTouchMove - if false, touch moves are disabled otherways enabled
  • spaceBetween - space between slides
  • centeredSlides - slides centering
  • roundLengths - if true, round values of slides width and height to prevent blurry texts on usual resolutions
  • loop - endless loop through slides
  • speed - speed of animation
  • parallax - parallax effect
  • breakpoints - pass breakpoints object for different behaviour on different screen sizes
  • xs - slides per view at extra small size
  • sm - slides per view at small size
  • md - slides per view at medium size
  • lg - slides per view at large size
  • xl - slides per view at extra large size
  • xxl - slides per view at at width over 1400px
  • xxxl - slides per view at at width over 1600px
  • autoplay - enables/disables autoplay
  • delay - delay for autoplay
  • pagiantion - if true, pagination bullets will shop up
  • pagiantionClass - class for pagination
  • navigation - if true, navigation arrows will shop up
  • data - pass slides object
Rooms Swiper

GeoJSON file used to generate slides: rooms-geojson.json

import Swiper from '../../Swiper'

import geoJSON from './public/content/rooms-geojson.json'

export default () => {
    return (
        <Swiper
            className="swiper-container-mx-negative pt-3 pb-5"
            perView={1}
            spaceBetween={20}
            loop
            roundLengths
            md={2}
            lg={3}
            data={geoJSONRooms.features}
            cards
        />
    )
}
Restaurants Swiper

GeoJSON file used to generate slides: restaurants-geojson.json

import Swiper from '../../Swiper'

import geoJSON from './public/content/restaurants-geojson.json'

export default () => {
    return (
        <Swiper
            className="swiper-container-mx-negative pt-3 pb-5"
            perView={1}
            spaceBetween={20}
            loop
            roundLengths
            md={2}
            lg={3}
            xl={4}
            data={geoJSONfeatures}
            restaurantCards
        />
    )
}
Swiper property cards style
import Swiper from '../../Swiper'

export default () => {
    "slides": [
        {
            "title": "Modern, Well-Appointed Room",
            "location": "San Francisco",
            "type": "House",
            "link": "detail-rooms",
            "img": "img/photo/photo-1484154218962-a197022b5858.jpg",
            "meters": "350",
            "bedrooms": "3",
            "bathrooms": "2",
            "price": "$150k"
        },
        {
            "title": "Cute Quirky Garden apt, NYC adjacent",
            "location": "San Francisco",
            "type": "Apartment",
            "link": "detail-rooms",
            "img": "img/photo/photo-1426122402199-be02db90eb90.jpg",
            "meters": "85",
            "bedrooms": "2",
            "bathrooms": "1",
            "price": "$65k"
        }
        ...
        ...
    ]
    
    return (
        <Swiper
            className="swiper-container-mx-negative pt-3 pb-5"
            perView={1}
            spaceBetween={20}
            loop
            roundLengths
            md={2}
            lg={3}
            xl={4}
            data={slides}
            propertyCards
        />
    )
}
Swiper image cards style
import Swiper from '../../Swiper'

export default () => {

    "slides": [
        {
            "title": "New York",
            "subtitle": "The big apple",
            "img": "/img/photo/new-york.jpg",
            "link": "category"
        },
        {
            "title": "Paris",
            "subtitle": "Artist capital of Europe",
            "img": "/img/photo/paris.jpg",
            "link": "category"
        },
        {
            "title": "Barcelona",
            "subtitle": "Dalí, Gaudí, Barrio Gotico",
            "img": /"img/photo/barcelona.jpg",
            "link": "category"
        },
        {
            "title": "Prague",
            "subtitle": "City of hundred towers",
            "img": "/img/photo/prague.jpg",
            "link": "category"
        }
    ]
    
    return (
        <Swiper
            className="mx-n2 pt-3 pb-5"
            perView={1}
            spaceBetween={20}
            imgCards
            loop
            roundLengths
            md={2}
            lg={4}
            data={slides}
        />
    )
}
Background Images Hero Slider

Parent element must have .position-relative and height set

import Swiper from '../../Swiper'

export default () => {

    const slides = [
            "photo-1501621965065-c6e1cf6b53e2.jpg",
            "photo-1519974719765-e6559eac2575.jpg",
            "photo-1490578474895-699cd4e2cf59.jpg",
            "photo-1534850336045-c6c6d287f89e.jpg"
    ]
    
    return (
        <Swiper
            className="hero-slider"
            wrapperClasses="dark-overlay"
            data={slides}
            simple={true}
            effect='fade'
            speed={2000}
            allowTouchMove={false}
            pagination={false}
            autoplay={true}
            delay={2000}
        />
    )
}
Avatar

Component to display your user image.

Supported props for Avatar component:
  • className - classes for Avatar element
  • size - avatar size xxl, xl, lg, sm, xs, xxs. Leave empty for default size.
  • image - image url
  • alt - image alt
  • border - if true, border will be shown around avatar.
Image
avatar-xxl/border
Image
avatar-xxl
Image
avatar-xl
Image
avatar-lg
Image
avatar
Image
avatar-sm
Image
avatar-xs
Image
avatar-xxs
Background image

Utility class that turns a <img className="bg-image"> into a background image for its background. Useful e.g. for carousels. Make sure that image's parent container and the content that should be placed over the image are relatively positioned.

Image

I have a background image

Icons - Directory

This theme also comes with a 150+ Premium SVG icons. Icons included cover mostly e-commerce, restaurant and travel niches.

You can use new Icon component to conveniently display icons.

<Icon icon="smartphone-1" className="w-3rem h-3rem mb-5 svg-icon-light" />

For a complete icon reference, see here.

Icons - Font Awesome

Vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

These icons are mostly used in buttons or for social network links. For a complete icon reference, see here.

Learn more about usage with React here.

import { faAddressBook } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

return (
    <FontAwesomeIcon icon={faAddressBook} />
)
Image overlay

Utility class that darkens or lightens the backround image of the element to enhance the legibility. It can be used with cards, carousel slides, etc.

Gradient overlay adds vertical gradient that's darkest on the bottom third of the element.

Image

Dark overlay

Image

Light overlay

Image

Gradient Overlay

Class reference

.dark-overlay, .light-overlay, .gradient-overlay - CSS class to be used on the element

.overlay-content - use this class on the element's content to increase its Z-index and move it above the overlay layer

Ribbon

Ribbons can be used in the venue component, venue carousels but also separately. Its parent needs a position: relative; and you can use theme colours for ribbon backgrounds.

Primary
Secondary
Info
Responsive borders

Responsive borders as an addition to Bootstrap's border utilities.

Class reference

.border-sm, .border-md, etc.

Block utilities

Additional utility classes, for block elements mostly.

Class reference

.bg-gray-100 to .bg-gray-900 - grayscale backgrounds

.bg-primary-light, .bg-secondary-light - lighter backgrounds for the theme colours

.opacity-1 to .opacity-9 - opacity helper

.hover-scale - scale element on hover

.hover-animate - move element up by few pixels on hover

.hover-scale-bg-image - scale element's background picture on hover

Text utilities

Additional utility classes, for block elements mostly.

Class reference

.text-gray-100 to .text-gray-900 - grayscale text colours

.text-sm, .text-lg, .text-xl - text sizes

.letter-spacing-1 to .letter-spacing-5 - letter spacing 0.1em to 0.5em

.z-index-1 to .z-index-5 - z-index from 10 to 50

.text-hover-primary, etc. - text colour on hover/focus for theme colours

.overflow-visible and .overflow-hidden - overflow control

React components
AccordionCardsGallery with lightboxImagesMapsReact SelectSwiper
CSS components
AvatarBackground imageIcons - directoryIcons - Font AwesomeImage overlayRibbonResponsive bordersBlock utilitiesText utilities