About
Themes
Foundations
Components
Utilities
Tiles
Tiles description
Sample tiles 1
ready
		<section>
    <div class="wrap">
        <div class="pow-flex-row pow-flexbox grid-container-item pow-flex-wrap">
            <div class="pow-margin-bottom-md item pow-admin-item-ref pow-flexbox pow-flex-row pow-flex-wrap item-size-xs-2 item-size-sm-2 item-size-md-2 item-size-lg-2">
                <div class="pow-flexbox job-item pow-border-sm pow-border-black200 pow-background-white pow-padding-top-sm pow-border-radius pow-webpart-border-radius pow-flex-column pow-flex-nowrap pow-flex-fit">
                    <a target="_self" class="pow-flex-row pow-flexbox pow-padding-left-sm pow-padding-right-sm pow-padding-bottom-md pow-flex-nowrap pow-flex-justify-center" href="#" data-interception="on">
                        <span class="visuallyhidden">Budget Analyst</span>
                        <span class="pow-media-md pow-rounded" aria-hidden="true">
                            <img src="https://via.placeholder.com/70x70" alt="Budget Analyst">
                        </span>
                    </a>
                    <div class="pow-flex-row pow-flexbox pow-flex-align-items-center pow-padding-left-sm pow-padding-right-sm pow-margin-bottom-sm">
                        <div class="pow-color-black pow-job-type pow-tag pow-no-margin pow-no-shadow pow-font-regular pow-background-black100 pow-text-align-center pow-padding-left-xs pow-padding-right-xs">CDI</div>
                        <div class="pow-flex-row pow-flexbox pow-job-location pow-text-size-xs pow-color-black400 pow-flex-align-right">
                            <span class="pow-icon icon-size-xs icon-powell-location icon-color-black300"></span> New York
                        </div>
                    </div>
                    <a class="pow-job-title pow-heading-3 pow-max-line-2 pow-text-align-center pow-margin-bottom-xs pow-padding-left-xs pow-padding-right-xs" target="_self" title="Budget Analyst" data-ellipsis="" data-ellipsis-symbol="…" href="#" data-interception="on">Budget Analyst</a>
                    <div class="pow-font-bold pow-job-department pow-text-size-xs pow-color-primary pow-text-align-center">Finance</div>
                    <div class="pow-job-date pow-font-regular pow-text-size-xs pow-color-black700 pow-text-align-center pow-margin-top-sm"><span class="pow-color-black400">Published on the</span> December 18, 2019</div>
                    <div class="pow-job-skills pow-border-top-black200 pow-border-bottom-black200 pow-border-bottom-sm pow-border-top-sm pow-padding-left-sm pow-padding-right-sm pow-padding-top-xs pow-padding-bottom-xs pow-margin-top-md hidden">
                        <div class="pow-color-black pow-font-regular pow-text-size-md pow-text-align-center pow-max-line-3">&#8203;&#8203;Analytical and quantitative skills.Broad-based business knowledge.Attention to detail.Strong computer skills.Excellent written and verbal&nbsp;communication skills.Sound judgment.</div>
                    </div>
                    <div class="pow-job-desc pow-padding-md">
                        <span class="pow-color-black pow-font-regular pow-text-size-md pow-max-line-4 pow-text-align-center" data-ellipsis="" data-ellipsis-symbol="…">&#8203;Experienced&nbsp;Budget analyst,&nbsp;&nbsp;able to process a variety of information, evaluate costs and benefits, and solve complex problems.</span>
                    </div>
                    <div class="pow-flex-row pow-flexbox pow-flex-justify-center pow-flex-align-bottom">
                        <a class="pow-button" target="_self" title="Budget Analyst" href="#" data-interception="on">Read more</a>
                    </div>
                </div>
            </div>

            <div class="pow-margin-bottom-md item pow-admin-item-ref pow-flexbox pow-flex-row pow-flex-wrap item-size-xs-2 item-size-sm-2 item-size-md-2 item-size-lg-2">
                <div class="pow-flexbox job-item pow-border-sm pow-border-black200 pow-background-white pow-padding-top-sm pow-border-radius pow-webpart-border-radius pow-flex-column pow-flex-nowrap pow-flex-fit">
                    <a target="_self" class="pow-flex-row pow-flexbox pow-padding-left-sm pow-padding-right-sm pow-padding-bottom-md pow-flex-nowrap pow-flex-justify-center" href="#" data-interception="on">
                        <span class="visuallyhidden">Budget Analyst</span>
                        <span class="pow-media-md pow-rounded" aria-hidden="true">
                            <img src="https://via.placeholder.com/70x70" alt="Budget Analyst">
                        </span>
                    </a>
                    <div class="pow-flex-row pow-flexbox pow-flex-align-items-center pow-padding-left-sm pow-padding-right-sm pow-margin-bottom-sm">
                        <div class="pow-color-black pow-job-type pow-tag pow-no-margin pow-no-shadow pow-font-regular pow-background-black100 pow-text-align-center pow-padding-left-xs pow-padding-right-xs">CDI</div>
                        <div class="pow-flex-row pow-flexbox pow-job-location pow-text-size-xs pow-color-black400 pow-flex-align-right">
                            <span class="pow-icon icon-size-xs icon-powell-location icon-color-black300"></span> New York
                        </div>
                    </div>
                    <a class="pow-job-title pow-heading-3 pow-max-line-2 pow-text-align-center pow-margin-bottom-xs pow-padding-left-xs pow-padding-right-xs" target="_self" title="Budget Analyst" data-ellipsis="" data-ellipsis-symbol="…" href="#" data-interception="on">Budget Analyst</a>
                    <div class="pow-font-bold pow-job-department pow-text-size-xs pow-color-primary pow-text-align-center">Finance</div>
                    <div class="pow-job-date pow-font-regular pow-text-size-xs pow-color-black700 pow-text-align-center pow-margin-top-sm"><span class="pow-color-black400">Published on the</span> December 18, 2019</div>
                    <div class="pow-job-skills pow-border-top-black200 pow-border-bottom-black200 pow-border-bottom-sm pow-border-top-sm pow-padding-left-sm pow-padding-right-sm pow-padding-top-xs pow-padding-bottom-xs pow-margin-top-md hidden">
                        <div class="pow-color-black pow-font-regular pow-text-size-md pow-text-align-center pow-max-line-3">&#8203;&#8203;Analytical and quantitative skills.Broad-based business knowledge.Attention to detail.Strong computer skills.Excellent written and verbal&nbsp;communication skills.Sound judgment.</div>
                    </div>
                    <div class="pow-job-desc pow-padding-md">
                        <span class="pow-color-black pow-font-regular pow-text-size-md pow-max-line-4 pow-text-align-center" data-ellipsis="" data-ellipsis-symbol="…">&#8203;Experienced&nbsp;Budget analyst,&nbsp;&nbsp;able to process a variety of information, evaluate costs and benefits, and solve complex problems.</span>
                    </div>
                    <div class="pow-flex-row pow-flexbox pow-flex-justify-center pow-flex-align-bottom">
                        <a class="pow-button" target="_self" title="Budget Analyst" href="#" data-interception="on">Read more</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Sample tiles 2
