Education program card
Cards of education programs (card-program) are derivative of card-course and it's possible to set the same states.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent dapibus. Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
+64 kurzy3h 45m
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent dapibus. Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
Vystudujte do 20. 5. 2022
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent dapibus. Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
+64 kurzy3h 45m
import React from 'react';
import { Image, ImageBadge, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
import AvatarPartnersExample from './AvatarPartner';
const Example = () => (
<div
className="card card-program h-100 shadow-sm"
style={{
maxWidth: '358px',
}}
>
<ImageOverlay
className="card-program__image-wrapper"
topLeft={
<>
<ImageBadge icon="education" text="Vzdělávací program" theme="dark" className="mb-5" />
<br />
<ImageBadge text="Novinka" theme="dark" />
</>
}
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-program__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-program__body">
<a
className="card-program__title font-weight-medium"
href="#"
title="Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia."
>
<div className="text-truncate-multiline text-truncate-multiline-2">
<span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.</span>
</div>
</a>
<div className="card-program__subtitle card-program__subtitle--standalone">
<div className="card-program__text">
<div className="text-truncate-multiline text-truncate-multiline-3">
<span
title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent dapibus.
Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus."
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent
dapibus. Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed,
aliquam non, tellus.
</span>
</div>
</div>
</div>
<div className="card-program__subtitle card-program__subtitle--bottom">
<div className="card-program__text">
<AvatarPartnersExample />
</div>
<div className="card-program__text pb-2">
<span className="mr-3">4 kurzy</span>
<span className="card-course__dote card-course__dote--gray card-course__dote--smaller mr-3" />
<span>3h 45m</span>
</div>
</div>
</div>
<div className="card-program__footer">
<div className="card-program__footer-wrapper justify-content-start align-items-center">
<div className="card-course__text">
<span className="badge badge-light card-course__badge card-course__badge--rounded mr-6">
<SvgIcon kind="Trophy" className="card-program__icon" />
</span>
</div>
<div className="card-course__text">
<div className="text-title">Po dokončení získáte odborný certifikát</div>
</div>
</div>
</div>
</div>
);
export default Example;
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-program h-100 shadow-sm"
style={{
maxWidth: '358px',
}}
>
<ImageOverlay
className="card-program__image-wrapper"
topLeft={
<>
<span className="badge card-program__badge card-program__badge--static mb-5">
Vzdělávací program
</span>
<span className="badge badge-primary card-program__badge">Novinka</span>
</>
}
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-program__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-program__body">
<a
className="card-program__title font-weight-medium "
href="#"
title="Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia."
>
<div className="text-truncate-multiline text-truncate-multiline-2">
<span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.</span>
</div>
</a>
<div className="card-program__subtitle card-program__subtitle--standalone">
<div className="card-program__text">
<div className="text-truncate-multiline text-truncate-multiline-3">
<span
title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent dapibus.
Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus."
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent
dapibus. Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed,
aliquam non, tellus.
</span>
</div>
</div>
</div>
<div className="card-program__subtitle card-program__subtitle--bottom">
<div className="card-course__text card-course__text--brand-orange">
<SvgIcon kind="Clock" className="card-program__icon card-program__icon--brand-orange mr-4" />
<span className="font-weight-bold">Vystudujte do 20. 5. 2022</span>
</div>
</div>
</div>
<div className="card-program__footer">
<a href="#">
<div className="card-course__subtitle card-course__subtitle--standalone">
<span className="link card-course__link">
<span className="text-primary">66%</span> dokončeno
</span>
</div>
<div className="card-course__subtitle d-block">
<div className="progress progress--small">
<div
className="progress-bar"
role="progressbar"
aria-valuenow={66}
aria-valuemin={0}
aria-valuemax={100}
style={{
width: '66%',
}}
>
{' '}
</div>
</div>
</div>
</a>
</div>
</div>
);
export default Example;
import React from 'react';
import { SvgIcon, Image, StudyPlanButton, ImageOverlay } from 'seduo-ui';
import AvatarPartnersExample from './AvatarPartner';
const Example = () => (
<div
className="card card-program h-100 shadow-sm"
style={{
maxWidth: '358px',
}}
>
<ImageOverlay
className="card-program__image-wrapper"
topLeft={
<>
<span className="badge card-program__badge card-program__badge--static mb-5">
Vzdělávací program
</span>
<span className="badge badge-primary card-program__badge">Novinka</span>
</>
}
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-program__image card-course__image--completed"
/>
</a>
</ImageOverlay>
<div className="card-body card-program__body">
<a
className="card-program__title font-weight-medium"
href="#"
title="Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia."
>
<div className="text-truncate-multiline text-truncate-multiline-2">
<span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.</span>
</div>
</a>
<div className="card-program__subtitle card-program__subtitle--standalone">
<div className="card-program__text">
<div className="text-truncate-multiline text-truncate-multiline-3">
<span
title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent dapibus.
Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus."
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Praesent
dapibus. Pellentesque pretium lectus id turpis. Mauris dolor felis, sagittis at, luctus sed,
aliquam non, tellus.
</span>
</div>
</div>
</div>
<div className="card-program__subtitle card-program__subtitle--bottom">
<div className="card-program__text">
<AvatarPartnersExample />
</div>
<div className="card-program__text pb-2">
<span className="mr-3">4 kurzy</span>
<span className="card-course__dote card-course__dote--gray card-course__dote--smaller mr-3" />
<span>3h 45m</span>
</div>
</div>
</div>
<div className="card-program__footer">
<div className="card-program__footer-wrapper">
<div className="card-course__text">
<span className="card-course__dote card-course__dote--primary" />
<span className="text-primary">Dokončeno 1.1.2021</span>
</div>
<div className="card-course__text text-secondary">
<a className="link card-course__link card-course__link--with-icon" href="#">
<SvgIcon
kind="Certificate"
size={15}
className="card-program__icon card-program__icon--secondary"
/>
<span>Stáhnout certifikát</span>
</a>
</div>
</div>
</div>
</div>
);
export default Example;
import React from 'react';
import { Skeleton, SkeletonImage } from 'seduo-ui';
const Example = () => (
<div
className="card card-program h-100 shadow-sm"
style={{
maxWidth: '358px',
}}
>
<SkeletonImage className="image card-program__image" wrapperClassName="card-program__image-wrapper" />
<div className="card-body card-program__body">
<div className="mb-6">
<Skeleton type="title" lines={2} standalone={false} />
</div>
<Skeleton lines={3} />
</div>
<div className="card-program__footer">
<div className="card-program__footer-wrapper">
<div className="card-course__text">
<Skeleton width="150px" />
</div>
<div className="card-course__text text-secondary">
<a className="link card-course__link card-course__link--with-icon" href="#">
<Skeleton width="100px" />
</a>
</div>
</div>
</div>
</div>
);
export default Example;
Course card
Basic course card without any state in footer of card, but it's marked as booked and there is left corner badge.
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topLeft={<span className="badge badge-brand-orange card-course__badge">Novinka</span>}
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Remove from study plan"
active
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/300x300/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body card-course__body--without-delimiter">
<a className="card-course__title font-weight-medium" href="#">
Another only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<span>
<a className="link card-course__link" href="#">
Name Surname
</a>
</span>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<SvgIcon kind="Star" className="card-course__icon card-course__icon--rating" />
98%
</div>
<div className="card-course__text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</div>
<div className="card-course__footer"></div>
</div>
);
export default Example;
import React from 'react';
import { Skeleton, SkeletonImage, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<SkeletonImage className="card-course__image" wrapperClassName="card-course__image-wrapper" />
<div className="card-body card-course__body">
<div className="card-course__title">
<Skeleton type="title" standalone={false} />
</div>
<div className="card-course__subtitle card-course__subtitle--standalone">
<Skeleton width="70px" />
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<Skeleton width="50px" />
</div>
<div className="card-course__text">
<Skeleton width="150px" />
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper">
<Skeleton />
</div>
</div>
</div>
);
export default Example;
This use case is for B2C clients, when it's necessary to show price and discount.
import React from 'react';
import { Image, SvgIcon, StudyPlanButton, ImageOverlay } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
There is only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<span>
<a className="link card-course__link" href="#">
Name Surname
</a>
</span>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<SvgIcon kind="Star" className="card-course__icon card-course__icon--rating" />
98%
</div>
<div className="card-course__text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper">
<span className="card-course__text card-course__text--price font-weight-medium">600 Kč</span>
</div>
</div>
</div>
);
export default Example;
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Remove from study plan"
active
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
There is only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<a className="link card-course__link" href="#">
Name Surname
</a>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<SvgIcon kind="Star" className="card-course__icon card-course__icon--rating" />
98%
</div>
<div className="card-course__text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper">
<span className="card-course__text card-course__text--price text-danger font-weight-medium">
600 Kč
</span>
<div className="text-right">
<span className="card-course__text card-course__text--price card-course__text--danger-notice">
Sleva 21%
</span>
<span className="card-course__text card-course__text--line-through">799 Kč</span>
</div>
</div>
</div>
</div>
);
export default Example;
This is used for students who should start studying or ongoing study. The last use case is for completed studies and student can download certification.
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image card-course__image--completed"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
Another only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<span>
<a className="link card-course__link" href="#">
Name Surname
</a>
</span>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<SvgIcon kind="Star" className="card-course__icon card-course__icon--rating" />
98%
</div>
<div className="card-course__text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper justify-content-start align-items-start">
<div className="card-course__dote card-course__dote--brand-orange my-4" />
<div className="card-course__text">
<div>Blíží se termín vystudování:</div>
<div className="text-title font-weight-semi-bold">20.1.2020</div>
</div>
</div>
</div>
</div>
);
export default Example;
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
Another only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<a className="link card-course__link" href="#">
Name Surname
</a>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<span className="card-course__dote card-course__dote--brand-orange mr-5" />
<span className="text-title">Vystudujte do 21. 3. 2021</span>
</div>
</div>
</div>
<div className="card-course__footer">
<a href="#">
<div className="card-course__subtitle card-course__subtitle--standalone">
<span className="link card-course__link">8/12 lekcí dokončeno</span>
<SvgIcon
kind="ArrowRight"
className="card-course__icon card-course__icon--small card-course__icon--success"
/>
</div>
<div className="card-course__subtitle d-block">
<div className="progress progress--small">
<div
className="progress-bar"
role="progressbar"
aria-valuenow={66}
aria-valuemin={0}
aria-valuemax={100}
style={{
width: '66%',
}}
>
{' '}
</div>
</div>
</div>
</a>
</div>
</div>
);
export default Example;
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
We will have two lines max, because it's more sexy..
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<a className="link card-course__link" href="#">
Name Surname
</a>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__subtitle--danger">
<span className="card-course__dote card-course__dote--danger mr-5" />
<span className="text-danger">Termín byl do 9. 1. 2021</span>
</div>
</div>
</div>
<div className="card-course__footer">
<a href="#">
<div className="card-course__subtitle card-course__subtitle--standalone">
<span className="link card-course__link">8/12 lekcí dokončeno</span>
<SvgIcon
kind="ArrowRight"
className="card-course__icon card-course__icon--small card-course__icon--success"
/>
</div>
<div className="card-course__subtitle d-block">
<div className="progress progress--small">
<div
className="progress-bar"
role="progressbar"
aria-valuenow={66}
aria-valuemin={0}
aria-valuemax={100}
style={{
width: '66%',
}}
>
{' '}
</div>
</div>
</div>
</a>
</div>
</div>
);
export default Example;
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image card-course__image--completed"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
Another only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<span>
<a className="link card-course__link" href="#">
Name Surname
</a>{' '}
a{' '}
<a className="link card-course__link" href="#">
Name Surname 2
</a>
</span>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<span className="card-course__dote card-course__dote--primary" />
<span className="text-primary">Dokončeno</span>
</div>
<div className="card-course__text">
<a className="link card-course__link card-course__link--with-icon" href="#">
<SvgIcon kind="Reload" size={15} className="card-course__icon card-course__icon--link" />
<span>Spustit znovu</span>
</a>
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper">
<a className="btn btn-secondary btn-sm btn-block" href="#">
Stáhnout certifikát
</a>
</div>
</div>
</div>
);
export default Example;
Other use cases, which is used to fill the contents of the footer for B2B students.
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Remove from study plan"
active
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
Another only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<span>
<a className="link card-course__link" href="#">
Name Surname
</a>
</span>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<SvgIcon kind="Star" className="card-course__icon card-course__icon--rating" />
98%
</div>
<div className="card-course__text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper justify-content-start align-items-start">
<div className="card-course__text">
<div>V kurzu si osvojíte</div>
<div
className="text-truncate-line text-title font-weight-semi-bold"
title="Zdravý životní styl, Týmová práce a Home Office"
>
Zdravý životní styl, Týmová práce a Home Office
</div>
</div>
</div>
</div>
</div>
);
export default Example;
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
Another only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<span>
<a className="link card-course__link" href="#">
Name Surname
</a>
</span>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<SvgIcon kind="Star" className="card-course__icon card-course__icon--rating" />
98%
</div>
<div className="card-course__text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper">
<div className="card-course__text">
<img
width="62"
height="24"
src="https://dummyimage.com/62x24/9fa4a8/fff.png"
alt="Gift image cap"
className="mr-5"
/>
</div>
<span className="card-course__text text-truncate-line text-title">
Populární v Generali česká pojišťovna
</span>
</div>
</div>
</div>
);
export default Example;
import React from 'react';
import { Image, ImageOverlay, StudyPlanButton, SvgIcon } from 'seduo-ui';
const Example = () => (
<div
className="card card-course h-100 shadow-sm"
style={{
maxWidth: '258px',
}}
>
<ImageOverlay
className="card-course__image-wrapper"
topRight={
<StudyPlanButton
onAddToStudyPlan={() => {}}
onRemoveFromStudyPlan={() => {}}
title="Add to study plan"
/>
}
>
<a href="#" title="Bla bla">
<Image
src="https://dummyimage.com/520x350/9fa4a8/fff.png"
alt="Bla bla"
className="card-course__image"
/>
</a>
</ImageOverlay>
<div className="card-body card-course__body">
<a className="card-course__title font-weight-medium" href="#">
Another only one line text
</a>
<div className="card-course__subtitle card-course__subtitle--standalone">
<span>
<a className="link card-course__link" href="#">
Name Surname
</a>
</span>
</div>
<div className="card-course__subtitle card-course__subtitle--bottom">
<div className="card-course__text">
<SvgIcon kind="Star" className="card-course__icon card-course__icon--rating" />
98%
</div>
<div className="card-course__text">
<span className="mr-6">123h 45m</span>
<span>666 lekcí</span>
</div>
</div>
</div>
<div className="card-course__footer">
<div className="card-course__footer-wrapper">
<div className="d-flex">
<div className="align-self-center">
<span className="badge badge-secondary card-course__badge card-course__badge--rounded mr-3">
KK
</span>
</div>
<div className="card-course__text flex-grow-1 align-self-center ml-3">
<div className="text-truncate-multiline text-truncate-multiline-2">
<span className="font-weight-semi-bold text-title">Karel Kuman</span> vám doporučuje tento
kurz
</div>
</div>
</div>
</div>
</div>
</div>
);
export default Example;