UI: Components

Card

A simple Card component. The component is built with an article element containing an img element, as well as tags for tagging, headline, text and a link for more information.

Regular, and with --end-modifier:

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

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 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 Title

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

Read more

Variants

With --inline-modifier:

News

Card Title

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

Read more

With both --end and --inline-modifiers:

News

Card Title

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

Read more

With ui-button-class on links:

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

With ui-button bg-black-class on link and --full-width-button modifier:

News

Card Title

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

Read more