UI: Components

Carousel

A Carousel is a set of rotating images or text.

Used here with --subgrid-modifier, so content-parts align.
Add CSS for handling this in the individual sub-components.
In this case, the Card-component is used.

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

With opposite color-scheme

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

With right-to-left

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

Variants

With data-scroll-nav="ui-scroll-nav --nav-outside --no-dots"

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card witha longer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more

News

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies. Read more