Theme Components

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

Accordion

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

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

const [collapse, setCollapse] = React.useState(1)

return (
<div role="tablist">
    <Card className="border-0 shadow mb-3">
        <CardHeader onClick={() => setCollapse(1)} id="headingOne" role="tab" className="bg-primary-100 border-0 py-0">
            <span style={{ cursor: "pointer" }} className="text-primary accordion-link">Option one</span>
        </CardHeader>
        <Collapse isOpen={collapse === 1}>
            <CardBody className="py-5">
                <p className="text-muted">...</p>
                <p className="text-muted mb-0">...</p>
            </CardBody>
        </Collapse>
    </Card>
    <Card className="border-0 shadow mb-3">
        <CardHeader onClick={() => setCollapse(2)} id="headingOne" role="tab" className="bg-primary-100 border-0 py-0">
            <span style={{ cursor: "pointer" }} className="text-primary accordion-link">Option one</span>
        </CardHeader>
        <Collapse isOpen={collapse === 2}>
            <CardBody className="py-5">
                <p className="text-muted">...</p>
                <p className="text-muted mb-0">...</p>
            </CardBody>
        </Collapse>
    </Card>
</div>
        )
Cards

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

Restaurant

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

Restaurant

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

ByBianca Briggs

Restaurant,Fusion

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
Pamela
Modern, Well-Appointed Room

Private room

$80 per night

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

Entire apartment

$121 per night

Modern Apt - Vibrant Neighborhood!
Julie
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...

Continue reading
...
Travel
Autumn fashion tips and tricks

January 16, 2016

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

Continue reading
...
Living
Newest photo apps

January 16, 2016

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

Continue reading
import CardPost from '../../CardPost'

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

export default () => {
    return (
        posts.map(post => 
            <CardPost data={post} />
        )
    )
}
Review
Padmé AmidalaDec 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

Luke SkywalkerDec 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.

Princess LeiaDec 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
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
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="ml-n1 mr-n1"
            lg="4"
            xs="6"
            colClasses="px-1 mb-2"
            data={data.gallery}
                                
        />
    )
}
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

import dynamic from 'next/dynamic'

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

let Map
export default () => {
    const [mapLoaded, setMapLoaded] = React.useState(false)

    React.useEffect(() => {
        Map = dynamic(
            () => import('../components/Map'),
            { ssr: false }
        )

        setMapLoaded(true)

    }, [])
    return (
        div className="map-wrapper-300 mb-3">
            {mapLoaded &&
                <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

import dynamic from 'next/dynamic'

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

let Map
export default () => {
    const [mapLoaded, setMapLoaded] = React.useState(false)

    React.useEffect(() => {
        Map = dynamic(
            () => import('../components/Map'),
            { ssr: false }
        )

        setMapLoaded(true)

    }, [])
    return (
        div className="map-wrapper-300 mb-3">
            {mapLoaded &&
                <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
import dynamic from 'next/dynamic'

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

let Map
export default () => {
    const [mapLoaded, setMapLoaded] = React.useState(false)

    React.useEffect(() => {
        Map = dynamic(
            () => import('../components/Map'),
            { ssr: false }
        )

        setMapLoaded(true)

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

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

let Map
export default () => {
    const [mapLoaded, setMapLoaded] = React.useState(false)

    React.useEffect(() => {
        Map = dynamic(
            () => import('../components/Map'),
            { ssr: false }
        )

        setMapLoaded(true)

    }, [])
    return (
        div className="map-wrapper-300 mb-3">
            {mapLoaded &&
                <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 React 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
  • wrapperClass - classes for Swiper wrapper
  • 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

Modern, Well-Appointed Room
Pamela
Pamela
Modern, Well-Appointed Room

Private room

$80 per night

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

Entire apartment

$121 per night

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

Entire apartment

$75 per night

Sunny Private Studio-Apartment
Barbora
Barbora
Sunny Private Studio-Apartment

Shared room

$93 per night

Mid-Century Modern Garden Paradise
Jack
Jack
Mid-Century Modern Garden Paradise

Entire house

$115 per night

Brooklyn Life, Easy to Manhattan
Stuart
Stuart
Brooklyn Life, Easy to Manhattan

Private room

$123 per night

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

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

Restaurant

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

ByBianca Briggs

Restaurant,Fusion

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

Musix

Music club

Deserunt eiusmod Lorem proident consequat elit culpa laboris ea cupidatat. Consequat dolore proident ipsum qui sint...

ByBianca Briggs

Music,Club,Rock

Prosure

Restaurant

Cillum sunt reprehenderit ea non irure veniam dolore commodo labore fugiat est consequat velit. Cupidatat nisi qui ...

ByBianca Briggs

Nisi,Ex,Eiusmod

Take That

Café

Cillum sunt reprehenderit ea non irure veniam dolore commodo labore fugiat est consequat velit. Cupidatat nisi qui ...

ByBianca Briggs

Nisi,Ex,Eiusmod

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
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

Sunny Private Studio-Apartment
Sunny Private Studio-Apartment

San Francisco

Apartment

85 m221$65k

Mid-Century Modern Garden Paradise
Mid-Century Modern Garden Paradise

San Francisco

House

350 m221$150k

Brooklyn Life, Easy to Manhattan
Brooklyn Life, Easy to Manhattan

San Francisco

Apartment

85 m221$65k

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

Sunny Private Studio-Apartment
Sunny Private Studio-Apartment

San Francisco

Apartment

85 m221$65k

Mid-Century Modern Garden Paradise
Mid-Century Modern Garden Paradise

San Francisco

House

350 m221$150k

Brooklyn Life, Easy to Manhattan
Brooklyn Life, Easy to Manhattan

San Francisco

Apartment

85 m221$65k

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
Card image
New York

The big apple

Card image
Paris

Artist capital of Europe

Card image
Barcelona

Dalí, Gaudí, Barrio Gotico

Card image
Prague

City of hundred towers

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

Custom classes to format your user images. You can combine avatar classes with padding utility class to give to the image a nice white border.

Image.avatar-xxl p-2
Image.avatar-xxl
Image.avatar-xl
Image.avatar-lg
Image.avatar
Image.avatar-sm
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.

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.

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.

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.

Dark overlay

Light overlay

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