ready
		<section>
    <div class="wrap">
        <div class="pow-flex-row pow-flexbox grid-container-item pow-flex-wrap">

            <div class="pow-margin-bottom-md item pow-admin-item-ref pow-flexbox pow-flex-row pow-flex-wrap item-size-xs-1 item-size-sm-3 item-size-md-3 item-size-lg-3">
                <div class="pow-flexbox pow-border-sm pow-border-black200 pow-background-white pow-border-radius pow-webpart-border-radius pow-flex-column pow-flex-nowrap pow-flex-fit pow-padding-top-sm">
                    <div class="pow-flex-row pow-flexbox pow-welcometo-img container-image pow-flex-justify-center pow-margin-bottom-xs pow-relative-ref" style="max-width: 270px; margin-left: auto; margin-right: auto">
                        <a class="pow-media-lg pow-rounded" target="_self" href="#" data-interception="on">
                            <span class="visuallyhidden">Mike Brown</span>
                            <img alt="Mike Brown" class="lazyloaded" src="https://via.placeholder.com/70x70">
                        </a>
                    </div>
                    <a class="pow-welcometo-title pow-heading-3 pow-max-line-3 pow-text-align-center pow-margin-bottom-sm pow-padding-left-sm pow-padding-right-sm" target="_self" data-ellipsis="" data-ellipsis-symbol="…" href="#" data-interception="on">Mike Brown</a>
                    <div class="pow-font-bold pow-welcometo-job pow-text-size-md pow-color-primary pow-max-line-1 pow-flex-no-shrink pow-text-align-center pow-margin-bottom-xs pow-padding-left-sm pow-padding-right-sm">Marketing Researcher</div>
                    <div class="pow-color-black pow-welcometo-date pow-font-light pow-max-line-1 pow-text-size-md pow-flex-no-shrink pow-text-align-center pow-margin-bottom-sm pow-padding-left-sm pow-padding-right-sm">07/08/2020</div>
                    <div class="pow-flexbox pow-tile-info-container pow-border-top-black200 pow-border-bottom-black200 pow-border-bottom-sm pow-border-top-sm pow-welcometo-country pow-flex-wrap pow-flex-justify-center pow-padding-top-sm pow-padding-bottom-sm pow-padding-left-sm pow-padding-right-sm">
                        <span class="pow-tag pow-font-regular pow-text-size-md pow-background-black700 pow-color-white pow-text-align-center">France</span>
                    </div>
                    <div class="pow-flexbox pow-tile-info-container pow-welcometo-department pow-flex-wrap pow-flex-justify-center pow-flex-align-bottom pow-padding-top-sm pow-padding-bottom-sm pow-padding-left-sm pow-padding-right-sm">
                        <span class="pow-font-light pow-text-size-md pow-text-align-center">Research</span>
                    </div>
                </div>
            </div>

            <div class="pow-margin-bottom-md item pow-admin-item-ref pow-flexbox pow-flex-row pow-flex-wrap item-size-xs-1 item-size-sm-3 item-size-md-3 item-size-lg-3">
                <div class="pow-flexbox pow-border-sm pow-border-black200 pow-background-white pow-border-radius pow-webpart-border-radius pow-flex-column pow-flex-nowrap pow-flex-fit pow-padding-top-sm">
                    <div class="pow-flex-row pow-flexbox pow-welcometo-img container-image pow-flex-justify-center pow-margin-bottom-xs pow-relative-ref" style="max-width: 270px; margin-left: auto; margin-right: auto">
                        <a class="pow-media-lg pow-rounded" target="_self" href="#" data-interception="on">
                            <span class="visuallyhidden">Mike Brown</span>
                            <img alt="Mike Brown" class="lazyloaded" src="https://via.placeholder.com/70x70">
                        </a>
                    </div>
                    <a class="pow-welcometo-title pow-heading-3 pow-max-line-3 pow-text-align-center pow-margin-bottom-sm pow-padding-left-sm pow-padding-right-sm" target="_self" data-ellipsis="" data-ellipsis-symbol="…" href="#" data-interception="on">Mike Brown</a>
                    <div class="pow-font-bold pow-welcometo-job pow-text-size-md pow-color-primary pow-max-line-1 pow-flex-no-shrink pow-text-align-center pow-margin-bottom-xs pow-padding-left-sm pow-padding-right-sm">Marketing Researcher</div>
                    <div class="pow-color-black pow-welcometo-date pow-font-light pow-max-line-1 pow-text-size-md pow-flex-no-shrink pow-text-align-center pow-margin-bottom-sm pow-padding-left-sm pow-padding-right-sm">07/08/2020</div>
                    <div class="pow-flexbox pow-tile-info-container pow-border-top-black200 pow-border-bottom-black200 pow-border-bottom-sm pow-border-top-sm pow-welcometo-country pow-flex-wrap pow-flex-justify-center pow-padding-top-sm pow-padding-bottom-sm pow-padding-left-sm pow-padding-right-sm">
                        <span class="pow-tag pow-font-regular pow-text-size-md pow-background-black700 pow-color-white pow-text-align-center">France</span>
                    </div>
                    <div class="pow-flexbox pow-tile-info-container pow-welcometo-department pow-flex-wrap pow-flex-justify-center pow-flex-align-bottom pow-padding-top-sm pow-padding-bottom-sm pow-padding-left-sm pow-padding-right-sm">
                        <span class="pow-font-light pow-text-size-md pow-text-align-center">Research</span>
                    </div>
                </div>
            </div>

            <div class="pow-margin-bottom-md item pow-admin-item-ref pow-flexbox pow-flex-row pow-flex-wrap item-size-xs-1 item-size-sm-3 item-size-md-3 item-size-lg-3">
                <div class="pow-flexbox pow-border-sm pow-border-black200 pow-background-white pow-border-radius pow-webpart-border-radius pow-flex-column pow-flex-nowrap pow-flex-fit pow-padding-top-sm">
                    <div class="pow-flex-row pow-flexbox pow-welcometo-img container-image pow-flex-justify-center pow-margin-bottom-xs pow-relative-ref" style="max-width: 270px; margin-left: auto; margin-right: auto">
                        <a class="pow-media-lg pow-rounded" target="_self" href="#" data-interception="on">
                            <span class="visuallyhidden">Mike Brown</span>
                            <img alt="Mike Brown" class="lazyloaded" src="https://via.placeholder.com/70x70">
                        </a>
                    </div>
                    <a class="pow-welcometo-title pow-heading-3 pow-max-line-3 pow-text-align-center pow-margin-bottom-sm pow-padding-left-sm pow-padding-right-sm" target="_self" data-ellipsis="" data-ellipsis-symbol="…" href="#" data-interception="on">Mike Brown</a>
                    <div class="pow-font-bold pow-welcometo-job pow-text-size-md pow-color-primary pow-max-line-1 pow-flex-no-shrink pow-text-align-center pow-margin-bottom-xs pow-padding-left-sm pow-padding-right-sm">Marketing Researcher</div>
                    <div class="pow-color-black pow-welcometo-date pow-font-light pow-max-line-1 pow-text-size-md pow-flex-no-shrink pow-text-align-center pow-margin-bottom-sm pow-padding-left-sm pow-padding-right-sm">07/08/2020</div>
                    <div class="pow-flexbox pow-tile-info-container pow-border-top-black200 pow-border-bottom-black200 pow-border-bottom-sm pow-border-top-sm pow-welcometo-country pow-flex-wrap pow-flex-justify-center pow-padding-top-sm pow-padding-bottom-sm pow-padding-left-sm pow-padding-right-sm">
                        <span class="pow-tag pow-font-regular pow-text-size-md pow-background-black700 pow-color-white pow-text-align-center">France</span>
                    </div>
                    <div class="pow-flexbox pow-tile-info-container pow-welcometo-department pow-flex-wrap pow-flex-justify-center pow-flex-align-bottom pow-padding-top-sm pow-padding-bottom-sm pow-padding-left-sm pow-padding-right-sm">
                        <span class="pow-font-light pow-text-size-md pow-text-align-center">Research</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Sample tiles documents
