Version 0.40.0

UI Molecules

Cards

Card

Project
Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci amet, architecto atque cum enim eos expedita impedit labore minima mollitia natus neque odit placeat possimus quibusdam sit tempore voluptatum.

<div class="sui-m-card">
    <div class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
    </div>
</div>
<a class="sui-m-card">
    <div class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
    </div>
</a>

Card with actions

Project
Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci amet, architecto atque cum enim eos expedita impedit labore minima mollitia natus neque odit placeat possimus quibusdam sit tempore voluptatum.

<div class="sui-m-card">
    <div class="sui-m-card__actions">
        <button class="sui-a-button as--contextual as--primary">
            <i class="sui-a-icon as--start as--fa-ellipsis-v"></i>
            Actions
        </button>
    </div>
    <div class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
    </div>
</div>
<div class="sui-m-card">
    <div class="sui-m-card__actions">
        <button class="sui-a-button as--contextual as--primary">
            <i class="sui-a-icon as--start as--fa-ellipsis-v"></i>
            Actions
        </button>
    </div>
    <a class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
    </a>
</div>
Project
Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci amet, architecto atque cum enim eos expedita impedit labore minima mollitia natus neque odit placeat possimus quibusdam sit tempore voluptatum.

<div class="sui-m-card">
    <div class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
        <div class="sui-m-card__footer">
            ...
                    </div>
                </div>
                <div class="sui-g-grid__item as--push">
                    <div class="sui-m-media-object as--middle">
                        <div class="sui-m-media-object__content">
                            <div class="sui-a-label-value as--label-uppercase">
                                <div class="sui-a-label-value__label">
                                    Leader
                                </div>
                            </div>
                        </div>
                        <div class="sui-m-media-object__media">
                            <div class="sui-a-avatar">
                                <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            [/...]
        </div>
    </div>
</div>
<a class="sui-m-card">
    <div class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
        <div class="sui-m-card__footer">
            ...
                    </div>
                </div>
                <div class="sui-g-grid__item as--push">
                    <div class="sui-m-media-object as--middle">
                        <div class="sui-m-media-object__content">
                            <div class="sui-a-label-value as--label-uppercase">
                                <div class="sui-a-label-value__label">
                                    Leader
                                </div>
                            </div>
                        </div>
                        <div class="sui-m-media-object__media">
                            <div class="sui-a-avatar">
                                <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            [/...]
        </div>
    </div>
</a>
<div class="sui-m-card">
    <div class="sui-m-card__actions">
        <button class="sui-a-button as--contextual as--primary">
            <i class="sui-a-icon as--start as--fa-ellipsis-v"></i>
            Actions
        </button>
    </div>
    <a class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
        <div class="sui-m-card__footer">
            ...
                    </div>
                </div>
                <div class="sui-g-grid__item as--push">
                    <div class="sui-m-media-object as--middle">
                        <div class="sui-m-media-object__content">
                            <div class="sui-a-label-value as--label-uppercase">
                                <div class="sui-a-label-value__label">
                                    Leader
                                </div>
                            </div>
                        </div>
                        <div class="sui-m-media-object__media">
                            <div class="sui-a-avatar">
                                <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            [/...]
        </div>
    </a>
</div>
Project
Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci amet, architecto atque cum enim eos expedita impedit labore minima mollitia natus neque odit placeat possimus quibusdam sit tempore voluptatum.

Last modified
Today at 10:30 am
Leader
FL
<div class="sui-m-card">
    <div class="sui-m-card__actions">
        <button class="sui-a-button as--contextual as--primary">
            <i class="sui-a-icon as--start as--fa-ellipsis-v"></i>
            Actions
        </button>
    </div>
    <div class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
    </div>
    <a class="sui-m-card__footer">
        ...
                </div>
            </div>
            <div class="sui-g-grid__item as--push">
                <div class="sui-m-media-object as--middle">
                    <div class="sui-m-media-object__content">
                        <div class="sui-a-label-value as--label-uppercase">
                            <div class="sui-a-label-value__label">
                                Leader
                            </div>
                        </div>
                    </div>
                    <div class="sui-m-media-object__media">
                        <div class="sui-a-avatar">
                            <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        [/...]
    </a>
</div>
<div class="sui-m-card">
    <div class="sui-m-card__actions">
        <button class="sui-a-button as--contextual as--primary">
            <i class="sui-a-icon as--start as--fa-ellipsis-v"></i>
            Actions
        </button>
    </div>
    <a class="sui-m-card__content">
        <div class="sui-m-card__category">
            <i class="sui-a-icon as--fa-cube as--start"></i>
            Project
        </div>
        <div class="sui-m-card__title">
            Card title
        </div>
        <div class="sui-m-card__details">
            ...
        </div>
    </a>
    <a class="sui-m-card__footer">
        ...
                </div>
            </div>
            <div class="sui-g-grid__item as--push">
                <div class="sui-m-media-object as--middle">
                    <div class="sui-m-media-object__content">
                        <div class="sui-a-label-value as--label-uppercase">
                            <div class="sui-a-label-value__label">
                                Leader
                            </div>
                        </div>
                    </div>
                    <div class="sui-m-media-object__media">
                        <div class="sui-a-avatar">
                            <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        [/...]
    </a>
</div>

Cards in the grid

<div class="sui-g-grid as--stretch">
    <div class="sui-g-grid__item as--1_2@md as--1_4@xl">
        <div class="sui-m-card">
            ...
                            </div>
                        </div>
                        <div class="sui-g-grid__item as--push">
                            <div class="sui-m-media-object as--middle">
                                <div class="sui-m-media-object__content">
                                    <div class="sui-a-label-value as--label-uppercase">
                                        <div class="sui-a-label-value__label">
                                            Leader
                                        </div>
                                    </div>
                                </div>
                                <div class="sui-m-media-object__media">
                                    <div class="sui-a-avatar">
                                        <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            [/...]
        </div>
    </div>
    <div class="sui-g-grid__item as--1_2@md as--1_4@xl">
        <div class="sui-m-card">
            ...
                            </div>
                        </div>
                        <div class="sui-g-grid__item as--push">
                            <div class="sui-m-media-object as--middle">
                                <div class="sui-m-media-object__content">
                                    <div class="sui-a-label-value as--label-uppercase">
                                        <div class="sui-a-label-value__label">
                                            Leader
                                        </div>
                                    </div>
                                </div>
                                <div class="sui-m-media-object__media">
                                    <div class="sui-a-avatar">
                                        <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            [/...]
        </div>
    </div>
    <div class="sui-g-grid__item as--1_2@md as--1_4@xl">
        <div class="sui-m-card">
            ...
                            </div>
                        </div>
                        <div class="sui-g-grid__item as--push">
                            <div class="sui-m-media-object as--middle">
                                <div class="sui-m-media-object__content">
                                    <div class="sui-a-label-value as--label-uppercase">
                                        <div class="sui-a-label-value__label">
                                            Leader
                                        </div>
                                    </div>
                                </div>
                                <div class="sui-m-media-object__media">
                                    <div class="sui-a-avatar">
                                        <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            [/...]
        </div>
    </div>
</div>