Cards

Body

This is some text within a card body. 

<div class="card">

    <div class="card-body">

    This is some text within a card body.

    </div>

</div>

Card: Eventos. Estilo thumbnail

Event
Event
Movistar Virtual Cycling

Hoy
Event
Movistar Virtual Cycling

12:00 13:15 15:00 16:00 18:30

Únete al campeonato de ciclismo virtual patrocinado por Movistar.

Unirme
Unirme 

<div class="card card-event-light overflow-hidden shadow-sm">

    <!-- Featured img -->

    <div class="event-image-title grid-layout-item">

        <a class="d-block" href="#">

            <img src="..." class="card-img img-fluid" alt="Event">

            <div class="card-img-overlay">

                <div class="media media-event media-event-dark">

                    <img class="event-avatar rounded mr-3" src="..." width="64" alt="Event">

                    <div class="media-body">

                        <div class="event-data mb-2">

                            <h6 class="event-name mb-2"><span class="event-type-marker marker-leagues"></span>Nombre del evento <span class="icon-chevron-right"></span></h6>

                            <p class="event-time"><span class="time">Fecha</span></p>

                        </div>

                    </div>

                </div>

            </div>

        </a>

    </div>

    <!-- /Featured img -->


    <!-- Data -->

    <div class="card-body">

        <!-- Event container -->

        <div class="row align-items-center">

            <!-- Event data -->

            <div class="col-sm">

                <div class="media media-event media-event-light">

                    <img class="event-avatar rounded mr-3 list-layout-item d-none" src="..." width="64" alt="Event">

                    <div class="media-body">

                        <div class="event-data mb-2">

                            <h6 class="event-name list-layout-item mb-2 d-none"><a class="event-link" href="#"><span class="event-type-marker marker-leagues"></span>Nombre del evento <span class="icon-chevron-right"></span></a></h6>

                            <p class="event-time mb-1">

                                <span class="badge badge-primary time" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nombre de la ruta o etapa">12:00</span>

                                <span class="badge badge-lighter time" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nombre de la ruta o etapa">13:15</span>

                                <span class="badge badge-lighter time" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nombre de la ruta o etapa">15:00</span>

                                <span class="badge badge-lighter time" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nombre de la ruta o etapa">16:00</span>

                                <span class="badge badge-lighter time" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nombre de la ruta o etapa">18:30</span>

                            </p>

                        </div>

                        <p class="event-description mb-0">Descripción del evento.</p>

                        <a href="#" class="btn btn-outline-secondary btn-sm mt-2 grid-layout-item">Unirme</a>

                    </div>

                </div>

            </div>

            <!-- /Event data -->


            <!-- Event subscribe -->

            <div class="col-sm-auto list-layout-item d-none">

                <a href="#" class="btn btn-outline-secondary btn-sm btn-block">Unirme</a>

            </div>

            <!-- Event subscribe -->

        </div>

        <!-- /Event container -->

    </div>

    <!-- /Data -->

</div>

Card: Steps o Icono

1

Comprueba tu equipo

Bkool es compatible con una amplia gama de rodillos y dispositivos. Antes de darte de alta, comprueba tu configuración de entrenamiento con nuestro verificador de equipos.

Ver compatibilidad
2

Descarga el simulador

Regístrate y prueba gratis Bkool Cycling durante 30 días.

Descarga la App e instálala en tus plataformas favoritas.

Ir a descargas

Intentos sin límites:

Los ciclistas podrán participar en cada prueba tantas veces como lo deseen, conservando el mejor tiempo.


<div class="col-md mb-6 mb-md-0">

    <div class="card bg-dark text-white card-steps h-100">

        <div class="step-avatar rounded-circle mx-auto text-center bg-primary border-dark text-dark">1</div>

        <div class="card-body p-4">

            <h3>Comprueba tu equipo</h3>

            <p>Bkool es compatible con una amplia gama de rodillos y dispositivos. Antes de darte de alta, comprueba tu configuración de entrenamiento con nuestro verificador de equipos.</p>

            <a href="https://www.bkool.com/es/compatibilidad" class="btn btn-secondary btn-sm">Ver compatibilidad</a>

        </div>

    </div>

</div>


<div class="col-md mb-6 mb-md-0">

    <div class="card bg-dark text-white card-steps h-100">

        <div class="step-avatar rounded-circle mx-auto text-center bg-primary border-dark text-dark">2</div>

        <div class="card-body p-4">

            <h3>Descarga el simulador</h3>

            <p>Regístrate y prueba gratis Bkool Cycling durante 30 días.</p>

            <p>Descarga la App e instálala en tus plataformas favoritas.</p>

            <a href="https://www.bkool.com/es/apps" class="btn btn-secondary btn-sm">Ir a descargas</a>

        </div>

    </div>

</div>


<div class="col-md mb-6 mb-md-0">

    <div class="card bg-dark text-white card-steps h-100">

        <div class="step-avatar rounded-circle mx-auto bg-primary border-dark text-dark">

            <span class="icon-finish icon-36"></span>

        </div>

        <div class="card-body p-4">

            <h3 class="mb-3">Intentos sin límites:</h3>

            <p>Los ciclistas podrán participar en cada prueba tantas veces como lo deseen, conservando el mejor tiempo.</p>

        </div>

    </div>

