Logo
The <fds-logo> component displays an image encoded in Base64 from the --fds-logo CSS variable.
Usage
Import
npm i @finastra/logo
import '@finastra/logo';
...
<fds-logo dense></fds-logo>CSS API
Here is the list of CSS custom properties, aka CSS Variables:
| Name | Description |
|---|---|
| --fds-logo | String representing an image encoded in base64 |
| --fds-logo-width | Width of the logo |
| --fds-logo-height | Height of the logo |
--fds-logovariable expects the following format:url(BASE64_ENCODED_IMAGE)
Example:
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjUgMjAwIj4KPHZpZXcgaWQ9ImZsYW1lIiB2aWV3Qm94PSIwIDAgMTYwIDIwMCIvPgo8dmlldyBpZD0ibmFtZSIgdmlld0JveD0iMjQwIDc4IDE4NSAxMjIiIC8+CjxwYXRoIGQ9Ik0zOTQuNSA3OHYyOC44SDQyNXYxNS42aC0zMC41VjE1OGMwIDMuNi4xIDcuMi41IDEwLjMuOCA1LjMgNCAxMC41IDguNCAxMi41IDUuNyAyLjYgOS43IDIuMSAyMS42IDEuN2wtMi45IDE3LjJjLS44LjQtNCAuMy03IC4zLTcgMC0zMy40IDIuNS0zOC44LTI0LjctLjktNC43LS43LTkuNS0uNy0xNi45di0zNS44SDM2MmwuMi0xNS45aDEzLjRWNzh6bS01MS43IDI4Ljd2OTEuNUgzMjR2LTkxLjV6bTAtMjguN3YxNi4zaC0xOVY3OHptLTgzLjYgMTAyLjJoNDguMmwtMTggMThIMjQwVjc4aDE5LjJ6Ii8+CjxwYXRoIGZpbGw9IiMwMGU4ZmYiIGQ9Ik00MCAxMjBsMjAtNjBsOTAgOTBsLTMwIDUwbC00MC00MGgtMjAiLz4KPHBhdGggZmlsbD0iIzI4MzE5OCIgZD0iTTgwIDE2MHYtODBsNDAtNDB2ODBNMCAxNjBsNDAgNDBsMjAtNDBsLTIwLTQwaC0yMCIvPgo8cGF0aCBmaWxsPSIjMzI0ZmZmIiBkPSJNNDAgMTIwdi04MGw0MC00MHY4ME0xMjAgMjAwdi04MGw0MC00MHY4ME0wIDE2MHYtODBsNDAgNDAiLz4KPHBhdGggZmlsbD0iIzBmZiIgZD0iTTQwIDIwMHYtODBsNDAgNDAiLz4KPC9zdmc+Cg==)
API
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
dense |
boolean |
false | Logo in a smaller size |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--fds-logo |
String representing an image encoded in base64 | |
--fds-logo-height |
"60px" | |
--fds-logo-width |
"122px" |