2.0 KiB
2.0 KiB
Default Superscript
The default superscript was intially designed to offer supporting information on the service menu regarding service status. It can used as a typographic ident to support titles and names without the need for iconography.
// Name: Example
const React = require('react');
const Sup = require('/').Sup;
const P = require('/').P;
const Small = require('/').Small;
const styles = {
color: '#979797',
marginBottom: '22px',
display: 'block',
marginTop: '6px',
padding: 0
};
<div>
<P>
Superscript Example
<Sup>Superscript</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>;
Alert Superscript
The Alert variation of superscript is to be used as an excliamation, to announce supporting information that requires action, such as ‘New service’ or ‘Available now’.
// Name: Example
const React = require('react');
const Sup = require('/').Sup;
const P = require('/').P;
const Small = require('/').Small;
const styles = {
color: '#979797',
marginBottom: '22px',
display: 'block',
marginTop: '6px',
padding: 0
};
<div>
<P>
Superscript Example
<Sup alert>Alert Superscript</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>;
Badge Superscript
The badge variation of superscript is for when a specific element of information is repeated numberous times in one page/component. In being more visual, it becomes an ‘ident’ in information dense areas to allow for clear recognition.
// Name: Example
const React = require('react');
const Sup = require('/').Sup;
const P = require('/').P;
const Small = require('/').Small;
const styles = {
color: '#979797',
marginBottom: '22px',
display: 'block',
marginTop: '6px',
padding: 0
};
<div>
<P>
Superscript Example
<Sup badge>SSD</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>;