Cards
This component is used for when there is content and actions about a single subject.
Cards can include text, images and also call to actions. They can be made also of only text and images
Default Card
This is the default card style. By default the card will take the size of the container it is in.
Card Title
Lorem ipsum dolor sit amet, consectetur adipscing elit. Cras sed fringilla lacus. Aenean nec ipsum porta, tristique elit at.
Card Title
Lorem ipsum dolor sit amet, consectetur adipscing elit. Cras sed fringilla lacus. Aenean nec ipsum porta, tristique elit at.
<div class="euaa-card">
<div class="euaa-card__image"><img src="../static/resources/images/placeholder_img.png" /></div>
<div class="euaa-card__content">
<div class="euaa-card__description">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit.
Cras sed fringilla lacus. Aenean nec ipsum porta, tristique elit at.</p>
</div>
<div class="euaa-card__button">
<input type="submit" class="euaa-btn euaa-btn--primary euaa-btn--full-width" value="Primary Button" />
</div>
</div>
</div>Card without image
This is a card style without image
Card Title
Lorem ipsum dolor sit amet, consectetur adipscing elit. Cras sed fringilla lacus. Aenean nec ipsum porta, tristique elit at.
<div class="euaa-card">
<div class="euaa-card__content">
<div class="euaa-card__description">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit.
Cras sed fringilla lacus. Aenean nec ipsum porta, tristique elit at.</p>
</div>
<div class="euaa-card__button">
<input type="submit" class="euaa-btn euaa-btn--primary euaa-btn--full-width" value="Primary Button" />
</div>
</div>
</div>Clickable Card
This is a clickable card
Card Title
Lorem ipsum dolor sit amet, consectetur adipscing elit. Cras sed fringilla lacus. Aenean nec ipsum porta, tristique elit at.
<div class="euaa-card euaa-card--clickable">
<div class="euaa-card__image"><img src="../static/resources/images/placeholder_img.png" /></div>
<div class="euaa-card__content">
<div class="euaa-card__description">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit.
Cras sed fringilla lacus. Aenean nec ipsum porta, tristique elit at.</p>
</div>
</div>
</div>