</div>

Card: Instructores

Instructors

Chloe Laureyns

Instructora de Ride y MATRIX en Digme Fitness

Le gustan los workouts duros, con mucha velocidad y un punto de dureza

Instructors

Oscar Draco

Instructor de Bkool y Aplifit

Muchísima experiencia en ciclo indoor. Místico. Ambiente único durante las clases


<div class="card card-session card-instructor bg-transparent text-white shadow">

    <img src="..." class="card-img rounded" alt="...">

    <div class="card-img-overlay d-flex flex-column">

        <div class="session-info mt-auto">

            <h3 class="mb-0">Nombre instructor</h3>

            <h5 class="opacity-8 mb-4">Cargo</h5>

            <p class="card-text">Descripción</p>

        </div>

    </div>

</div>

Card: Rutas

Classic routes

10,4 km

Milano - Sanremo

Classic routes

Fácil

Classic routes

10,4 km

Milano - Sanremo

Classic routes

Fácil

Classic routes

10,4 km

Milano - Sanremo

Classic routes

Fácil


<div class="card card-session card-session-routes bg-dark text-white shadow">

    <img src="..." class="card-img owl-lazy rounded" alt="...">

    <div class="card-img-overlay p-0 d-flex flex-column">

        <div class="session-info pt-3 px-3">

            <p class="card-title route-distance mb-0">10,4 km</p>

            <p class="card-title mb-0">Milano - Sanremo</p>

        </div>

        <div class="session-details mt-auto">

            <div class="row m-0">

                <div class="col-sm-12 session-graph px-0">

                    <img src="..." class="card-img owl-lazy rounded" alt="...">

                </div>

                <div class="row w-100 m-0 p-3">

                    <div class="col-auto mr-auto pl-0">

                        <p class="card-text m-0">

                            <span class="icon-session-video"></span>

                            <span class="icon-session-3d"></span>

                            <span class="icon-session-gps"></span>

                        </p>

                    </div>

                    <div class="col-auto ml-auto pr-0">

                        <p class="card-text m-0">Fácil</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Card: Workouts

Workout

0:50:00

Aer.fácil fraccionado

Workout

Baja

Classic routes

1:05:00

Tempo fraccionado

Classic routes

Moderada

Classic routes

1:30:00

Aér. fácil continuo

Classic routes

Fácil


<div class="card card-session card-session-routes bg-dark text-white shadow">

    <img src="..." class="card-img owl-lazy rounded" alt="...">

    <div class="card-img-overlay p-0 d-flex flex-column">

        <div class="session-info pt-3 px-3">

            <p class="card-title workout-time mb-0">0:50:00</p>

            <p class="card-title mb-0">Aer.fácil fraccionado</p>

        </div>

        <div class="session-details mt-auto">

            <div class="row m-0">

                <div class="col-sm-12 session-graph px-0">

                    <img src="..." class="card-img" alt="...">

                </div>

                <div class="row w-100 m-0 p-3">

                    <p class="card-text text-right w-100 m-0">Baja</p>

                </div>

            </div>

        </div>

    </div>

</div>

Card: Classes

Classes

45´ Blue & Red surges

Lizzie

Classes

English

Muy alta

Classes

30´ Multi hill ride

Jaime King

Classes

English

Muy alta

Classes

20´ High Five

Chloe

Classes

English

Muy alta


<div class="card card-session card-session-class bg-dark text-white mb-2 shadow">

    <img src="..." class="card-img rounded" alt="...">

    <div class="card-img-overlay p-0 d-flex flex-column">

        <div class="session-info pt-3 px-3">

            <p class="card-title class-name mb-0">45´ Blue & Red surges</p>

            <p class="card-text instructor-name">Lizzie</p>

        </div>

        <div class="session-details mt-auto">

            <div class="row m-0">

                <div class="col-sm-12 session-graph px-0">

                    <img src="..." class="card-img" alt="...">

                </div>

                <div class="row w-100 m-0 p-3">

                    <div class="col-auto mr-auto pl-0">

                        <p class="card-text m-0">English</p>

                    </div>

                    <div class="col-auto ml-auto pr-0">

                        <p class="card-text m-0">Muy alta</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Card: Citas

“Gracias a Bkool me mantengo a tope durante el invierno. Compito en las ligas y retos cada semana y eso me permite estar competitivo y con ganas de pedalear”.

Jakob - Dinamarca

Bkooler desde 2014

"La posibilidad de elegir cualquier ruta del Mundo sin moverme de casa, compartir con otros usuarios estas rutas y poder ver en pantalla todos los datos que necesito."

Fernando Alarza (Spain)

Bkooler desde 2017


<div class="card bg-black text-white h-100 mb-2">

    <div class="card-body p-5 d-flex flex-column">

        <div>

            <h4 class="mb-5">“...”.</h4>

        </div>

        <div class="mt-auto">

            <p class="m-0">...</p>

            <p class="m-0">...</p>

        </div>

    </div>

</div>