Narrower Horizontal Card
Example of Horizontal Course Card Composition as a narrower version
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
const HorizontalCardNarrowerInitial = () => (
<ContentBlock className="border">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
overlayTextBottomRight={'1. kurz'}
/>
</a>
</Col>
<Col xs={10} sm={6} lg={9} className="pr-sm-0">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">123h 45m · 666 lekcí</div>
</div>
</Col>
<Col xs={2} lg={1} className="text-center align-self-center px-0">
<a href={'#'} role="button">
<SvgIcon kind="ArrowDown" size={10} />
</a>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardNarrowerInitial />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
const HorizontalCardNarrowerInitial = () => (
<ContentBlock className="border">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
overlayTextBottomRight={'1. kurz'}
/>
</a>
</Col>
<Col xs={10} sm={6} lg={9} className="pr-sm-0">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<Row className="no-gutters ">
<Col className="flex-grow-0 pr-6">
<div className="course-row__info-text">
<span className="font-weight-medium text-title">30 %</span> dokončeno
</div>
</Col>
<Col lg={6} className="col-auto flex-grow-1 align-self-center mb-3">
<div className="progress progress--slim">
<div
className="progress-bar bg-warning"
style={{
width: '30%',
}}
role="progressbar"
aria-valuenow={30}
aria-valuemin={0}
aria-valuemax={100}
></div>
</div>
</Col>
</Row>
</div>
</Col>
<Col xs={2} lg={1} className="text-center align-self-center px-0">
<a href={'#'} role="button">
<SvgIcon kind="ArrowDown" size={10} />
</a>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardNarrowerInitial />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
const HorizontalCardNarrowerInitial = () => (
<ContentBlock className="border">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
overlayTextBottomRight={'1. kurz'}
/>
</a>
</Col>
<Col xs={10} sm={6} lg={9} className="pr-sm-0">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">
<span className="mr-6 text-primary font-weight-semi-bold">
<SvgIcon kind="CheckCircle" className="icon icon-primary" />
Uznáno
</span>
<span>(Kurz jste dokončili již dříve)</span>
</div>
</div>
</Col>
<Col xs={2} lg={1} className="text-center align-self-center px-0">
<a href={'#'} role="button">
<SvgIcon kind="ArrowDown" size={10} />
</a>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardNarrowerInitial />;
export default Example;
Horizontal Card
Example of Horizontal Course Card Composition
Termín byl do 14. 1. 2021
Course Title
123h 45m666 lekcí
0 % finished
Course Title
123h 45m666 lekcí
9 % finished
Vystudujte do 4. 7. 202
9 % finished
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage, Badge } from 'seduo-ui';
const HorizontalCardStartStudy = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
/>
</a>
</Col>
<Col sm={7} className="align-self-stretch">
<Row className="course-row__main">
<Col lg={7} className="course-row__info">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</Col>
<Col lg={5} className="course-row__activity">
<div className="course-row__activity-progress mt-5 mt-lg-0">
<div className="mb-5 progress progress--slim">
<div
className="progress-bar bg-warning"
style={{
width: '0%',
}}
role="progressbar"
aria-valuenow={0}
aria-valuemin={0}
aria-valuemax={100}
></div>
</div>
<div className="small text-danger">0 % finished</div>
</div>
</Col>
</Row>
</Col>
<Col lg={3} className="d-lg-flex">
<div className="course-row__actions">
<a className="btn btn-success btn-sm course-row__actions-button" href={'#'} role="button">
<SvgIcon
kind="Play"
size={10}
className="course-row__actions-icon course-row__actions-icon--success"
/>
Spustit kurz
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardStartStudy />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage, Badge } from 'seduo-ui';
const HorizontalCardStartStudyWithDeadline = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
/>
</a>
</Col>
<Col sm={7} className="align-self-stretch">
<div className="course-row__deadline">
<Badge color={'danger'}>Termín byl do 14. 1. 2021</Badge>
</div>
<Row className="course-row__main">
<Col lg={7} className="course-row__info">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</Col>
<Col lg={5} className="course-row__activity">
<div className="course-row__activity-progress mt-5 mt-lg-0">
<div className="mb-5 progress progress--slim">
<div
className="progress-bar bg-warning"
style={{
width: '0%',
}}
role="progressbar"
aria-valuenow={0}
aria-valuemin={0}
aria-valuemax={100}
></div>
</div>
<div className="small text-danger">0 % finished</div>
</div>
</Col>
</Row>
</Col>
<Col lg={3} className="d-lg-flex">
<div className="course-row__actions">
<a className="btn btn-success btn-sm course-row__actions-button" href={'#'} role="button">
<SvgIcon
kind="Play"
size={10}
className="course-row__actions-icon course-row__actions-icon--success"
/>
Spustit kurz
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardStartStudyWithDeadline />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
const HorizontalCardStudying = () => (
<ContentBlock className="my-courses">
<Row className="course-row align-items-center">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
/>
</a>
</Col>
<Col sm={7} className="align-self-stretch">
<Row className="course-row__main">
<Col lg={7} className="course-row__info">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</Col>
<Col lg={5} className="course-row__activity">
<div className="course-row__activity-progress mt-5 mt-lg-0">
<div className="mb-5 progress progress--slim">
<div
className="progress-bar bg-warning"
style={{
width: '9%',
}}
role="progressbar"
aria-valuenow={9}
aria-valuemin={0}
aria-valuemax={100}
></div>
</div>
<div className="small text-muted">9 % finished</div>
</div>
<div className="mt-5 text-lg-center">
<a href="#" className="link-reset badge badge-light">
<div className="d-flex align-items-center">
<div className="flex-shrink-0">
<SvgIcon kind="Notes" size={32} className="icon" />
</div>
<div className="flex-grow-1">Uložené poznámky</div>
</div>
</a>
</div>
</Col>
</Row>
</Col>
<Col lg={3} className="d-lg-flex">
<div className="course-row__actions">
<a className="btn btn-success btn-sm course-row__actions-button" href={'#'} role="button">
<SvgIcon
kind="Play"
size={10}
className="course-row__actions-icon course-row__actions-icon--success"
/>
Pokračovat
</a>
<a
className="btn btn-link btn-sm text-muted ajax course-row__actions-button"
href="#"
role="button"
>
<SvgIcon
kind="Trash"
size={15}
className="course-row__actions-icon course-row__actions-icon--link"
/>
Odhlásit se
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardStudying />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage, Badge } from 'seduo-ui';
const HorizontalCardStudyingWithDeadline = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
/>
</a>
</Col>
<Col sm={7} className="align-self-stretch">
<div className="course-row__deadline">
<Badge color={'warning'}>Vystudujte do 4. 7. 202</Badge>
</div>
<Row className="course-row__main">
<Col lg={7} className="course-row__info">
<a
href={'#'}
className="course-row__info-title font-weight-medium"
title="Course Title can be at two lines not only one and after that it's cutted"
>
<div className="text-truncate-multiline text-truncate-multiline-2">
Course Title can be at two lines not only one and after that it's cutted
</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</Col>
<Col lg={5} className="course-row__activity">
<div className="course-row__activity-progress mt-5 mt-lg-0">
<div className="mb-5 progress progress--slim">
<div
className="progress-bar bg-warning"
style={{
width: '9%',
}}
role="progressbar"
aria-valuenow={9}
aria-valuemin={0}
aria-valuemax={100}
></div>
</div>
<div className="small text-muted">9 % finished</div>
</div>
</Col>
</Row>
</Col>
<Col lg={3} className="d-lg-flex">
<div className="course-row__actions">
<a className="btn btn-success btn-sm course-row__actions-button" href={'#'} role="button">
<SvgIcon
kind="Play"
size={10}
className="course-row__actions-icon course-row__actions-icon--success"
/>
Pokračovat
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardStudyingWithDeadline />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
const HorizontalCardFinished = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished
/>
</a>
</Col>
<Col sm={7} className="align-self-stretch">
<Row className="course-row__main align-items-center">
<Col lg={7} className="course-row__info">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</Col>
<Col lg={5} className="course-row__activity">
<div className="course-row__activity-course-rating ml-n6 ml-lg-0">
<a href={'#'} className="btn btn-link btn-sm">
Ohodnotit kurz
</a>
</div>
</Col>
</Row>
</Col>
<Col lg={3} className="d-lg-flex">
<div className="course-row__actions">
<a className="btn btn-secondary btn-sm course-row__actions-button" href={'#'} role="button">
<SvgIcon
kind="Download"
height="13"
width="15"
className="course-row__actions-icon course-row__actions-icon--primary align-middle"
/>
Certifikát
</a>
<a className="btn btn-link btn-sm text-muted course-row__actions-button" href="#" role="button">
<SvgIcon
kind="Reload"
size={15}
className="course-row__actions-icon course-row__actions-icon--link align-middle"
/>
Spustit znovu
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardFinished />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
import ReactRating from 'react-rating';
const HorizontalCardFinishedWithRating = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished
/>
</a>
</Col>
<Col sm={7} className="align-self-stretch">
<Row className="course-row__main">
<Col lg={7} className="course-row__info">
<a href={'#'} className="course-row__info-title font-weight-medium" title="Course Title">
<div className="text-truncate-multiline text-truncate-multiline-2">Course Title</div>
</a>
<div className="course-row__info-subtitle">
<div className="mb-5">
<a href={'#'} className="course-row__info-link">
John Lector
</a>
,{' '}
<a href={'#'} className="course-row__info-link">
Francis Teacher
</a>
</div>
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</Col>
<Col lg={5} className="course-row__activity">
<div className="course-row__activity-course-rating mt-5 mt-lg-0">
<div className="rating">
<ReactRating
className="rating__stars"
initialRating={5}
emptySymbol={<SvgIcon size={15} kind="StarOutline" className="rating__star" />}
fullSymbol={<SvgIcon size={15} kind="Star" className="rating__star" />}
readonly
/>
</div>
</div>
</Col>
</Row>
</Col>
<Col lg={3} className="d-lg-flex">
<div className="course-row__actions">
<a className="btn btn-secondary btn-sm course-row__actions-button" href={'#'} role="button">
<SvgIcon
kind="Download"
height="13"
width="15"
className="course-row__actions-icon course-row__actions-icon--primary align-middle"
/>
Certifikát
</a>
<a className="btn btn-link btn-sm text-muted course-row__actions-button" href="#" role="button">
<SvgIcon
kind="Reload"
size={15}
className="course-row__actions-icon course-row__actions-icon--link align-middle"
/>
Spustit znovu
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardFinishedWithRating />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
import AvatarPartnersExample from './AvatarPartner';
const EducationProgramHorizontalCardStudying = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="align-self-center pr-sm-0">
<div className="course-row__image">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
/>
</a>
</div>
</Col>
<Col sm={7} className="align-self-stretch">
<Row className="course-row__main">
<Col lg={7} className="course-row__info">
<a href={'#'} className="course-row__info-title font-weight-medium">
Course Title
</a>
<div className="course-row__info-subtitle">
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
<div className="mt-5">
<AvatarPartnersExample />
</div>
</Col>
<Col lg={5} className="course-row__activity">
<div className="course-row__activity-progress mt-5 mt-lg-0">
<div className="mb-5 progress progress--slim">
<div
className="progress-bar bg-warning"
style={{
width: 9 + '%',
}}
role="progressbar"
aria-valuenow={9}
aria-valuemin={0}
aria-valuemax={100}
></div>
</div>
<div className="small text-muted">9 % finished</div>
</div>
</Col>
</Row>
</Col>
<Col lg={3} className="d-lg-flex">
<div className="course-row__actions">
<a className="btn btn-success btn-sm course-row__actions-button" href={'#'} role="button">
<SvgIcon
kind="Play"
size={10}
className="course-row__actions-icon course-row__actions-icon--success"
/>
Pokračovat
</a>
<a
className="btn btn-link btn-sm text-muted ajax course-row__actions-button"
href="#"
role="button"
>
<SvgIcon
kind="Trash"
size={15}
className="course-row__actions-icon course-row__actions-icon--link"
/>
Odhlásit se
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <EducationProgramHorizontalCardStudying />;
export default Example;
import React from 'react';
import { SvgIcon, Row, Col, ContentBlock, CourseImage } from 'seduo-ui';
import AvatarPartnersExample from './AvatarPartner';
const EducationProgramHorizontalCardFinished = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="align-self-center pr-sm-0">
<div className="course-row__image">
<a href={'#'}>
<CourseImage
src={'https://dummyimage.com/222x150/9fa4a8/fff.png'}
alt={'Default course image'}
isFinished={false}
/>
</a>
</div>
</Col>
<Col sm={7} className="align-self-stretch">
<Row className="course-row__main">
<Col lg={7} className="course-row__info">
<a href={'#'} className="course-row__info-title font-weight-medium">
Course Title
</a>
<div className="course-row__info-subtitle">
<div className="course-row__info-text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
<div className="mt-5">
<AvatarPartnersExample />
</div>
</Col>
<Col lg={5} className="course-row__activity"></Col>
</Row>
</Col>
<Col lg={3} className="d-flex">
<div className="course-row__actions">
<a className="btn btn-link btn-sm text-muted course-row__actions-button" href="#" role="button">
<SvgIcon
kind="Reload"
size={15}
className="course-row__actions-icon course-row__actions-icon--link align-middle"
/>
Spustit znovu
</a>
</div>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <EducationProgramHorizontalCardFinished />;
export default Example;
import React from 'react';
import { Row, Col, ContentBlock, CourseImage, Skeleton, SkeletonImage } from 'seduo-ui';
const HorizontalCardSkeleton = () => (
<ContentBlock className="my-courses">
<Row className="course-row">
<Col sm={4} lg={2} className="pr-sm-0">
<SkeletonImage width="100%" height="78px" />
</Col>
<Col sm={7} className="align-self-stretch">
<Row className="course-row__main align-items-center">
<Col lg={7} className="course-row__info">
<div className="mb-6">
<Skeleton type="title" standalone={false} />
</div>
<div className="course-row__info-subtitle">
<Skeleton lines={2} />
</div>
</Col>
</Row>
</Col>
</Row>
</ContentBlock>
);
const Example = () => <HorizontalCardSkeleton />;
export default Example;