@axa-ch/title-section
v0.0.0-beta.1
Published
This title section comes with all needed styles
Downloads
2
Maintainers
gianlucaguarini
valentin-hasler
marek.laco
domirs
axa-ch-user
matthias.zuercher
selinagahlingerKeywords
Readme
Title section
This gives you a fully styled section title according to AXA guidelines.
Attention:
This title is rendered within an H1 Element, meaning you must wrap this component within a custom <section>, <article> or <axa-container> to be semantically correct.
Usage
npm install @axa-ch/title-sectionimport '@axa-ch/title-section';
...
<axa-title-section>This is a title for a section</axa-title-section>React
Create a React-ified title-section with the createElement function from your React version and then use it like this:
import { createElement } from 'react';
import createAXATitleSectionReact from '@axa-ch/title-section/lib/index.react';
const AXATitleSectionReact = createAXATitleSectionReact(createElement);
export default AXATitleSectionReact;<AXATitleSectionReact>A section title</AXATitleSectionReact>Pure HTML pages
Import the title-section-defining script and use a title-section like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Your awesome title</title>
</head>
<body>
<axa-title-section>This is a title for a section</axa-title-section>
<script src="node_modules/@axa-ch/title-section/dist/index.js"></script>
</body>
</html>Properties
Variant
| Attribute | Details |
| ----------------- | ------------------------------------------------------- |
| variant="white" | The title in white, to be used on different backgrounds |