Composable card

Our card component has several variants to help you highlight and promote content or services.

There may be some instances where you need a card variant that we do not provide. In this case, use the composable card to build what you need.

Demo

<div class="l-grid" style="--grid--basis: 200px;">
    {{> eds-c-card-with-image isFauxLink=true}}
    {{> eds-c-card-with-image isFauxLink=true}}
    {{> eds-c-card-with-image isFauxLink=true}}
</div>

When to use this component

Use the card to highlight and link to further content or services at points where it might be helpful to your users.

When not to use this component

Use cards carefully. Too many cards can be overwhelming and mean that nothing is highlighted.

How it works

Installation

To install the components, go to the get started guide for developers.

To use the Composable card component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

Import the styles of the Composable card component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-card-composable';

Options

Variants

The card variants are:

• with image
• with icon
• with metadata
• journal card

with image

<div class="l-grid" style="--grid--basis: 200px;">
    {{> eds-c-card-with-image isFauxLink=true}}
    {{> eds-c-card-with-image isFauxLink=true}}
    {{> eds-c-card-with-image isFauxLink=true}}
</div>

with icon

<div class="l-stack" style="--stack--gap: 1rem;">
    <div class="l-stack" style="--stack--gap: 1rem;">
        {{> eds-c-card-with-icon isFauxLink=true}}
        {{> eds-c-card-with-icon isFauxLink=true}}
        {{> eds-c-card-with-icon isFauxLink=true}}
    </div>
    <div class="l-grid" style="--grid--basis: 200px;">
        {{> eds-c-card-with-icon isFauxLink=true}}
        {{> eds-c-card-with-icon isFauxLink=true}}
        {{> eds-c-card-with-icon isFauxLink=true}}
    </div>
</div>

Go to our guidelines on icons.

with metadata

To display metadata such as dates or content types alongside a title and description, set the metadata array. You can only have 2 unique metadata items in this array.

<div class="l-stack" style="--stack--gap: 1rem;">
    {{> eds-c-card-with-metadata isFauxLink=true isHorizontal=true}}
    {{> eds-c-card-with-metadata isFauxLink=true isHorizontal=true}}
    {{> eds-c-card-with-metadata isFauxLink=true isHorizontal=true}}
</div>

journal card

<div class="l-stack" style="--stack--gap: 1rem; min-width: 200px;">
    {{> eds-c-card-journal isFauxLink=true isHorizontal=true}}

    {{#> eds-c-card-composable isHorizontal=true}}
        <div class="eds-c-card-composable__container eds-c-card-composable__container--to-sidebar">
            {{> eds-c-card-composable-journal-body }}
            <div class="eds-c-card-composable__sidebar eds-c-card-composable__sidebar--with-separator">
                {{> eds-c-card-composable-metadata isMetadataHorizontal=true }}
            </div>
        </div>
        <div style="padding:16px; display: flex; gap: 16px">
            {{> eds-c-button linkUrl="https://example1.com" template="eds-c-buttonIconRight" icon="/static/images/icons/eds-i-external-link-small.svg#eds-i-external-link-small" text="Submit to this journal" variant="tertiary" size="small"}}
            {{> eds-c-button linkUrl="https://example2.com" template="eds-c-buttonIconRight" icon="/static/images/icons/eds-i-arrow-right-small.svg#eds-i-arrow-right-small" text="Submission guidelines" variant="secondary" size="small"}}
        </div>
    {{/eds-c-card-composable}}
</div>

Configuration

To view all the properties of this component, go to the schema.

Import the mixin for the responsive styles:

// consumer application level code
@import '../path/to/@springernature/elements/components/eds-c-card-composable'; // default styles

How to compose

{{! How to compose a card }}
{{! [1] Add flags to the container }}
{{! [2] Select a layout }}
{{! [3] Inject subcomponents }}

{{#> eds-c-card-composable isHorizontal=true}} {{! [1] }}
    <div class="eds-c-card-composable__container eds-c-card-composable__container--to-sidebar"> {{! [2] }}
        {{> eds-c-card-composable-journal-body }} {{! [3] }}
        <div class="eds-c-card-composable__sidebar eds-c-card-composable__sidebar--with-separator"> {{! [2] }}
            {{> eds-c-card-composable-metadata isMetadataHorizontal=true }} {{! [3] }}
        </div>
    </div>
    <div style="padding:16px; display: flex; gap: 16px"> {{! [3] }}
        {{> eds-c-button linkUrl="https://my.link.com/dialog" template="eds-c-buttonIconRight" icon="/static/images/icons/eds-i-external-link-small.svg#eds-i-external-link-small" text="Submit to this journal" variant="tertiary" size="small"}}
        {{> eds-c-button linkUrl="https://my.link.com/dialog2" template="eds-c-buttonIconRight" icon="/static/images/icons/eds-i-arrow-right-small.svg#eds-i-arrow-right-small" text="Submission guidelines" variant="secondary" size="small"}}
    </div>
{{/eds-c-card-composable}}

Use eds-c-card-composable as a wrapper and pass the values and inject subcomponents as needed.

We provide 2 layouts. eds-c-card-composable__container--with-sidebar will keep the card horizontal on all screen sizes.

eds-c-card-composable__container--to-sidebar will stack on smaller screen sizes and switch to horizontal on larger screens.
For this to work, set the isHorizontal to true.

isHighlight

This is an optional property. If set to true, it will add a grey line to the card.

You can use this option to help a card stand out on a page. Or, if you have a long list of cards, you could add the line to each one as a way of marking out the list items.

On smaller screen sizes, the blue line will always be at the top of the card. If you are using the horizontal layout, then on larger screen sizes it will be on the left side of the card.

isHighlightAction

This is an optional property. If set to true, it will add a blue line to the card.

You can use this option to help a card stand out on a page. Or, if you have a long list of cards, you could add the line to each one as a way of marking out the list items.

On smaller screen sizes, the blue line will always be at the top of the card. If you are using the horizontal layout, then on larger screen sizes it will be on the left side of the card.

srOnlyHighlightText

This is an optional property that allows you to add a descriptive label about the use of the highlight for screen reader users. Use it to explain why a card is highlighted and give more meaning to screen reader users.

img or picture tag

Use <img> in simple cases like having a single image source.

Use <picture> for more complex cases such as responsive images.

image.aspectRatio or picture.aspectRatio

The aspect ratio for the image area is 16:9 and you should try to keep this aspect ratio for images. Where necessary, you can change this by using the aspectRatio property on the card’s image data.

"aspectRatio": "4 / 3"

imageMimeType

Safari browser version 13 does not render webp images correctly even where there is a fallback image as jpeg.
Use the imageMimeType property to add the image type. This will add imageMimeType: image/webpage” and fix this issue.
If image type is not included, it will try to load the webp image format even though it is not supported.

truncateSummary

This is an optional property. If set to true, it will limit the summary text to 3 lines and then add an ellipsis.

You should keep summary text to under 150 characters and set this limit in your application. Where longer text is unavoidable, use this property.

Only use this property where you cannot control the length of the summary text.

cardLabel

This is an optional property. If set to true it will allow you to add a label above the title.

This label should be used to indicate content types, for example ‘Article’ or ‘Review’. Work with a content and/or UX designer to choose the correct labels.

Help improve this page