Standardize on 'card' vs. 'tile' in code

[victorlin]

also posted on Slack

The concept of "rectangular clickable box that is shown for each item in a collection" has two names across the codebase. An example is this component named FilterShowcaseTile which is defined by props and styled components with Card in the name.

nextstrain.org/static-site/src/components/ListResources/index.tsx

Lines 260 to 287 in 6b7f354

	const FilterShowcaseTile = ({ card }: { card: FilterCard }) => {
	const setSelectedFilterOptions = useContext(SetSelectedFilterOptions);
	if (!setSelectedFilterOptions) {
	throw new Error("Usage of this component requires the SetSelectedFilterOptions context to be set.")
	}
	const filter = useCallback(
	() => {
	setSelectedFilterOptions(card.filters.map(createFilterOption));
	goToAnchor(LIST_ANCHOR);
	},
	[setSelectedFilterOptions, card]
	)
	return (
	<CardOuter>
	<CardInner>
	<div onClick={filter}>
	<CardTitle $squashed>
	{card.name}
	</CardTitle>
	<CardImgWrapper filename={card.img}/>
	</div>
	</CardInner>
	</CardOuter>
	)
	}

We should be consistent and use just one name for this concept.

For reference, these are the current places that this concept is used:

1. https://nextstrain.org/

   

2. https://nextstrain.org/pathogens

   

3. https://nextstrain.org/groups

   

[victorlin]

I prefer 'tile' based on snippets from various answers to this UX StackExchange question:

I think of tiles as … fixed in size … and spaced out regularly along a grid.
Tiles are almost always incomplete providers of information: if you want to know anything about them, you have to interact with them.

Cards on the other hand imply that all of the relevant information are contained on them.

[victorlin]

Side note: in #928, card represents this component, which I think is appropriate and we should keep calling that a card.