ready
		<section class="pow-cards-large documents-tile">
    <div class="wrap">
        <div class="grid-container-item pow-flexbox pow-flex-row pow-flex-wrap">

            <div class="item pow-admin-item-ref pow-flexbox pow-flex-row pow-flex-wrap pow-margin-bottom-md item-size-xs-1 item-size-sm-3 item-size-md-3 item-size-lg-3">
                <div class="pow-cards-large-wrapper pow-box-shadow pow-webpart-box-shadow pow-border-radius pow-webpart-border-radius pow-flexbox pow-flex-column pow-flex-nowrap pow-flex-fit">
                    <a href="#" class="container-image pow-media-cards-large pow-pattern-1 pow-background-black100 pow-relative-ref">
                        <span class="visuallyhidden">Title doc</span>
                        <div class="pow-icon-container-md pow-rounded pow-circled-white pow-background-white pow-center pow-box-shadow pdf pow-fallback-icon"></div>
                    </a>
                    <div class="container-content pow-font-regular pow-background-white pow-flexbox pow-flex-column pow-flex-nowrap pow-flex-fit pow-padding-top-md pow-padding-right-md pow-padding-bottom-sm pow-padding-left-md">
                        <div class="cards-upper-infos pow-flexbox pow-flex-row pow-flex-nowrap pow-flex-space-between pow-flex-align-center pow-margin-bottom-xs">
                            <div class="cards-taxo pow-color-primary pow-max-line-1 pow-flex-align-left pow-flex-fit">
                                <span style="display:inline" class="pow-taxo pow-text-size-xs">
                                    Cat 1
                                </span>
                                <span style="display:inline" class="pow-taxo pow-text-size-xs">
                                    Cat 2
                                </span>
                            </div>
                            <div class="cards-date pow-color-black400 pow-max-line-1 pow-flex-no-shrink pow-flex-align-right pow-margin-left-sm">
                                <span class="pow-text-size-xs">12.12.20</span>
                            </div>
                        </div>
                        <div class="cards-title">
                            <a href="#" class="pow-heading-3 pow-max-line-3 pow-margin-bottom-sm" data-ellipsis data-ellipsis-symbol="&hellip;">Title doc</a>
                        </div>
                        <div class="cards-description">
                            <span class="pow-color-black pow-text-size-md pow-max-line-3" data-ellipsis data-ellipsis-symbol="&hellip;">
                                Description of the document
                            </span>
                        </div>
                        <div class="cards-ubber-infos pow-flexbox pow-flex-row pow-flex-wrap pow-flex-space-between pow-flex-align-items-center pow-flex-align-bottom">
                            <div class="pow-persona pow-flex-align-left">
                                <div class="pow-persona-image">
                                    <img src="https://via.placeholder.com/40x40" alt="">
                                </div>
                                <div class="pow-persona-content">
                                    <span class="pow-persona-name pow-color-black400 pow-text-size-xs">John Doe</span>
                                </div>
                            </div>
                            <div class="pow-additional-infos-container pow-flex-align-right pow-flex-no-shrink">
                                <span class="pow-additional-infos icon-eye2">
                                    <view-count>12</view-count>
                                </span>
                                <span class="pow-additional-infos icon-powell-like">
                                    34
                                </span>
                                <span class="pow-additional-infos icon-powell-comments">
                                    <span>26</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item pow-admin-item-ref pow-flexbox pow-flex-row pow-flex-wrap pow-margin-bottom-md item-size-xs-1 item-size-sm-3 item-size-md-3 item-size-lg-3">
                <div class="pow-cards-large-wrapper pow-box-shadow pow-webpart-box-shadow pow-border-radius pow-webpart-border-radius pow-flexbox pow-flex-column pow-flex-nowrap pow-flex-fit">
                    <a href="#" class="container-image pow-media-cards-large pow-pattern-1 pow-background-black100 pow-relative-ref">
                        <span class="visuallyhidden">Title doc</span>
                        <div class="pow-icon-container-md pow-rounded pow-circled-white pow-background-white pow-center pow-box-shadow pdf pow-fallback-icon"></div>
                    </a>
                    <div class="container-content pow-font-regular pow-background-white pow-flexbox pow-flex-column pow-flex-nowrap pow-flex-fit pow-padding-top-md pow-padding-right-md pow-padding-bottom-sm pow-padding-left-md">
                        <div class="cards-upper-infos pow-flexbox pow-flex-row pow-flex-nowrap pow-flex-space-between pow-flex-align-center pow-margin-bottom-xs">
                            <div class="cards-taxo pow-color-primary pow-max-line-1 pow-flex-align-left pow-flex-fit">
                                <span style="display:inline" class="pow-taxo pow-text-size-xs">
                                    Cat 1
                                </span>
                                <span style="display:inline" class="pow-taxo pow-text-size-xs">
                                    Cat 2
                                </span>
                            </div>
                            <div class="cards-date pow-color-black400 pow-max-line-1 pow-flex-no-shrink pow-flex-align-right pow-margin-left-sm">
                                <span class="pow-text-size-xs">12.12.20</span>
                            </div>
                        </div>
                        <div class="cards-title">
                            <a href="#" class="pow-heading-3 pow-max-line-3 pow-margin-bottom-sm" data-ellipsis data-ellipsis-symbol="&hellip;">Title doc</a>
                        </div>
                        <div class="cards-description">
                            <span class="pow-color-black pow-text-size-md pow-max-line-3" data-ellipsis data-ellipsis-symbol="&hellip;">
                                Description of the document
                            </span>
                        </div>
                        <div class="cards-ubber-infos pow-flexbox pow-flex-row pow-flex-wrap pow-flex-space-between pow-flex-align-items-center pow-flex-align-bottom">
                            <div class="pow-persona pow-flex-align-left">
                                <div class="pow-persona-image">
                                    <img src="https://via.placeholder.com/40x40" alt="">
                                </div>
                                <div class="pow-persona-content">
                                    <span class="pow-persona-name pow-color-black400 pow-text-size-xs">John Doe</span>
                                </div>
                            </div>
                            <div class="pow-additional-infos-container pow-flex-align-right pow-flex-no-shrink">
                                <span class="pow-additional-infos icon-eye2">
                                    <view-count>12</view-count>
                                </span>
                                <span class="pow-additional-infos icon-powell-like">
                                    34
                                </span>
                                <span class="pow-additional-infos icon-powell-comments">
                                    <span>26</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>