CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Hero elements are large banners, that are usually found on the landing page of a web site or similar user interface.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/hero@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Default
This is the default html implementation of the hero. Different features/modifiers implementation is found under relevant sections.
<section class="if hero">
<div class="if container">
<div class="if content hasno-breadcrumbs">
<h1 class="if heading large">Husforsikring</h1>
<p class="if text lead">
Trygge rammer for dig og din familie med en husforsikring.
<strong class="if">Få 10% rabat, når du handler online!</strong>
</p>
<button type="button" class="if button primary large">Beregn pris</button>
</div>
<div class="if image"></div>
</div>
</section>
With studio image
<section class="if hero">
<div class="if container">
<div class="if content">
<h1 class="if heading large">Husforsikring</h1>
<p class="if text lead">
Trygge rammer for dig og din familie med en husforsikring.
<strong class="if">Få 10% rabat, når du handler online!</strong>
</p>
<button type="button" class="if button primary large">Beregn pris</button>
</div>
<div
class="if image studio"
style="background-image: url('https://v.imgi.no/nbtacvz4uu-MOODBOARD/2042');"
></div>
</div>
</section>
Live image
<section class="if hero">
<div class="if container">
<div class="if content">
<h1 class="if heading largest">Det oknepiga försäkringsbolaget</h1>
<p class="if text lead">Skaffa rätt skydd för ditt hem och dina saker</p>
<button type="button" class="if button primary large">Hitta försäkring</button>
</div>
<div class="if image live">
<video
style="position:relative; left: -32%;"
class="if video"
loop="true"
muted="true"
autoplay
preload="auto"
src="https://static.design.if.eu/videos/studio/If_studio-mov_BA-Private.mp4"
></video>
</div>
</div>
</section>
With Quick Facts
<section class="if hero">
<div class="if container">
<div class="if content">
<h1 class="if heading largest">Villaförsäkring</h1>
<p class="if text lead">
Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar,
byggnaderna och tomten.
</p>
<ul class="if quick-facts list">
<li class="if quick-fact">Huskollen ingår</li>
<li class="if quick-fact">Nyvärde hemelektronik</li>
<li class="if quick-fact">Köp online - få 10% rabatt!</li>
</ul>
<button type="button" class="if button primary large">Beräkna pris</button>
</div>
<div
class="if image studio"
style="background-image: url(https://v.imgi.no/nbtacvz4uu-MOODBOARD/2042);"
></div>
</div>
</section>
No image
<section class='if hero'>
<div class='if container'>
<div class='if content no-image'>
…
</div>
</div>
</div>
Reverse
<section class="if hero reverse">…</section>
Entry form
<section class="if hero entry">…</section>
Column
<section class="if hero [reverse] column">…</section>
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
⚠ BREAKING CHANGES
- 🧨 The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- 🧨 Util is now renamed to Utils
- 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
- 🧨 Navigation structure has now changed. Please see release notes!
Documentation Updates
-
✏️ Adjust documentation, examples etc (d161cd3)
-
✏️ Move position of the quick links (5cb0897)
-
✏️ Remove unneeded margins for shortcuts (36c7e8d)
-
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
💡 Reduce spacing tokens, use correct size tokens (97aa461)
-
💡 Rename scope and repository (3ea5423)
-
💡 Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
- use correct version for utils (49e72d9)
13.11.0 (2021-10-19)
Features
- 🎸 Input field hot reload (eac76b7)
13.10.6 (2021-10-18)
Bug Fixes
- 🐛 Fix failing test (fb2a033) . Add hereo element layout style update to other preprocessors as well
✅ Closes: 463240
- 🐛 fix hero layout styles (be163d3) . ✅ Closes: 463240
13.7.0 (2021-09-22)
Documentation Updates
- ✏️ Update linking layout and naming (15c383b)
Miscellaneous chores
- 🤖 FIxing some layout issues, removing unwanted chars (0c3207f)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
bootstrap (d23e139)
- 🤖 Use correct order for diff (cc6a4fd)
12.15.1 (2021-08-24)
Bug Fixes
- 🐛 Use correct demo files, updated dev files (f53434b) , closes #459841 . for hero navigation component
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
-
🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
🤖 Reinstall (e660696)
-
🤖 Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
12.0.0 (2021-05-05)
⚠ BREAKING CHANGES
- 🧨 All of the mixins have now been renamed
- 🧨 Notification is now renamed to Alert Banner
- 🧨 USPs component is now renamed to Quick Facts
- 🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
- 🧨 The Hero Navigation is now extracted from the Hero component
- 🧨 Footer is now renamed to Global Footer
- 🧨 Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts
- 🧨 Selection controls is no more. Has ceased to be. Bereft of life, it rests in peace. This is an ex-component. The component is split into Radio Buttons, Toggle Control and Checkbox
Features
-
🎸 Extract components from selection control (50607a4) , closes #336508
-
🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Bug Fixes
- 🐛 Update references (c08f107)
Code Refactoring
-
💡 Extract Hero Navigation from Hero (0dc8f49) , closes #336508
-
💡 Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508
-
💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508
-
💡 Renamed USPs component to Quick Facts (9120381) , closes #336508
Miscellaneous chores
-
🤖 Convert typography tokens from theo to SD (e48f255)
-
🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
-
🤖 Finalize breakpoint token conversion (f50ea0d)
-
🤖 Reinstall (2c763ea)
-
🤖 Update all design token references (c640d15)
-
🤖 Update all example references to old menu (81205ad)
-
🤖 Update references to util variables (b79ec36)
-
🤖 Updating links (70f166e)
-
🤖 Use updated classnames for text button (old tertiary) (694cf67)
rebuild (7edb430)
-
🤖 Rename Change Log to Changelog (d412e63)
-
🤖 Remove all references to sketch (35fc554) , closes #339203
-
🤖 Update package fields (200c0af)
10.0.0 (2021-02-15)
⚠ BREAKING CHANGES
- 🧨 form-group is now renamed to input-wrapper, a more logical name
Code Refactoring
8.1.7 (2021-01-11)
Bug Fixes
8.1.1 (2020-12-21)
Documentation Updates
8.0.0 (2020-12-14)
⚠ BREAKING CHANGES
- 🧨 The hero block board is now a separate component named Split.
Code Refactoring
7.9.2 (2020-12-03)
Bug Fixes
-
🐛 Adjust small block board, remove cascading conflict css (1f711e3) , closes #314811
-
🤖 Update hero dev file with current example (b3fc932)
-
🤖 Use a more distint class name for doc crosslink links (2694867)
7.4.0 (2020-11-17)
Features
Bug Fixes
- 🐛 Reduce max-width of buttons for tablet portrait mode (ea1c06e)
7.1.1 (2020-11-16)
Bug Fixes
-
🐛 Adjusted hero content spacing, updated preprocessors (8c0d225)
-
🐛 Fix margin error for lifestyle image in column (99bcf46) , closes #311905
-
🐛 Fix positioning of image in column hero (a304d7b) , closes #311905
-
🤖 Update dev and demo files (d188842)
7.1.0 (2020-11-16)
Features
6.45.1 (2020-11-12)
Bug Fixes
6.44.0 (2020-11-11)
Bug Fixes
-
🐛 Fix breadcrumb positioning and hero spacing (35e6b19) , closes #307691
-
🤖 Started to work on bug (55a83c8)
6.43.3 (2020-11-03)
Miscellaneous chores
- 🤖 Manually set version (e4d9ca6)
6.43.1 (2020-11-02)
Bug Fixes
Documentation Updates
- ✏️ Update hero documentation to fit new layout (b0a18d1)
6.43.0 (2020-10-27)
Miscellaneous chores
-
🤖 Add sg class to body in hero demo to display images (2d33709)
-
🤖 Update comment about entry class in hero (8fc5a50)
6.42.0 (2020-10-22)
Bug Fixes
-
🐛 Do not remove image on mobile for hero nav steps (7504952) , closes #302035
-
🐛 Fix navigation issue, need to display list, no scroll (a741ea4)
-
🐛 Fix navigation list heights, add nav lifestyle to demo (fd11aa0) , closes #302038
-
🐛 Layout issues with entry, breadcrumbs and column types (c82051a) , closes #301600
-
🐛 Use new type of inline arrow to break words correctly (ed92767) , closes #297665
Documentation Updates
-
✏️ Update documentation (be92791)
-
🤖 Show breadcrumbs in hero dev and demo (5b530fc) , closes #301598
-
🤖 Update hero navigation preprocessor files (d682fef)
-
🤖 Update preprocessor files for hero (a662c82)
-
🤖 Update preprocessor files for hero (f479523)
-
🤖 Rename repository from guybrush to if-design-system (c18bccd)
6.38.1 (2020-10-19)
Bug Fixes
6.37.0 (2020-10-15)
Bug Fixes
-
🐛 Use overflow auto instead of scroll to prevent scrollbar from beeing visible when not needed in Chrome (0e870e3)
reinstall (2cefe15)
6.36.1 (2020-10-13)
Bug Fixes
- 🐛 Make hero navigation more loose in height restrictions (7397b9e) . Now usable with longer titles on smaller devices. We bump down the image
6.36.0 (2020-10-12)
Miscellaneous chores
- 🤖 Add what-input to demo and dev files (56801b7)
6.35.1 (2020-10-05)
Bug Fixes
-
🐛 Fix navigation item word breaks (2057de7)
-
🐛 Remove navigation image on mobile for step 1 and 2 (8964a26)
-
🐛 Resize entry form to 55%/45% (01fc6bd)
6.30.1 (2020-09-21)
Bug Fixes
- 🐛 Fix heroes once and for all (abf2e76)
6.30.0 (2020-09-15)
Features
- 🎸 Add lifestyle support to hero navigation (9aa3009)
Documentation Updates
- ✏️ Add implementation example for lifestyle hero nav (2d7f6c7)
6.29.6 (2020-09-10)
Bug Fixes
- 🐛 Another attempt to fix this mess. Set max-height (87d0c2d)
6.29.5 (2020-09-10)
Bug Fixes
- 🐛 Fix studio in portrait mode (fa7d3ea)
6.29.4 (2020-09-09)
Bug Fixes
- 🐛 Fix hero navigation issue with studio image (c40269a)
Documentation Updates
- ✏️ Update documentation and demos for hero navigation (7aefca1)
6.29.3 (2020-09-07)
Documentation Updates
- ✏️ Merge atoms/molecules/organisms into components (90ed590)
6.27.1 (2020-08-31)
Bug Fixes
- 🐛 Use correct css class for studio image in hero (80567a9)
6.27.0 (2020-08-27)
Features
- 🎸 Add support for entry type hero, for larger forms (799c27c) . To be deprecated in v2 of web entry forms
Documentation Updates
- ✏️ Add documentation for web entry form hero (8b29be3)
6.26.12 (2020-08-03)
Documentation Updates
- ✏️ Update documentation for the new registry (3e7ba20)
Miscellaneous chores
-
🤖 lerna bootstrap (d835ec9)
-
🤖 Temporarily remove package-lock.json-files (87b3f7f)
-
🤖 Update references to new scope (b5575dd)
6.26.10 (2020-07-14)
Miscellaneous chores
-
🤖 Manually update some links (ecc0133)
-
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)
6.26.0 (2020-07-13)
Features
- 🎸 Add portrait mode support for hero (b9838f5)
Bug Fixes
-
🐛 Make videos in heroes full width (1086bbe)
-
🐛 Reduce content el margin in smaller screens (58af861) , closes #261168
6.25.0 (2020-07-07)
Bug Fixes
-
🐛 Fix padding issues with hero board (e16b215) , closes #259555
-
🐛 Use correct background-color for small boards on dark bg (d1a6f03) , closes #262933
Documentation Updates
- ✏️ Use domain links for assets (59ace1c)
6.23.0 (2020-07-01)
Miscellaneous chores
reinstall (1ab1527)
6.22.0 (2020-07-01)
Features
- 🎸 Add new color categories, update documentation (5496822)
Miscellaneous chores
-
🤖 Also update http references to https (12c6d00)
-
🤖 Remove references from old site to new site (08d174f)
-
🤖 Search and replace old color usage (3e5abb0)
6.21.16 (2020-06-18)
Bug Fixes
6.21.6 (2020-06-11)
Miscellaneous chores
- 🤖 Remove .zip files from .npmignore (b3bc7dc)
6.21.4 (2020-06-11)
Miscellaneous chores
- 🤖 Use correct site URL (6a5a482)
6.20.3 (2020-06-03)
Bug Fixes
6.19.0 (2020-06-02)
Miscellaneous chores
reinstall (3416c65)
6.17.7 (2020-05-26)
Bug Fixes
Documentation Updates
6.16.1 (2020-05-20)
Bug Fixes
-
🐛 Fix hero spacing (adae578)
-
🐛 Fix routing for dev server (295db6e)
-
🐛 Fix spacing issues for content container for hero el (bb31377)
-
🐛 Make sure the live image container grows correctly (aab6bff)
-
🐛 Make sure we have room for breadcrumbs for small screens (a0eda17)
Documentation Updates
-
✏️ Add description to the hero package.json (35da429)
-
✏️ Update documentation layout for heroes per new design (05e4a9c)
-
✏️ Use full instead of emphasize in doc examples (a2dda1d)
Miscellaneous chores
- 🤖 Add new demo example for heroes (8d24a40)
6.15.5 (2020-05-15)
Miscellaneous chores
gatsbify (0e07d68)
-
prepped and ready to separate documentation site from code (d3e1fd9)
-
pruning and reinstalling (5cda0bc)
reinstall (939dae6)
reinstall (cae55fb)
- Remove livingcss data and add frontmatter data (b384946)
6.15.4 (2020-05-14)
Miscellaneous chores
- lerna bootstrap (0c4f599)
6.15.2 (2020-05-11)
Bug Fixes
- 🐛 Align text to the left for the hero navigation step1 (c92ade3)
Miscellaneous chores
- reinstall and build (aedc097)
6.15.1 (2020-05-07)
Bug Fixes
- 🐛 Fix responsiveness to hero navigation (ec74c1e)
Miscellaneous chores
- 🤖 Update preprocessor files for hero navigation (022c942)
6.15.0 (2020-05-07)
Features
- 🎸 Use a flag: .hasno-breadcrumbs to remove reserved spacing for breadcrumbs (7dd3b11)
Bug Fixes
-
🐛 Position hero lifestyle background image to the left on larger screens (7bbf3e3)
-
🐛 Reduce breakpoint trigger for mobile (751db58)
-
🐛 Remove reserved space for breadcrumbs in hero (8cc4b23)
-
🐛 Use 16:9 ratio on images on mobile (02b5621)
Miscellaneous chores
-
🤖 reinstall (80dc63c)
-
🤖 Update dev file (1eecbce)
-
🤖 Update preprocessor files for hero (56f7ac9)
-
update deps (3fbea80)
6.11.4 (2020-04-23)
Bug Fixes
6.11.0 (2020-04-22)
Bug Fixes
6.10.9 (2020-04-22)
Miscellaneous chores
-
🤖 Add *.zip-files to .npmignore-files (062b8b0)
-
🤖 Remove references to verb in package.json files (cfdaaec)
6.10.7 (2020-04-21)
Bug Fixes
- 🐛 Fix live video in heroes (7a900ad)
6.10.6 (2020-04-17)
Miscellaneous chores
- 🤖 lerna bootstrap (d8faf26)
6.6.0 (2020-04-09)
Documentation Updates
-
✏️ Change edit this document to edit this section (791b646)
-
✏️ Remove remaining tryme badges (ebaf0c7)
6.5.4 (2020-04-08)
Bug Fixes
6.5.3 (2020-04-06)
Documentation Updates
- ✏️ Some more sg updates and tweaks (d1d6802)
6.4.3 (2020-04-03)
Bug Fixes
- 🐛 Revert positional top left right bottom from 0 to auto (f06d59a)
6.4.2 (2020-04-03)
Bug Fixes
-
🐛 Change min-width none to initial (f661bea)
-
🐛 Fix hero navigation bugs for IE11 (e862de8)
-
🐛 Make js IE11 friendly (760ff44)
-
🐛 Remove misuse of unset, none, auto and initial (87624d7)
-
🐛 Use initial instead of none and unset (d75bc65)
-
🐛 Use max-height none instead of unset (05ff638)
-
🐛 use min-height none instead of unset (f6c335b)
6.4.1 (2020-04-01)
Bug Fixes
6.4.0 (2020-04-01)
Bug Fixes
- 🐛 Fix hero image on smaller screens to go full width (c71ba2d)
6.3.4 (2020-04-01)
Bug Fixes
- 🐛 Make hero more tight responsively (60006cc)
Miscellaneous chores
- 🤖 Use more of if styling on documentation site (2eaf386)
6.3.3 (2020-03-31)
Documentation Updates
- ✏️ Adjust demos (651a76f)
6.2.1 (2020-03-26)
Bug Fixes
- 🐛 Fix hero navigation tabbing (631d7c2)
Documentation Updates
- ✏️ Add principles section for hero navigation under usage (5a2c4d7)
5.3.1 (2020-03-19)
Bug Fixes
-
🐛 Adjust hero navigation to work more smoothly responsive (52c02b1)
-
🐛 Apply latest fixes for the hero navigation (47ba6fe) . We still need to find a better way to fix the hierarchy in the navigation, preferably that we have nested lists
5.3.0 (2020-03-18)
Bug Fixes
- 🐛 Decrease the minimum height of the hero element (9a01629)
Documentation Updates
- ✏️ Update hero with tabs usage (db4e9a5)
5.2.0 (2020-03-17)
Features
- 🎸 Add small section board with dark color (6d558e4)
Code Refactoring
- 💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother
5.0.4 (2020-03-14)
Miscellaneous chores
5.0.1-alpha.162 (2020-03-13)
Bug Fixes
-
🐛 Adjust navigation for hero (93462a6)
-
🐛 Change name of form grid to form-grid to avoid overlap (09f62c5)
5.0.1-alpha.160 (2020-03-12)
Features
- 🎸 Add local dev server for components and updated docs (41881ab)
Miscellaneous chores
5.0.1-alpha.159 (2020-03-11)
Features
- 🎸 Add animation to hero navigation (06441f2)
Bug Fixes
- 🐛 Adjust navigation styling and documentation for nav (635e971)
5.0.1-alpha.153 (2020-03-06)
Documentation Updates
- ✏️ Use cta buttons in hero examples and documentation (53fd95d)
5.0.1-alpha.149 (2020-03-05)
Miscellaneous chores
-
🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables
-
🤖 Starting to align components to new baseline grid (cf2c073)
-
Align typography to baseline. First attempt (f4447e9)
-
Starting to align components to new baseline grid (999babf)
5.0.1-alpha.147 (2020-03-02)
Miscellaneous chores
5.0.1-alpha.143 (2020-02-26)
Documentation Updates
- ✏️ Some tweaks (4db6b23)
5.0.1-alpha.139 (2020-02-26)
Bug Fixes
- 🐛 Always show arrow and underline in mobile hero nav (129c960)
5.0.1-alpha.137 (2020-02-25)
Features
- 🎸 Add navigation feature to hero element (a9646f3)
5.0.1-alpha.127 (2020-02-18)
Documentation Updates
- ✏️ Add some icon to footer in all demo and doc files (f2bdaae)
5.0.1-alpha.121 (2020-02-17)
Miscellaneous chores
- lerna bootstrap (3699d59)
5.0.1-alpha.120 (2020-02-17)
Miscellaneous chores
-
🤖 Use variables instead of hardcoded values (db103b1)
-
🤖 Use variables instead of hardcoded values. Add preproc (510b935) . essor tests
5.0.1-alpha.117 (2020-02-06)
Documentation Updates
- ✏️ Add edit links to documentation files (7c6e770)
5.0.1-alpha.115 (2020-02-05)
Documentation Updates
- ✏️ Update documentation examples to include if classname (80cf4ac)
5.0.1-alpha.112 (2020-01-22)
Features
- 🎸 Add breadcrumbs (17e6eae)
Miscellaneous chores
- 🤖 Update responsiveness of hero and update less/scss (ea58cc9)
5.0.1-alpha.111 (2020-01-21)
Bug Fixes
- 🐛 Fix responsiveness for forms grids, heroes and inputs (5de0a0d)
5.0.1-alpha.109 (2020-01-20)
Documentation Updates
- ✏️ Add more examples of approved hero content (2d941ac)
5.0.1-alpha.106 (2020-01-14)
Features
-
🎸 Add sass support for hero (cb57870)
-
🎸 Add support for less for hero, core, typo and breakpoin (237b71c)
5.0.1-alpha.99 (2019-12-17)
Features
- 🎸 Add small hero board (aa5057f)
Documentation Updates
- ✏️ Update documentation regarding small hero boards (0cf8119)
5.0.1-alpha.97 (2019-12-16)
Miscellaneous chores
- 🤖 lerna bootstrap (4e779bc)
5.0.1-alpha.94 (2019-12-12)
Bug Fixes
- 🐛 Fix hero usage with video example (f85f7d6)
Documentation Updates
- ✏️ Finish off documentation and renaming (8a79487)