Spotlight

Status	stable
Published	4.9.0

The polar opposite of a Breakdown, use a Spotlight to highlight an important piece of information or action on the page.

Key account manager

John Doe Longname

john@example.com

<jds-spotlight label="Key account manager">
    John Doe Longname
    <template #sub>john@example.com</template>
    <template #toolbar><jds-button>Select</jds-button></template>
</jds-spotlight>

Use an Article for showing long-form user data:

Company notes

Contact customer directly after each campaign is set up; manual review needed. (Requested 15/10)

Refer to brand site (https://example.com) for promotional material.

<jds-spotlight label="Company notes">
    <jds-article>
        <p>
            Contact customer directly after each campaign is set up; manual review
            needed. (Requested 15/10)
        </p>
        <p>
            Refer to brand site (https://example.com) for promotional material.
        </p>
    </jds-article>
    <template #toolbar><jds-button>Edit</jds-button></template>
</jds-spotlight>

If the main data point is numeric, give it numeric to emphasize the number.

In addition, if you're also highlighting an action, rather than the action being secondary, place it in the #action slot instead:

Unspent campaigns

Credits remaining

<jds-spotlight label="Unspent campaigns" numeric>
    75
    <template #sub>Credits remaining</template>
    <template #action><jds-button>Request setup</jds-button></template>
</jds-spotlight>

And if the information contained is in critical condition and it needs attention ASAP, you can give it a state to reflect this:

Unspent campaigns

Credits remaining

<jds-spotlight icon-label="box" label="Unspent campaigns" numeric status="warning">
    0
    <template #sub>Credits remaining</template>
    <template #action><jds-button disabled>Request setup</jds-button></template>
</jds-spotlight>

If the Spotlight is the sitting in isolation without fellow Spotlights in close proximity, you may choose to assign it the solo mode:

Reach value

10000

Estimated people in target range

<jds-spotlight label="Reach value" numeric solo icon="draft" :loading="loadingReach">
    <template #action><jds-button type="primary">Launch campaign</jds-button></template>
    <template #toolbar><jds-button>Configure</jds-button></template>
    <template #label><jds-terminology tooltip="Based on Facebook's estimate.">Reach value</jds-terminology></template>
    {{ reach }}
    <template #sub>Estimated people in target range</template>
</jds-spotlight>

JdsSpotlight

Props

Prop	Value	Default
label	`string`	(Empty string)	Shorthand for the same text in the `label` slot.
icon	`string`	none	Icon to show prominently above the main content.
iconLabel	`string`	none	Icon to show nearby the label
numeric	`boolean`	false	Use when the main content area contains a number.
solo	`boolean`	false	Use when this spotlight is sitting alone on its own, and you really want to draw attention to it.
status	`warningnormal`	'normal'	Use `warning` if you need to draw attention to this information; in used, you must either ensure either the toolbar or action slot contain a button to resolve this situation, or include help text that describes how to do the same.
loading	`boolean`	false	Your everyday boolean loading state.

Slots

Slot
label
toolbar
default
sub	The small print. Explain the main information here, or, if numeric, provide a unit.
action	If the highlighted subject is an action, supply a button here. Unlike most button contexts, you may disable this button if you it's self-explanatory within the same Spotlight.

Spotlight

JdsSpotlight

Props

Slots

Changelog