Skip to Content

Lexicon v1.0.32

Nameplates

Nameplates

Quickly layout user details with the nameplate component. It uses a table based layout so you can vertically align any content inside with the css property vertical-align.

Use a combination of .nameplate-field and .nameplate-content to control the size of each cell. .nameplate-field has width: 1% and will expand only as wide as its content as long as .nameplate-content is present as a sibling.

Joe Bloggs Subheading

JB

Joe Bloggs Subheading

Joe Bloggs Subheading

SP

Space Program Subheading

TT

Test Test Subheading

TT

Test Test Subheading

<div class="nameplate">
    <div class="nameplate-field">
        <div class="user-icon user-icon-xl">
            <img alt="thumbnail" class="img-responsive" src="../../images/thumbnail_placeholder.gif">
        </div>
    </div>

    <div class="nameplate-content">
        <h1 class="nameplate-heading">Joe Bloggs <small class="nameplate-subheading">Subheading</small></h1>
    </div>
</div>

Nameplate Labels

Nameplates styled as a label.

30 Brilliant Mobile Navigations

10 Tricks

Cream percolator, foam flavour frappuccino grinder cortado.

As, breve java instant cappuccino aftertaste con panna grinder ut robusta.

Cream irish strong kopi-luwak barista, plunger pot viennese cream extraction aftertaste beans lungo.

AC

Caffeine, rich id.

<div class="nameplate-label nameplate-label-default">
    <div class="nameplate-field">
        <div class="user-icon">
            <img alt="thumbnail" class="img-responsive" src="../../images/thumbnail_dock.jpg">
        </div>
    </div>

    <div class="nameplate-content">
        <span class="nameplate-label-text">30 <a href="#1">Brilliant</a> Mobile Navigations</span>
    </div>

    <div class="nameplate-field">
        <a href="#1">
            <span class="">
                <span aria-label="icon-times" class="lexicon-icon-container" role="img">
                    <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-times">
                        <use xlink:href="../../images/icons/icons.svg#times" />
                    </svg>
                </span>
            </span>
        </a>
    </div>
</div>

Nameplate Label Autofit Xs Max

Add class nameplate-label-autofit-xs-max to the container or to a single nameplate-label to make them fill the width of the container in screen sizes 767px and below.

Use the Sass mixin nameplate-label-autofit($media-feature) to create custom nameplate-label-autofit breakpoints e.g. .nameplate-label-autofit-sm { @include nameplate-label-autofit('min-width: $screen-sm'); } for screen sizes 768px and up.

30 Brilliant Mobile Navigations

10 Tricks

Cream percolator, foam flavour frappuccino grinder cortado.

As, breve java instant cappuccino aftertaste con panna grinder ut robusta.

Cream irish strong kopi-luwak barista, plunger pot viennese cream extraction aftertaste beans lungo.

AC

Caffeine, rich id.

<div class="nameplate-label nameplate-label-autofit-xs-max nameplate-label-success">
    <div class="nameplate-field">
        <div class="user-icon"><img alt="thumbnail" class="img-responsive" src="../../images/thumbnail_desk.jpg"></div>
    </div>

    <div class="nameplate-content">
        <span class="nameplate-label-text">As, <a href="#1">breve</a> java instant cappuccino aftertaste con panna grinder ut robusta.</span>
    </div>
    <div class="nameplate-field">
        <a href="#1">
            <span class="icon-monospaced">
                <span aria-label="icon-times" class="lexicon-icon-container" role="img">
                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                        <use xlink:href="../../images/icons/icons.svg#times" />
                    </svg>
                </span>
            </span>
        </a>
    </div>
</div>

<form class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text" />
    </div>

    <div class="form-group">
        <div class="nameplate-label nameplate-label-inverse">
            <div class="nameplate-field">
                <div class="user-icon user-icon-primary user-icon-sm">JB</div>
            </div>
            <div class="nameplate-content">
                <span class="nameplate-label-text">Joe Bloggs</span>
            </div>
            <div class="nameplate-field">
                <a href="#1">
                    <span class="icon-monospaced">
                        <span aria-label="icon-times" class="lexicon-icon-container" role="img">
                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
                                <use xlink:href="../../images/icons/icons.svg#times" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="nameplate-label nameplate-label-inverse">
            <div class="nameplate-field">
                <div class="user-icon user-icon-sm user-icon-warning">SP</div>
            </div>
            <div class="nameplate-content">
                <span class="nameplate-label-text">Space Program</span>
            </div>
            <div class="nameplate-field">
                <a href="#1">
                    <span aria-label="icon-times" class="lexicon-icon-container" role="img">
                        <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-times">
                            <use xlink:href="../../images/icons/icons.svg#times" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="nameplate-label nameplate-label-danger nameplate-label-more">
            <div class="nameplate-content">
                <a class="nameplate-label-text" href="#1">
                    <span class="icon-monospaced">
                        <span aria-label="icon-ellipsis-h" class="lexicon-icon-container" role="img">
                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-h">
                                <use xlink:href="../../images/icons/icons.svg#ellipsis-h" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</form>