Logo
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-logoCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
The most basic implementation is only HTML:
<ts-logo></ts-logo>Type
Multiple logo types are available:
<ts-logo type="full-solid"></ts-logo>
<ts-logo type="mark-gradient"></ts-logo>See TS_LOGO_TYPES to see all allowed types.
Colors
Solid logos are white by default, but can also be black (Terminus Dark) or gray (logo-gray).
<ts-logo type="full-solid" logoColor="gray"></ts-logo>
<ts-logo type="mark-solid" logoColor="black"></ts-logo>See for TS_LOGO_COLORS to see all allowed logo colors.
Sizing
The four main logos are full-size so they will adapt to the width of their container.
Special Cases
Any logo with a gradient will not honor a logoColor.
Available logos
| Name | Description |
|---|---|
full-account-hub |
Special logo for Account Hub, includes spacing and color |
full-gradient |
Default. Gradient mark with logo gray "terminus" text |
full-solid |
Mark with "terminus" text, white by default, accepts logoColor |
mark-gradient |
Mark with gradient |
mark-solid |
Mark without gradient |