Back to Navigational Card-guidelines
CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window
Navigational Cards are used to link to important pages, like product pages
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/navigational-card@17.0.30-alpha.0
Table of Contents
Edit this section, Opens in new windowUsage
Container
The Navigational Cards container, .cards.navigational, can be modified with the classes one, two or three for a
desired layout.
<ul class="if cards navigational [lifestyle|text|image] [one|two|three]" role="presentation">
…
</ul>Studio Navigational Card Implementation
<ul role="presentation" class="if cards navigational [one|two|three]">
<li role="presentation" class="if">
<a class="if navigational-card" href="/asd">
<img
class="if image"
src="https://if-design-cdn.azureedge.net/images/documentation/studio/If-studio-documents-IFS-04772_PNG.PNG"
/>
<p class="if text lead">
<span class="if">Asiakaspalvelu</span>
</p>
<p class="if text meta">Asiakaspalvelu ja yhteystiedot</p>
</a>
</li>
</ul>Text Navigational Card Implementation
<ul class="if cards navigational [one|two|three] text">
<li class="if navigational-card text [box]">
<span class="if title"> Hitta rätt elbil för dig </span>
<span class="if text">
Antalet el- och laddhybrider ökar kraftigt på marknaden. Vi hjälper dig att hitta en
elbil som passar ditt behov och vad du behöver tänka på.
</span>
<a href="/addsadad" class="if standalone">Så fungerar..</a>
</li>
…
</ul>Image Navigational Card Implementation
<ul class='if cards navigational image [one|two|three|four]'>
<li class='if'>
<a
href='/asdsadsa'
class='if navigational-card image'
>
<span class='if image'><img
src='https://v.imgi.no/85q28mh42c-MOODBOARD/980'
class='if'
/></span>
<span class='if title'>
Hitta rätt elbil för dig
</span>
</a>
</li>
</ul>
…
</ul>Lifestyle Navigational Card Implementation
<ul class="if cards navigational [one|two|three] lifestyle">
<li class="if">
<a href="/asdsadsa" class="if navigational-card lifestyle">
<span class="if image"
><img src="https://v.imgi.no/uymteuljgs-SQUARE/400" class="if"
/></span>
<span class="if title"> Hitta rätt elbil för dig </span>
<span class="if text">
Antalet el- och laddhybrider ökar kraftigt på marknaden. Vi hjälper dig att hitta en
elbil som passar ditt behov och vad du behöver tänka på.
</span>
</a>
</li>
…
</ul>Or with separate link
-
Hitta rätt elbil för dig Antalet el- och laddhybrider ökar kraftigt på marknaden. Vi hjälper dig att hitta en elbil som passar ditt behov och vad du behöver tänka på. Standalone link
<ul class="if cards navigational [one|two|three] lifestyle">
<li class="if navigational-card lifestyle">
<span class="if image"
><img src="https://v.imgi.no/uymteuljgs-SQUARE/400" class="if"
/></span>
<span class="if title"> Hitta rätt elbil för dig </span>
<span class="if text">
Antalet el- och laddhybrider ökar kraftigt på marknaden. Vi hjälper dig att hitta en
elbil som passar ditt behov och vad du behöver tänka på.
</span>
<a class="if standalone" href="/asds">Standalone link</a>
</li>
…
</ul>