\n
\n \n \n \n \n );\n};\n\nexport default LinkWithIcon;\n```\n\n# Grid\nThe grid is build in 12 column. To use the `className=\"container\"`, `className=\"row\"` and one off the column classes with max sum of 12:\n- column classes\n```bash\nclassName=\"col-12\"\nclassName=\"col-11\"\nclassName=\"col-10\"\nclassName=\"col-9\"\nclassName=\"col-8\"\nclassName=\"col-7\"\nclassName=\"col-6\"\nclassName=\"col-5\"\nclassName=\"col-4\"\nclassName=\"col-3\"\nclassName=\"col-2\"\nclassName=\"col-1\"\n```\n\n```TSX\nimport React from 'react';\n\nconst Test = () => {\n return (\n
\n
\n
content
\n
content
\n
content
\n
\n
\n );\n};\n\nexport default Test;\n```\n\nAlso avaliable with screen sensitive classes:\n```TSX\nimport React from 'react';\n\nconst Test = () => {\n return (\n
\n
\n
content
\n
content
\n
content
\n
\n
\n );\n};\n\nexport default Test;\n```\n- col-xs\n```bash\nclassName=\"col-xs-12\"\nclassName=\"col-xs-11\"\nclassName=\"col-xs-10\"\nclassName=\"col-xs-9\"\nclassName=\"col-xs-8\"\nclassName=\"col-xs-7\"\nclassName=\"col-xs-6\"\nclassName=\"col-xs-5\"\nclassName=\"col-xs-4\"\nclassName=\"col-xs-3\"\nclassName=\"col-xs-2\"\nclassName=\"col-xs-1\"\n```\n- col-sm\n```bash\nclassName=\"col-sm-12\"\nclassName=\"col-sm-11\"\nclassName=\"col-sm-10\"\nclassName=\"col-sm-9\"\nclassName=\"col-sm-8\"\nclassName=\"col-sm-7\"\nclassName=\"col-sm-6\"\nclassName=\"col-sm-5\"\nclassName=\"col-sm-4\"\nclassName=\"col-sm-3\"\nclassName=\"col-sm-2\"\nclassName=\"col-sm-1\"\n```\n- col-md\n```bash\nclassName=\"col-md-12\"\nclassName=\"col-md-11\"\nclassName=\"col-md-10\"\nclassName=\"col-md-9\"\nclassName=\"col-md-8\"\nclassName=\"col-md-7\"\nclassName=\"col-md-6\"\nclassName=\"col-md-5\"\nclassName=\"col-md-4\"\nclassName=\"col-md-3\"\nclassName=\"col-md-2\"\nclassName=\"col-md-1\"\n```\n- col-lg\n```bash\nclassName=\"col-lg-12\"\nclassName=\"col-lg-11\"\nclassName=\"col-lg-10\"\nclassName=\"col-lg-9\"\nclassName=\"col-lg-8\"\nclassName=\"col-lg-7\"\nclassName=\"col-lg-6\"\nclassName=\"col-lg-5\"\nclassName=\"col-lg-4\"\nclassName=\"col-lg-3\"\nclassName=\"col-lg-2\"\nclassName=\"col-lg-1\"\n```\n\n# Tooltip\nTooltip on hover can be used by passing the classes className=\"tooltip-label\", className=\"tooltip\", className=\"tooltip-icon\" and className=\"tooltip-text\".\n```TSX\nimport React from 'react';\nimport { Icon } from \"@gabrielajardimaquino/component-library\";\n\nconst Tooltip = () => {\n return (\n <>\n
\n Your content\n
\n \n \n \n \n This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.\n \n
\n \n \n );\n};\n\nexport default Tooltip;\n```\nTooltip on click can be used by passing the classes className=\"tooltip\", className=\"tooltiptext\" and className=\"tooltip-active\"\n```TSX\nimport React, { useState } from 'react';\nimport { Icon } from \"@gabrielajardimaquino/component-library\";\n\nconst Tooltip = () => {\n const [active, setActive] = useState(false);\n const handleOnClick = () => {\n if (active) {\n setActive(false);\n } else {\n setActive(true);\n }\n };\n return (\n <>\n
\n Your content\n
\n \n \n \n \n This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.\n \n
\n \n \n );\n};\n\nexport default Tooltip;\n```\n\n###### ( png, svg and favicon.ico icons are also avaliable in folders )","readmeFilename":"README.md"}