Components

Cover

This is hero text with color

lorem ipsum dolor sit amet

or
This is hero text with color
import React from 'react';
import { Cover, Col, Button, LinkButton } from 'seduo-ui';

const Example = () => (
    <Cover
        color="brand-dark"
        title={`This is hero text <span class="text-brand-orange">with color</span>`}
        description="lorem ipsum dolor sit amet"
        images={[
            'https://seduocz.educdn.cz/static/images/employer/cards@1x.png',
            'https://seduocz.educdn.cz/static/images/employer/cards@2x.png 2x',
        ]}
        leftButton={
            <Button color="primary" block>
                Primary Button link
            </Button>
        }
        rightButton={
            <LinkButton color="white" underline>
                Link button underline
            </LinkButton>
        }
        rightButtonDelimiter={<span>or</span>}
    />
);

export default Example;

Cover Properties


type Props = {|
  color: ?ColorListType,
  images: ?CoverImageType,
  title: string,
  titleSmall: boolean,
  description: ?string,
  leftButton: ?React.Element<typeof Button>,
  rightButton: ?React.Element<typeof LintButton>,
  children: ?React.ReactNode,
  className: string,
  withBackgroundImage: boolean,
  animated: boolean,
|};

Cover.defaultProps = {
  color: null,
  images: null,
  description: null,
  leftButton: null,
  rightButton: null,
  children: null,
  className: '',
  titleSmall: false,
  withBackgroundImage: false,
  animated: false,
};

Cover With Background

This is hero text

This is hero text with color

Lorem ipsum dolor sit amet per amore

import React from 'react';
import { Cover, Col, Button, LinkButton } from 'seduo-ui';

const Example = () => (
    <Cover
        color="brand-dark"
        title={`This is hero text <span class="text-brand-orange">with color</span>`}
        description="Lorem ipsum dolor sit amet per amore"
        animated
        leftButton={
            <Button color="primary" block>
                Primary button link
            </Button>
        }
        rightButton={
            <LinkButton color="white" underline>
                Link button underline
            </LinkButton>
        }
    >
        <picture className="cover__background">
            <source
                media="(max-width: 1023px)"
                srcSet="https://seduocz.educdn.cz/static/images/homepage/homepage_cover_768@1x.seduocz.png, https://seduocz.educdn.cz/static/images/homepage/homepage_cover_768@2x.seduocz.png 2x"
            />
            <source
                media="(max-width: 1199px)"
                srcSet="https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1024@1x.seduocz.png, https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1024@2x.seduocz.png 2x"
            />
            <source
                media="(max-width: 1799px)"
                srcSet="https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1200@1x.seduocz.png, https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1200@2x.seduocz.png 2x"
            />
            <source
                media="(min-width: 1800px)"
                srcSet="https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1800@1x.seduocz.png, https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1800@2x.seduocz.png 2x"
            />
            <img
                src="https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1200@1x.seduocz.png"
                srcSet="https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1200@1x.seduocz.png, https://seduocz.educdn.cz/static/images/homepage/homepage_cover_1200@2x.seduocz.png 2x"
                alt="This is hero text"
            />
        </picture>
    </Cover>
);

export default Example;

Cover With Full-width Background

Jednoduchá administrace pro správu studentů, studijní plány a reporting.

This is hero text small

import React from 'react';
import { Cover, Col, Button } from 'seduo-ui';

const Example = () => (
    <Cover
        color="brand-dark"
        title="This is hero text small"
        titleSmall
        withBackgroundImage
        leftButton={
            <Button color="primary" block>
                Primary button link
            </Button>
        }
    >
        <picture>
            <source
                media="(max-width: 767px)"
                srcSet="https://seduocz.educdn.cz/static/images/employer/ipad_mobile@1x.png, https://seduocz.educdn.cz/static/images/employer/ipad_mobile@2x.png 2x"
            />
            <img
                src="https://seduocz.educdn.cz/static/images/employer/ipad@1x.png"
                srcSet="https://seduocz.educdn.cz/static/images/employer/ipad@1x.png, https://seduocz.educdn.cz/static/images/employer/ipad@2x.jpg 2x"
                className="w-100"
                alt="Jednoduchá administrace pro správu studentů, studijní plány a reporting."
            />
        </picture>
    </Cover>
);

export default Example;